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.css
JavaScript 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 =
<!--jQuery library file -->
< script type = "text/javascript" src =
</ script >
<!--Datatable plugin JS library file -->
< script type = "text/javascript" src =
</ 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: