Javascript 使用datatable.js筛选firstname和lastname

我已经用dataTable创建了一个用于过滤firstname和lastname的应用程序，我有一个firstname和lastname文本字段，通过它我可以过滤firstname和lastname。过滤工作正常，但问题是firstname和lastname过滤都是从textfield进行的，实际上我需要将其设置为特定的，这样firstname textfield只用于firstname过滤，lastname textfield只用于lastname过滤

谁能告诉我一些解决办法吗

我的代码如下所示：

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

一种方法是使用（>1.10） 这段代码将在每次绘制表时执行。该方法从字段中获取第一个和第二个名称，并创建正则表达式。数据[0]。replace将删除第一个和第二个名称之间的空格，并转换为一个数组，该数组稍后将用于再次测试正则表达式

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

说明： 这将在您键入firstname textfield时创建一个类似这样的正则表达式

/J/i
/Je/i 
/Jef/i
/Jeff/i

var snRegex = new RegExp(secondName, 'i');

第二个名称textfield也是如此

/J/i
/Je/i 
/Jef/i
/Jeff/i

var snRegex = new RegExp(secondName, 'i');

因为表数据看起来像这样

Jefferey Sam

。下面的方法行将它分解成如下数组

[“Jeffrey”，“Sam”]

，以便regex可以单独检查每个元素

var name = data[0].replace(/[^\w\s]|_/g, function ($1) { 
    return ' ' + $1 + ' ';
})
.replace(/[ ]+/g, ' ')
.split(' ');

$.fn.datatable.ext.search

迭代每一行，并将返回true的行添加到表中。（哪一行是最后一行）

第一个名称和第二个名称正则表达式都根据数组的第一个值（第一个名称）和数组的第二个值（第二个名称）进行测试。 将返回true或false

如果用户在名字文本字段中键入

Jeff

，在第二个字段中键入

Sa

，则每行的

$.fn.datatable.ext.search.push的外观如下所示

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

这是一个演示


版本<1.10
仅绘制方法更改为如下

var myTable = $('').dataTable() with (lowercase D)
myTable.api().draw();

这是一个演示

希望这有帮助，但是
.dataTable（{
与
.dataTable（{
）相同，因为我使用的是
.dataTable({
它是不同的。一个返回jquery对象，另一个返回datatable对象。但这应该不是问题。检查这个，我如何在
中使用它。datatable
你能告诉我jsfiddle@AlexMan：更新了我的答案，请现在查看您能更详细地解释一下自定义筛选函数的最后四行吗