How to implement column specific search filter using DataTables plugin ?
Last Updated :
31 Jul, 2024
Improve
DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for a webpage. It is a very simple-to-use plug-in with a variety of options for the developer’s custom changes as per the application's need. The plugin’s features include pagination, sorting, searching, and multiple-column ordering.
In this article, we will demonstrate the implementation of a column-specific search filter using the DataTables plugin. Instead of performing search operations on the whole table, the search is performed only on a particular column for improving the performance of the system
Approach: In the following example, DataTables uses the student details from the HTML table as the main source. Each row in the table shows details for one student’s information.
- A DataTable is initialized.
- The developer can set the features of paging or searching as per the need as shown in the script part of the code.
- The column() API is used to select all the columns of the table.
- The flatten() API is used to convert the 2D array structure into a single dimension array and each() method is used to perform any action on each of the selected columns.
- The select list is appended to each column header.
- Any action is performed on change of any list value.
- The column().search() API is used to search the selected value and the draw() API is used to reflect the changes after the action in the table.
- column().cache() API is used to get the data from the column with sort() method to display sorted data.
- All the steps are done for each of the columns.
The pre-compiled files which are needed to implement are
CSS CDN:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.cssJavaScript CDN:
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Example: The following example demonstrates the above approach showing column-specific search filter operation.
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1,
maximum-scale=1, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<!--Datatable plugin CSS file -->
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<!--jQuery library file -->
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<!--Datatable plugin JS library file -->
<script type="text/javascript" src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<h2>
Column specific search filter
using DataTables plugin
</h2>
<!--HTML tables with student data-->
<table id="tableID" class="display"
style="width: 100%">
<thead>
<tr>
<th>StudentID</th>
<th>StudentName</th>
<th>Age</th>
<th>Gender</th>
<th>Marks Scored</th>
</tr>
</thead>
<tbody>
<tr>
<td>ST1</td>
<td>Prema</td>
<td>35</td>
<td>Female</td>
<td>320</td>
</tr>
<tr>
<td>ST2</td>
<td>Wincy</td>
<td>36</td>
<td>Female</td>
<td>170</td>
</tr>
<tr>
<td>ST3</td>
<td>Ashmita</td>
<td>41</td>
<td>Female</td>
<td>860</td>
</tr>
<tr>
<td>ST4</td>
<td>Kelina</td>
<td>32</td>
<td>Female</td>
<td>433</td>
</tr>
<tr>
<td>ST5</td>
<td>Satvik</td>
<td>41</td>
<td>male</td>
<td>162</td>
</tr>
<tr>
<td>ST6</td>
<td>William</td>
<td>37</td>
<td>Female</td>
<td>372</td>
</tr>
<tr>
<td>ST7</td>
<td>Chandan</td>
<td>31</td>
<td>male</td>
<td>375</td>
</tr>
<tr>
<td>ST8</td>
<td>David</td>
<td>45</td>
<td>male</td>
<td>327</td>
</tr>
<tr>
<td>ST9</td>
<td>Harry</td>
<td>29</td>
<td>male</td>
<td>205</td>
</tr>
<tr>
<td>ST10</td>
<td>Frost</td>
<td>29</td>
<td>male</td>
<td>300</td>
</tr>
<tr>
<td>ST14</td>
<td>Fiza</td>
<td>31</td>
<td>Female</td>
<td>750</td>
</tr>
<tr>
<td>ST15</td>
<td>Silva</td>
<td>34</td>
<td>male</td>
<td>985</td>
</tr>
</tbody>
</table>
<br />
<script>
/* Initialization of datatables */
$(document).ready(function () {
// Paging and other information are
// disabled if required, set to true
var myTable = $("#tableID").DataTable({
paging: false,
searching: true,
info: false,
});
// 2d array is converted to 1D array
// structure the actions are
// implemented on EACH column
myTable
.columns()
.flatten()
.each(function (colID) {
// Create the select list in the
// header column header
// On change of the list values,
// perform search operation
var mySelectList = $("<select />")
.appendTo(myTable.column(colID).header())
.on("change", function () {
myTable.column(colID).search($(this).val());
// update the changes using draw() method
myTable.column(colID).draw();
});
// Get the search cached data for the
// first column add to the select list
// using append() method
// sort the data to display to user
// all steps are done for EACH column
myTable
.column(colID)
.cache("search")
.sort()
.each(function (param) {
mySelectList.append(
$('<option value="' + param + '">'
+ param + "</option>")
);
});
});
});
</script>
</body>
</html>
Output:
