Datatables-Range filtering
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td>Minimum age:</td>
<td><input type="text" id="min" name="min"></td>
</tr>
<tr>
<td>Maximum age:</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</tbody>
</table>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th class="text">Name</th>
<th class="text">Position</th>
<th class="text">Office</th>
<th>Age</th>
<th class="text">Start date</th>
<th class="text">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
...
JavaScript
/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = parseInt($('#min').val(), 10);
var max = parseInt($('#max').val(), 10);
var age = parseFloat(data[3]) || 0; // use data for the age column
var num = $('#num').val();
if (num.length > 0) {
console.log(num);
//need to parse num for <, >, =
var val = num.split('>');
if (val.length == 2) {
if (age > parseInt(val[1])) {
return true;
}
}
val = num.split('<');
if (val.length == 2) {
if (age < parseInt(val[1])) {
return true;
}
}
val = num.split('=');
if (val.length == 2) {
if (age == parseInt(val[1])) {
return true;
}
}
return false;
} else {
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && age <= max) ||
(min <= age && isNaN(max)) ||
(min <= age && age <= max)) {
return true;
}
return false;
}
}
);
$(document).ready(function() {
var table = $('#example').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max, #num').keyup(function() {
table.draw();
});
table.columns('.text').every(function() {
var this_column = this;
$("input", this.footer()).on("keyup change", function() {
if (this_column.search() !== this.value) {
this_column.search("(^" + this.value + ")|( " + this.value + ")", true, false).draw();
}
});
});
});