I have created a application with dataTable for filtering firstname and lastname, I am having a firstname and lastname text-field through which I would filter firstname and lastname. The filtering is working but the issue is that firstname and lastname filtering is doing from both the textfield, actually I need to make it into specific in such a way that firstname textfield is only for firstname filtering and lastname textfield is only for lastname filtering
Can anyone please tell me some solution for this?
My code is as given below:
$(document).ready(function () {
myTable = $('#myTable').dataTable({
"bSort": false,
"bInfo": false,
"bLengthChange": false,
"bPaginate": false,
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
});
new $.fn.dataTable.FixedColumns(myTable, {
leftColumns: 1,
rightColumns: 1
});
$('#firstNameTextBox').keyup(function () {
filterNames(this.value, 0);
});
$('#secondNameTextBox').keyup(function () {
filterNames(this.value, 0);
});
function filterNames(value) {
myTable.fnFilter(value, 0, false, false, false, false);
}
});
This piece of code will be executed every time the table is drawn. The method takes the first and second name from the fields and creates a regular expression. The data[0].replace removes the spaces in between first and second names and coverts to an array which is later used to test again the regex.
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var firstName = $('#firstNameTextBox').val();
var secondName = $('#secondNameTextBox').val();
var fnRegex = new RegExp(firstName, 'i');
var snRegex = new RegExp(secondName, 'i');
var name = data[0].replace(/[^\w\s]|_/g, function ($1) { return ' ' + $1 + ' ';}).replace(/[ ]+/g, ' ').split(' '); // courtesy: http://stackoverflow.com/a/6162630
return fnRegex.test(name[0]) && snRegex.test(name[1]);
}
);
var fnRegex = new RegExp(firstName, 'i');
This will create a regex like this as you type in first name textfield
/J/i
/Je/i
/Jef/i
/Jeff/i
The same is with second name textfield
var snRegex = new RegExp(secondName, 'i');
Since the table data looks like this Jefferey Sam
. The below .replace() method line will break it into an array like this ["Jeffrey", "Sam"]
so that regex can check individually on each element.
var name = data[0].replace(/[^\w\s]|_/g, function ($1) {
return ' ' + $1 + ' ';
})
.replace(/[ ]+/g, ' ')
.split(' ');
$.fn.datatable.ext.search
iterates over each row and adds those rows into the table which return true. (which is the last line)
return fnRegex.test(name[0]) && snRegex.test(name[1]);
both first name and second name regular expression test against the first value of the array (first name) and the second value of the array (second name). regex.test will return true or false.
If the user types Jeff
in first name text field and Sa
in second field, the below is how $.fn.datatable.ext.search.push
will look like for each row
return /Jeff/i.test("Jefferey") && /Sa/i.test("Sa"); // true && true ===> true (so this will be added);
return /Jeff/i.test("Linsu") && /Sa/i.test("Lessi"); // false && false ===> false (so this will NOT be added).
return ..... // so on for the rest of the rows
Here is a demo http://jsfiddle.net/dhirajbodicherla/189Lp6u6/2/
The draw method alone is changed to below
var myTable = $('').dataTable() with (lowercase D)
myTable.api().draw();
Here is a demo http://jsfiddle.net/dhirajbodicherla/189Lp6u6/3/
Hope this helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.