10-Apr-2023
.
Admin
Hi Guys,
In this Tutorial,I will learn you how to ue datatable dropdown search in laravel.You can easy and simple use datatable dropdown filter in laravel.
We would love to share with you how to add custom date filter and custom input search field and without display data without page refresh on datatables.
Laravel yajra datatables provide default global search, in that search it will search entire row of table. But if you need to add for only one specific column like for created date search with datepicker or status with dropdown then you must have to implement custom filtering in your datatable.
DataTables is a plug-in for the jQuery Javascript library. Laravel Yajra DataTables Package provide many functionalities like searching, sorting, pagination on table.
Step 1: Install Laravel 7
In this step,you can install laravel 7 application. So run bellow command and get clean fresh laravel 7 application.
composer create-project --prefer-dist laravel/laravel blog
Step 2: Install Yajra Datatable
We need to install yajra datatable package.so you can install using following command:
composer require yajra/laravel-datatables-oracle
After that you need to set providers and alias.
.....
'providers' => [
....
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
....
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....
Step 3: Add Dummy Records
we will create some dummy users using tinker factory. so let's create dummy records using bellow command:
php artisan tinker
factory(App\User::class, 200)->create();
Step 4: Add Route
In this step,you can create route for datatale layout file data.
routes/web.php
Route::get('users', ['uses'=>'UserController@index', 'as'=>'users.index']);
Step 5: Create Controller
In this step,you can create to usercontroller.this controller mange to getting data and layout for datatable.
app/Http/Controllers/UserController.php
namespace App\Http\Controllers;
use App\User;
use Illuminate\Http\Request;
use DataTables;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
Public function index(Request $request)
{
if ($request->ajax()) {
$data = User::select('*');
return Datatables::of($data)
->addIndexColumn()
->addColumn('status', function($row){
if($row->status){
return '<span class="badge badge-primary">Active</span>';
}else{
return '<span class="badge badge-danger">Deactive</span>';
}
})
->filter(function ($instance) use ($request) {
if ($request->get('status') == '0' || $request->get('status') == '1') {
$instance->where('status', $request->get('status'));
}
if (!empty($request->get('search'))) {
$instance->where(function($w) use($request){
$search = $request->get('search');
$w->orWhere('name', 'LIKE', "%$search%")
->orWhere('email', 'LIKE', "%$search%");
});
}
})
->rawColumns(['status'])
->make(true);
}
return view('users');
}
}
Step 6: Create View
In Last step, let's create users.blade.php for layout and we will write design code here and put following code:
resources/views/users.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Datatable Dropdown Search - Nicesnippets.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 mt-4">
<div class="card">
<div class="card-header">
<h2>Laravel Datatable Dropdown Search - Nicesnippets.com</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label><strong>Status :</strong></label>
<select id=>' class="form-control">
<option value="">--Select status--</option>
<option value="0">Active</option>
<option value="1">Deactive</option>
</select>
</div>
</div>
</div>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Email</th>
<th width="100px">Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('users.index') }}",
data: function (d) {
d.status = $('#status').val(),
d.search = $('input[type="search"]').val()
}
},
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'status', name: 'status'},
]
});
$('#status').change(function(){
table.draw();
});
});
</script>
</html>
Now you can run laravel applicaton.below this command
php artisan serve
Now you can open bellow url on your browser:
http://localhost:8000/users
It will help you.....
#Laravel 7
#Laravel
#Laravel 6
