Have you ever used jQuery DataTables?
Have you ever tried custom filters with it?
Have you ever dealt with server-side pagination?
If you’ve done any of these, you may have found yourself fighting the plugin more than using it. Today, I’ll walk you through a cleaner approach that makes it easier to apply filters and control data loading. Let’s start.
The Scenario
Let’s assume we are displaying a list of products with pagination and need to display some filters above. When the page loads, the table shows the products' data. Then the user can apply filters by first making selections from the filters.
The HTML Structure
<table id="dataTable">
<thead>
<tr>
<th>#</th>
<th>Product Name</th>
<th>Category</th>
<th>Brand</th>
<th>Product Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody> </tbody>
</table>
Ok. It is pretty simple. Let’s define filters now.
The Filters
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="keyword">Search by Name, SKU or Keyword</label>
<input type="text" id="keyword" class="form-control">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="category_id">Select Category</label>
<select name="category_id" id="category_id" class="form-control">
<option value="0">All</option>
<option value="1">Electronics</option>
<option value="2">Furniture</option>
<option value="3">Office Supplies</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="brand_id">Select Brand</label>
<select name="brand_id" id="brand_id" class="form-control">
<option value="All">All</option>
<option value="1">Lenovo</option>
<option value="2">HP</option>
<option value="3">Lorell</option>
</select>
</div>
</div>
<div class="col-md-4 mt-8">
<div class="form-group">
<button type="button" onclick="loadData()">Search</button>
<button type="button" onclick="resetFilters">Clear</button>
</div>
</div>
</div>
Our filters are pretty simple. We have defined 3 filters. Users can search for products by category, brand, or keyword.
Now let’s define our JavaScript code for DataTable.
var table = null;
let config = {
"processing": true,
"serverSide": true,
"deferLoading": 0, // pay attention here
"ajax": {
"url": 'api/products',
"type": "POST",
"data": function (d) {
if ($('#category_id').val() > 0) {
d['category_id'] = $('#category_id').val();
}
if ($('#brand_id').val() > 0) {
d['brand_id'] = $('#brand_id').val();
}
if ($('#keyword').val() != "") {
d['keyword'] = $('#keyword').val();
}
}
},
"columns": [
{ "data": "name", sortable: false },
{ "data": "category", sortable: false },
{ "data": "brand", sortable: false },
{ "data": "id", sortable: false, render: (id, c, row) => {
return (
`<span class="flex space-x-2">
<a class="btn btn-info" title="Edit">
Edit
</a>
<a class="btn bg-red-700" title="Delete">
Delete
</a>
</span>`
);
}
},
],
"lengthMenu": [
[10, 50, 100],
[10, 50, 100]
],
"order": [
[0, 'desc']
],
"pageLength": 10,
"sLengthMenu": false,
}
$(document).ready(function () {
table = $('#dataTable').DataTable(config);
loadData(); // manually load on document ready
})
function loadData(){
table.ajax.reload(); // manually load on document ready
}
function resetFilters(){
$('#category_id').val(0)
$('#brand_id').val(0)
$('#keyword').val('')
loadData()
}
This is our frontend code. Let me point out some special points.
Key Takeaways
- Adding “deferLoading”: 0 will prevent data on first load.
- We assign the DataTable to a variable to allow manual control.table = $(‘#dataTable’).DataTable(config);
- On document ready, since we have assigned the datatable to a variable, we can now manually call loadData() to load data.
- We have conditionally added logic inside the data scope of DataTable. Which means if and only if any filter is selected, send it as a post parameter to the backend to filter.
- Calling table.ajax.reload() lets us re-fetch based on the current filters.
"data": function (d) {
if ($('#category_id').val() > 0) {
d['category_id'] = $('#category_id').val();
}
if ($('#brand_id').val() > 0) {
d['brand_id'] = $('#brand_id').val();
}
if ($('#keyword').val() != "") {
d['keyword'] = $('#keyword').val();
}
}
Summary
So that’s all. Using defer loading, assigning to a variable, and finally manually calling table.ajax.reload() gives me control to apply any filters to DataTables easily.
Bonus Point
Sometimes you may want to perform some additional operation after the data has been loaded in DataTable. For example, in an AJAX response, you send some additional data other than what is required by DataTable, you do it like this.
function showSummary(data){
let { summary } = data;
console.log(summary)
}
And call it like this.
table.ajax.reload(showSummary);
Final Thoughts
With this setup, you gain fine-grained control over how and when your table loads. You’re no longer stuck with automatic behavior — instead, you’re calling the shots.
What has been your experience customizing DataTables? I would like to hear your thoughts.
If you found this post helpful, consider supporting my work — it means a lot.
