Hello friends, Today we will show Laravel 8 Datatables Filter with Dropdown Tutorial. In this example we will explain hoe to use laravel 8 datatables custom filter with dropdown. Here we will add datatables custom filter using field and searching data without refresh datatable.
In this post we will share with you example of laravel 8 datatables dropdown filter. You just required to some step to done laravel 8 yajra datatable dropdown filter with laravel.
After read this post you can easily add dropdown filter with yajra datatables in laravel 6, laravel 7 and laravel 8. So let’s following step by step to integrate yajra datatable dropdown filter with laravel.
Laravel 8 Datatables Filter with Dropdown Example
Step 1 : Install Laravel for laravel 8 datatables filter with dropdown tutorial
In this step we need to install new laravel application for Laravel Datatables Filter with Dropdown.
composer create-project --prefer-dist laravel/laravel datatable-exampleStep 2 : Integrate Yajra Datatable for Dropdown Filter
In this step we will install Yajra datatable in laravel 8 application for dropdown filter.
composer require yajra/laravel-datatables-oracle
config/app.php.
'providers' => [
....
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
....
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
Step 3 : Add New Column in Users Table for filter column
After that we will add new column using migration
php artisan make:migration add_approved_column
database/migrations/2021_16_09_043348_add_approved_column.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AddApprovedColumn extends Migration
{
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->boolean('approved')->default(0);
});
}
public function down()
{
}
}
Run this migration.
php artisan migrate
Step 4 : Add Record using Tinker
In this step we need to add dummy data for user table.
php artisan tinker
factory(App\User::class, 50)->create();
Step 5 : Add Route
Route::get('users', ['uses'=>'UserController@index', 'as'=>'users.index']);Step 6 : Create Controller
<?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('approved', function($row){
if($row->approved){
return '<span class="badge badge-primary">Yes</span>';
}else{
return '<span class="badge badge-danger">No</span>';
}
})
->filter(function ($instance) use ($request) {
if ($request->get('approved') == '0' || $request->get('approved') == '1') {
$instance->where('approved', $request->get('approved'));
}
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(['approved'])
->make(true);
}
return view('users');
}
}
Step 7 : Create BLade file for View
<html>
<head>
<title>Laravel 8 Datatables Filter with Dropdown - web-tuts.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.25/css/dataTables.bootstrap5.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.25/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.25/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel 8 Datatables Filter with Dropdown - web-tuts.com</h1>
<div class="card">
<div class="card-body">
<div class="form-group">
<label><strong>Approved :</strong></label>
<select id='approved' class="form-control" style="width: 200px">
<option value="">Approved</option>
<option value="1">Yes</option>
<option value="0">No</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">Approved</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</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.approved = $('#approved').val(),
d.search = $('input[type="search"]').val()
}
},
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'approved', name: 'approved'},
]
});
$('#approved').change(function(){
table.draw();
});
});
</script>
</html>
I hope you understand of Laravel Datatables Filter with Dropdown and it can help you…