Filtering firstname and lastname using datatable.js

Question

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?

JSFiddle

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);
    }
});

Answer 1

One way is by using custom filtering (>1.10)

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]);
    }
);

Explanation:

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/

---

Versions < 1.10

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