How to Filter Datatable using Dropdown in Laravel 10
Websolutionstuff | Feb-07-2024 | Categories : Laravel PHP
Hello developers! 👋 Ever found yourself dealing with a DataTable in Laravel and wished for a nifty way to filter the data seamlessly? Well, you're in luck! In this step-by-step guide, I'm going to walk you through the process of filtering a DataTable using a dropdown in Laravel 10.
In this article, I'll give you step-by-step information about how to filter datatable using the dropdown in laravel 8, laravel 9, and laravel 10.
So, let's see how to filter datatable using the dropdown in laravel 10, laravel 10 datatable filter using the dropdown, datatables filter dropdown, and datatable custom dropdown filter in laravel 8/9/10.
If you haven't already, create a new Laravel project using Composer:
composer create-project --prefer-dist laravel/laravel your-project-name
Configure your database connection in the .env file, and run migrations to create necessary tables:
php artisan migrate
Generate a model for your data (e.g., Item):
php artisan make:model Item -m
This command will also create a migration file.
In the generated migration file (database/migrations/YYYY_MM_DD_create_items_table.php), define the columns for your DataTable. Then, run the migrations:
php artisan migrate
If you want sample data, create a seeder for your model:
php artisan make:seeder ItemSeeder
Edit the seeder (database/seeders/ItemSeeder.php) and run:
php artisan db:seed --class=ItemSeeder
Install the DataTables package using Composer:
composer require yajra/laravel-datatables-oracle
In your controller, fetch the data and pass it to the DataTable. For example, in ItemController.php:
<?php
namespace App\Http\Controllers;
use App\Models\Item;
use Illuminate\Http\Request;
use DataTables;
class ItemController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
if ($request->ajax()) {
$data = Item::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->where('name', 'LIKE', "%$search%")
->orWhere('description', 'LIKE', "%$search%")
->orWhere('price', 'LIKE', "%$search%");
});
}
})
->rawColumns(['approved'])
->make(true);
}
return view('index');
}
}
Create a Blade view (e.g., resources/views/items/index.blade.php) and include the DataTable initialization script:
<html>
<head>
<title>How to Filter Datatable using Dropdown in Laravel 10 - Websolutionstuff</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>How to Filter Datatable using Dropdown in Laravel 10 - Websolutionstuff</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>Description</th>
<th>Price</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('items.index') }}",
data: function (d) {
d.approved = $('#approved').val(),
d.search = $('input[type="search"]').val()
}
},
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'description', name: 'description'},
{data: 'price', name: 'price'},
{data: 'approved', name: 'approved'},
]
});
$('#approved').change(function(){
table.draw();
});
});
</script>
</html>
Define a route in web.php to load the view:
Route::get('/items', 'ItemController@index')->name('items.index');
Start the development server:
php artisan serve
You might also like:
Recommended Post
Featured Post
Laravel 9 Two Factor Authentic...
In this article, we will see laravel 9 two-factor authentication with SMS. we will send an OTP SMS to the mobile nu...
Sep-26-2022
Laravel 9 whereDate And whereM...
In this article, we will see laravel 9 wheredate() and wheremonth() query examples. The whereDate me...
Oct-19-2022
How to Create Pie Chart in Vue...
Hello, web developers! In this article, we'll see how to create a pie chart in vue 3 using vue-chartjs. Here, w...
Jul-29-2024
How to Install Node JS and NPM...
Hey fellow Ubuntu enthusiasts! 🐧✨ If you're looking to step into the awesome world of Node.js and npm for your web d...
Jan-12-2024