Datatable is a javascript plugin which is mainly used for sorting and filtering HTML table data.
If you want to filter some rows present in the table then you can think of datatable, which makes the job easy by finding the rows very quickly in the table.
There are two different filtering plug-in methods that DataTables presents:
- Type based column filtering - filtering based on the type of the column.
- Custom row filters - filtering applied to the data from the whole row.
Custom row filtering is possible by extending the DataTables custom filtering array with your function which returns a boolean value:
$.fn.dataTableExt.afnFilteringConsider,
#filter.html
<!DOCTYPE html>
<html>
<head>
<title>Filtering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="filter" border="1" style="width:200px;">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="techlead">
<td>Ram</td>
<td>30</td>
</tr>
<tr>
<td>Rahul</td>
<td>22</td>
</tr>
<tr class="manager">
<td>Raju</td>
<td>41</td>
</tr>
<tr>
<td>Rajesh</td>
<td>25</td>
</tr>
<tr>
<td>Rohan</td>
<td>24</td>
</tr>
</tbody>
</table>
<input type="checkbox" id="hide" /> <label>Hide Taken</label>
</body>
</html>Sorting using Datatable:
#filter.html ...
<script>
$("#filter").DataTable({
sDom: "",
infoEmpty: "No entries to show",
aaSorting: [],
aoColumnDefs: [{ bSortable: false, aTargets: [0] }],
})
var oTable = $("#filter").DataTable()
$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
var nTr = oSettings.aoData[iDataIndex].nTr
if (
($(nTr).hasClass("techlead") || $(nTr).hasClass("manager")) &&
$("#hide").is(":checked")
) {
return false
} else {
return true
}
})
$("#hide").click(function () {
oTable.draw()
if ($(this).is(":checked")) {
$("label").text("Show")
} else {
$("label").text("Hide")
}
})
</script>
...nTr has all the rows of the table. So, if any row of nTr has any class named techlead or manager the return value is false else true.
The function returns
- True
- False
When true, the row is displayed else the row is not displayed.
keep Coding !!!
Ameena
