Button onclick Number in DB +1 Laravel
I wanna know if its possible.
I wanna know if its possible.
If I have a database with a table and there is an entry with an int parameter who is 0.
In my view i can see the number is : 0
and then i wanna have a button and onclick it should be + 1 in my database and it should show me this number per ajax.
Is this possible so can Laravel work with ajax and js?
I wanna do it like this:
Controller:
function ($count) {
$number= DB::('number')->first;
if (isset($count)) {
$count = $number + 1;
} else {
$count = $number;
}
and view:
a form with a button with the function count?
i am new so it is only me thinking about something
but it is possible and am i on the right way?
How to Create Ajax Autocomplete Search from Database in Laravel 6
In this post, you'll learn how to create jquery ajax autocomplete search textbox from database in Laravel 6 using typeahead
Originally published at https://itsolutionstuff.com
I will create very simple example of Ajax autocomplete search in Laravel 6. You can easily make text box field autocomplete in Laravel 6 application.
Bootstrap Typeahead JS provide way of user interface so, we can easily write code of Jquery Ajax and make it dynamic autocomplete search in Laravel 6 application. we can easily use Typeahead JS with bootstrap.
Jquery autocomplete is must if you are dealing with big data, like you have items or products table and thousands of records so it's not possible to give drop-down box, but it is better if we use autocomplete instead of select box.
Follow bellow step to create simple autocomplete search with Laravel 6 application.
Step 1 : Download Laravel 6first of all we need to get fresh Laravel 6 version application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blogStep 2: Create Migration and Model
In this step we have to create migration for items table using Laravel 6 php artisan command, so first fire bellow command:
php artisan make:migration create_items_table
After this command you will find one file in following path "database/migrations" and you have to put bellow code in your migration file for create items table.
<?phpuse Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;class CreateItemsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('items', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->timestamps();
});
}/** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('items'); }}
Then after, simply run migration:
php artisan migrate
After create "items" table you should create Item model for items, so first create file in this path "app/Item.php" and put bellow content in item.php file:
app/Item.php
<?phpStep 3: Create Routenamespace App;
use Illuminate\Database\Eloquent\Model;
class Item extends Model
{}
In this is step we need to create routes for display view and ajax method. so open your "routes/web.php" file and add following route.
routes/web.php
Route::get('search', '[email protected]')->name('search');
Route::get('autocomplete', '[email protected]')->name('autocomplete');
Step 4: Create ControllerIn this step, we have to create new controller as SearchController and we have also need to add two methods index() and autocomplete() on that controller like as you can see bellow:
app/Http/Controllers/SearchController.php
<?phpStep 5: Create View Filenamespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Item;class SearchController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('search');
}/** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function autocomplete(Request $request) { $data = Item::select("name") ->where("name","LIKE","%{$request->query}%") ->get(); return response()->json($data); }}
In Last step, let's create search.blade.php(resources/views/search.blade.php) for layout and lists all items code here and put following code:
resources/views/search.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 6 Autocomplete Search using Bootstrap Typeahead JS - ItSolutionStuff.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body><div class="container">
<h1>Laravel 6 Autocomplete Search using Bootstrap Typeahead JS - ItSolutionStuff.com</h1>
<input class="typeahead form-control" type="text">
</div><script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script></body>
</html>
Make sure you have some dummy data on your items table before run this example. Now we are ready to run our example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
Read Also: Laravel 6 Image Upload Tutorial
http://localhost:8000/search
I hope it can help you...
Thanks for reading ❤
If you liked this post, share it with all of your programming buddies!
Follow me on Facebook | Twitter
Further reading
☞ Laravel 5.8 Tutorial for Beginners
☞ Upgrading Laravel To 6.0 From 5.8
☞ Laravel 6 Release New Features and Upgrade
Laravel 5.8 Ajax CRUD tutorial using Datatable JS
In this tutorial, i want to share with you create jquery ajax crud operations application using datatable js, modals in laravel 5.8. we will create insert update delete records with modal and pagination in laravel 5.8.
In this tutorial, i want to share with you create jquery ajax crud operations application using datatable js, modals in laravel 5.8. we will create insert update delete records with modal and pagination in laravel 5.8.
We will use yajra datatable to list a records with pagination, sorting and filter (search). we will use bootstrap modal for create new records and update new records. we will use resource routes to create crud (create read update delete) application in laravel 5.8.
I will provide you step by step guide to create ajax crud example with laravel 5.8. you just need to follow few step to get c.r.u.d with modals and ajax. you can easily use with your laravel 5.8 project and easy to customize it.
You can see bellow preview of ajax crud app.
List Page
Create Page
Edit Page
Step 1 : Install Laravel 5.8
first of all we need to get fresh Laravel 5.8 version application using bellow command, So open your terminal OR command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
Step 2 : Install Yajra Datatable Package
We need to install yajra datatable composer package for datatable, so you can install using following command:
composer require yajra/laravel-datatables-oracle
After that you need to set providers and alias.
config/app.php
'providers' => [
....
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
....
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
Step 3: Update Database Configuration
In second step, we will make database configuration for example database name, username, password etc for our crud application of laravel 5.8. So let’s open .env file and fill all details like as bellow:
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name(blog)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)
Step 4: Create Table
we are going to create ajax crud application for product. so we have to create migration for “products” table using Laravel 5.8 php artisan command, so first fire bellow command:
php artisan make:migration create_products_table --create=products
After this command you will find one file in following path “database/migrations” and you have to put bellow code in your migration file for create products table.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateProductsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->text('detail');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
}
Now you have to run this migration by following command:
php artisan migrate
Step 5: Create Resource Route
Here, we need to add resource route for product ajax crud application. so open your “routes/web.php” file and add following route.
routes/web.php
Route::resource('ajaxproducts','ProductAjaxController');
Step 6: Create Controller and Model
In this step, now we should create new controller as ProductAjaxController. So run bellow command and create new controller.
So, let’s copy bellow code and put on ProductAjaxController.php file.
app/Http/Controllers/ProductAjaxController.php
<?php
namespace App\Http\Controllers;
use App\Product;
use Illuminate\Http\Request;
use DataTables;
class ProductAjaxController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
if ($request->ajax()) {
$data = Product::latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '<a href="javascript:void(0)" data-toggle="tooltip" data-id="'.$row->id.'" data-original-title="Edit" class="edit btn btn-primary btn-sm editProduct">Edit</a>';
$btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip" data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteProduct">Delete</a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('productAjax',compact('products'));
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
Product::updateOrCreate(['id' => $request->product_id],
['name' => $request->name, 'detail' => $request->detail]);
return response()->json(['success'=>'Product saved successfully.']);
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Product $product
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$product = Product::find($id);
return response()->json($product);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Product $product
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
Product::find($id)->delete();
return response()->json(['success'=>'Product deleted successfully.']);
}
}
Ok, so after run bellow command you will find “app/Product.php” and put bellow content in Product.php file:
app/Product.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
protected $fillable = [
'name', 'detail'
];
}
Step 7: Create Blade Files
In last step. In this step we have to create just blade file. so we need to create only one blade file as productAjax.blade.php file.
So let’s just create following file and put bellow code.
resources/views/productAjax.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5.8 Ajax CRUD tutorial using Datatable - ItSolutionStuff.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel 5.8 Ajax CRUD tutorial using Datatable - ItSolutionStuff.com</h1>
<a class="btn btn-success" href="javascript:void(0)" id="createNewProduct"> Create New Product</a>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Details</th>
<th width="280px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal fade" id="ajaxModel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modelHeading"></h4>
</div>
<div class="modal-body">
<form id="productForm" name="productForm" class="form-horizontal">
<input type="hidden" name="product_id" id="product_id">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Details</label>
<div class="col-sm-12">
<textarea id="detail" name="detail" required="" placeholder="Enter Details" class="form-control"></textarea>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="saveBtn" value="create">Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('ajaxproducts.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'detail', name: 'detail'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$('#createNewProduct').click(function () {
$('#saveBtn').val("create-product");
$('#product_id').val('');
$('#productForm').trigger("reset");
$('#modelHeading').html("Create New Product");
$('#ajaxModel').modal('show');
});
$('body').on('click', '.editProduct', function () {
var product_id = $(this).data('id');
$.get("{{ route('ajaxproducts.index') }}" +'/' + product_id +'/edit', function (data) {
$('#modelHeading').html("Edit Product");
$('#saveBtn').val("edit-user");
$('#ajaxModel').modal('show');
$('#product_id').val(data.id);
$('#name').val(data.name);
$('#detail').val(data.detail);
})
});
$('#saveBtn').click(function (e) {
e.preventDefault();
$(this).html('Sending..');
$.ajax({
data: $('#productForm').serialize(),
url: "{{ route('ajaxproducts.store') }}",
type: "POST",
dataType: 'json',
success: function (data) {
$('#productForm').trigger("reset");
$('#ajaxModel').modal('hide');
table.draw();
},
error: function (data) {
console.log('Error:', data);
$('#saveBtn').html('Save Changes');
}
});
});
$('body').on('click', '.deleteProduct', function () {
var product_id = $(this).data("id");
confirm("Are You sure want to delete !");
$.ajax({
type: "DELETE",
url: "{{ route('ajaxproducts.store') }}"+'/'+product_id,
success: function (data) {
table.draw();
},
error: function (data) {
console.log('Error:', data);
}
});
});
});
</script>
</html>
Now you can test it by using following command:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/ajaxproducts
I hope it can help you…
Laravel 5.8 Tutorial - Datatables Dropdown Filter Server-side using Ajax
In this post, we will learn how to Search or Filter Laravel Datatables data using Ajax jQuery with Individual column searching. Here you can find a complete process of Individual column searching with server side process in Laravel data tables using yajra from scratch.
Originally published at https://www.webslesson.info
This is one more post on Laravel 5.8 with Datatables and in this post we will cover How can we implement Laravel Datatables Individual Column Searching using Ajax. In some of our previous post, we have already covered topic like how to add custom search filter in Laravel Datatables and How to make Daterange search filter in Laravel Datatables. Now here we have come with new topic in Laravel 5.8 framework with Datatables and here we will show you how to add Individual column dropdown search filter in Laravel DataTables.
Here we will create dropdown search filter in Laravel DataTables with serve-side processing of data that means all searching or filtering of data will be process at server side and display result on web page without refresh of web page because here we will use Ajax with Laravel 5.8 and Datatables. For implement DataTables with Laravel 5.8 here we will use yajra/laravel-datatables-oracle package. By using this package we can use jQuery DataTables in Laravel 5.8 framework.
For learn individual column searching or filtering of DataTables data, we will add dropdown list in one of the column of DataTables and then after by using jQuery and Ajax we will filter DataTables data. For this here we will take and example of display product data on DataTables, now we want to filter this product data based on category of product. So, we will make category dropdown list in category column, and based on value of category we will filter or search product data in DataTables with Laravel 5.8 using Ajax jQuery. Below you can find step by step process for Laravel 5.8 DataTables Individual column searching or filtering of data using Ajax jquery.
- Make Tables in Mysql Database
- Install Laravel 5.8 framework
- Install yajra/laravel-datatables-oracle package
- Make Database connection in Laravel 5.8
- Create Controllers in Laravel 5.8 application
- Create Blade view file in Laravel 5.8
- Set Route of Controllers method
- Run Laravel 5.8 Application
First you have make table in your mysql database, for this you have to run following sql script in your mysql database. It will make category table and product table in your database. Here we will fetch data from this two table by join table with category_id primary key in category table and category foreign key in product table.
--
-- Database:testing1
--
-- Table structure for table
category
CREATE TABLE IF NOT EXISTS category (
category_id int(11) NOT NULL,
category_name varchar(250) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;
-- Dumping data for table
category
INSERT INTO category (category_id, category_name) VALUES
(1, 'Mobiles'),
(2, 'Computers'),
(3, 'Clothing'),
(4, 'Beauty Item'),
(5, 'Sports Item'),
(6, 'Toys Item'),
(7, 'Books'),
(8, 'Entertainment Item');
--
-- Table structure for table
product
CREATE TABLE IF NOT EXISTS product (
id int(11) NOT NULL,
category int(11) NOT NULL,
name varchar(250) NOT NULL,
price double(10,2) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=41 DEFAULT CHARSET=latin1;
-- Dumping data for table
product
INSERT INTO product (id, category, name, price) VALUES
(1, 1, 'Save on BLU Advance 5.5 HD', 74.99),
(2, 2, 'Dell Inspiron 15.6" Gaming Laptop', 860.00),
(3, 3, 'Women''s Slim Sleeveless', 69.00),
(4, 4, 'Andis 1875-Watt Fold-N-Go Ionic Hair Dryer', 17.00),
(5, 5, 'GM Ripple Cricket Grip, Set Of 3', 66.00),
(6, 6, 'Barbie Fashions and Accessories', 12.00),
(7, 7, 'The Ministry of Utmost Happiness', 6.00),
(8, 8, 'The Great Gatsby (3D)', 8.00),
(9, 1, 'iVooMi Me 1+', 49.00),
(10, 2, 'Apple MacBook Air MQD32HN/A 13.3-inch Laptop 2017', 896.00),
(11, 3, 'Balenzia Premium Mercerised Cotton Loafer Socks', 5.00),
(12, 4, 'Organix Mantra Lemon Cold Pressed Essential Oil', 4.50),
(13, 5, 'SpeedArm Cricket Ball Thrower', 15.00),
(14, 6, 'Mattel Bounce Off Game, Multi Color', 10.00),
(15, 7, 'Seven Days With Her Boss', 5.00),
(16, 8, 'Supernatural Season 1-9 DVD', 22.00),
(17, 1, 'InFocus Turbo 5', 189.00),
(18, 2, 'HP 15-bg008AU 15.6-inch Laptop , Jack Black', 350.00),
(19, 3, 'Seven Rocks Men''s V-Neck Cotton Tshirt', 12.00),
(20, 4, 'Exel Elixir Sublime Antioxidant Serum Cream', 55.00),
(21, 5, 'Gray Nicolls Bat Repair Kit', 9.00),
(22, 6, 'Think Fun Rush Hour, Multi Color', 22.00),
(23, 7, 'Pregnancy Notes: Before, During & After', 5.00),
(24, 8, 'Sherlock Season - 4', 15.00),
(25, 1, 'Vivo Y53', 105.00),
(26, 2, 'Dell Inspiron 15-3567 15.6-inch Laptop', 356.00),
(27, 3, 'Fastrack Sport Sunglasses (Black) (P222GR1)', 14.00),
(28, 4, 'Exel Lotion with stabilized Tea Tree Oil', 28.00),
(29, 5, 'Burn Vinyl Hexagonal Dumbbell', 45.00),
(30, 6, 'Cup Cake Surprise Princess', 8.00),
(31, 7, 'Word Power Made Easy', 2.00),
(32, 8, 'Star Wars: The Force Awakens', 5.00),
(33, 1, 'Lenovo Vibe K5 (Gold, VoLTE update)', 65.00),
(34, 2, 'Lenovo 110 -15ACL 15.6-inch Laptop , Black', 225.00),
(35, 3, 'Zacharias Ankle Socks Pack of 12 Pair', 5.00),
(36, 4, 'Exel SUNSCREEN Broad Spectrum UVA & UVB', 26.00),
(37, 5, 'Burn 500124 Inter Lock Mat (Black)', 24.00),
(38, 6, 'Toyshine Devis Boy 9', 10.00),
(39, 7, 'Think and Grow Rich', 2.50),
(40, 8, 'The Jungle Book', 10.00);
-- Indexes for dumped tables --
-- Indexes for table
category
ALTER TABLE category
ADD PRIMARY KEY (category_id);
-- Indexes for table
product
ALTER TABLE product
ADD PRIMARY KEY (id);
-- AUTO_INCREMENT for dumped tables --
-- AUTO_INCREMENT for table
category
ALTER TABLE categoryMODIFY
category_id int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=9;
-- AUTO_INCREMENT for table product
ALTER TABLE product
MODIFY id int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=41;
Now we want to download and install Laravel 5.8 framework in our computer. For this we have to go command prompt in which first we want to run composer command because it has manage Laravel library dependancy and after this we have to write following command. This command will download and install Laravel 5.8 framework in your local computer.
composer create-project --prefer-dist laravel/laravel column_searchingInstall yajra/laravel-datatables-oracle package
Here we want to use DataTables with Laravel. For this use DataTables with Laravel we want to download and install yajra laravel datatables package. By using this package we can use DataTables in Laravel framework. For this we have to go command prompt and write following command.
composer require yajra/laravel-datatables-oracle
This command will download yajra laravel datatables package, now we want to publish this package in Laravel application. For this we have to go config/app.php and in this file we have to define autoload service providers and aliase class details.
'providers' => [Make Database connection in Laravel 5.8............
Yajra\Datatables\DatatablesServiceProvider::class,
],
'aliases' => [
............
'Datatables' => Yajra\Datatables\Facades\Datatables::class,],
After this we want to make database connection in this Laravel 5.8 application, for this we have to open .env file and in this we have to define Mysql database configuration.
Create Controllers in Laravel 5.8 application
........................DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=testing
DB_USERNAME=root
DB_PASSWORD=........................
Now we want to make controllers in Laravel 5.8 application for handle http request. For this we have to go command prompt and write following command.
php artisan make:controller ColumnSearchingController
This command will create ColumnSearchingController.php controller class in app/Http/Controllers folder. In this class first we have write use DB; statement. By using this statement we can perform database related operation. In this class we have make following method.
index(Request $request) - This the root method of this class. This method has load column_searching.blade.php file in browser with the category data for fill category dropdown list box for filter data. This method has also received ajax request for load all data in Datatable or load filter data in Datatable. This method has also send data from datatables also.
<?phpCreate Blade view file in Laravel 5.8namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
class ColumnSearchingController extends Controller
{
function index(Request $request)
{
if(request()->ajax())
{
if($request->category)
{
$data = DB::table('product')
->join('category', 'category.category_id', '=', 'product.category')
->select('product.id', 'product.name', 'category.category_name', 'product.price')
->where('product.category', $request->category);
}
else
{
$data = DB::table('product')
->join('category', 'category.category_id', '=', 'product.category')
->select('product.id', 'product.name', 'category.category_name', 'product.price');
}return datatables()->of($data)->make(true);
}$category = DB::table('category')
->select("*")
->get();return view('column_searching', compact('category'));
}
}?>
View file is mainly used for display html output data on web page. In laravel we have store view file in resources/views/column_searching.blade.php. In this blade view file we have already imported required library like jQuery, Bootstrap and jquery DataTables. Here first it has make category dropdown list box by using category data from controller index method. In this page we have also write jquery and Ajax code for initialize jQuery DataTables plugin and dropdown search filter of DataTables data also.
<html>Set Route of Controllers method
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 5.8 Tutorial - Datatables Individual Column Searching using Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">Laravel 5.8 Tutorial - Datatables Individual Column Searching using Ajax</h3>
<br />
<div class="table-responsive">
<table class="table table-bordered table-striped" id="product_table">
<thead>
<tr>
<th>Sr. No.</th>
<th>Product Name</th>
<th>
<select name="category_filter" id="category_filter" class="form-control">
<option value="">Select Category</option>
@foreach($category as $row)
<option value="{{ $row->category_id }}">{{ $row->category_name }}</option>
@endforeach
</select>
</th>
<th>Product Price</th>
</tr>
</thead>
</table>
</div>
<br />
<br />
</div>
</body>
</html><script>
$(document).ready(function(){
fetch_data();
function fetch_data(category = '')
{
$('#product_table').DataTable({
processing: true,
serverSide: true,
ajax: {
url:"{{ route('column-searching.index') }}",
data: {category:category}
},
columns:[
{
data: 'id',
name: 'id'
},
{
data: 'name',
name: 'name'
},
{
data: 'category_name',
name: 'category_name',
orderable: false
},
{
data:'price',
name:'price'
}
]
});
}
$('#category_filter').change(function(){
var category_id = $('#category_filter').val();
$('#product_table').DataTable().destroy();
fetch_data(category_id);
});});
</script>
Once all code is ready, now we want to set route of controller method. For this we have to go routes/web.php file and under this file we have to define route for controller method.
<?phpRun Laravel 5.8 ApplicationRoute::resource('column-searching', 'ColumnSearchingController');
?>
Lastly, we want to run Laravel 5.8 application. For this again we want to go command prompt and write following command.
php artisan serve
This command will start Laravel 5.8 application and give base url of your application. For run above code, we have to write http://127.0.0.1:8000/column-searching. It will execute above code. So this is complete step by step process of server side processing of Individual Datatables column searching or filtering of Data in Laravel 5.8 using Ajax. So, test this script and learn something new in Laravel framework.