In this article, we will discuss how to create a custom dropdown server-side filter in datatable. I’m assuming you are familiar with the basic of the Datatables and Laravel Ajax. The server-side custom filter helps us to create the filter data based on our custom dropdown. For example, you want to filter record as per the status and the status value is fixed such as valid, invalid, paid, unpaid or etc.
Let’s create the custom dropdown server-side filter
First, we are adding the HTML Table with empty table body (tbody). For example:
<table class="table" id="dtListUsers">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<!-- Ajax Load -->
</tbody>
</table>
Add the given CSS CDN into the <head> tag of your blade layout.
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
Add the given js CDN before closing on the </body> tag.
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
Let’s set up our server-side datatable. Please follow given code:
var dtListUsers = $("#dtListUsers").DataTable({
"processing": true,
"serverSide": true,
"ajax": Laravel.appURL+'/users/json',
"columns": [
{
data: 'id'
},
{
data: 'name'
},
{
data: 'email'
},
{
data: 'phone'
},
{
data: 'status'
},
]
...
});
The above code creates a basic Server Side processing datatable. All the record add in the tbody via ajax. In the controller, we fetch the records and create a JSON format as per the datatable requirement. We will map the field with the given JSON using the datatable columns option.
Let’s create the filter dropdown.
<select id="statusFilter"> <option value="">All Status</option> <option value="Valid">Valid</option> <option value="Invalid">Invalid</option> <option value="Paid">Paid</option> <option value="Unpaid">Unpaid</option> <option value="Referral">Referral</option> </select>
Here are the on change event which on refresh our datatable when filter changed.
$('#statusFilter').on('change', function(){
var filter_value = $(this).val();
var new_url = Laravel.appURL+'/user/json/'+filter_value;
dtListUsers.ajax.url('+new_url+').load();
});
Register routes
// Route for list of users in json format
Route::get('/user/json', 'UserController@json')->middleware('ajax');
// Route for list of users with specific status in json format
Route::get('/user/json/{status}', 'UserController@json')->middleware('ajax');
In this given route, we are using middleware ajax to filter the request. Middleware helps us to check that the request is ajax request or not. You can found more details on middleware here.
Handle ajax request in the controller
public function json(Request $request)
{
if($request->status) {
$users = User::where('status',$request->status)->get();
return response()->json(['data' => $users]);
} else {
$users = User::get();
return response()->json(['data' => $users]);
}
}
In the controller json function, we have conditioned for status if available then specific records fetched otherwise all the user records. Everything is done now our custom dropdown filter. We will discuss more on datatable in our future post. Please feel free to comment if any query.
If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee
thanks for good post.
If you want to make the Advanced Query Filter, I suggest you use the this package:
https://github.com/mohammad-fouladgar/eloquent-builder
Happy Coding!
Thanks 🙂
how to use this post without middleware concept
Hi, Will you please explain your question. So I can help you.
why i got error Class ajax does not exist in routes ?