使用 datatable.js 过滤名字和姓氏

Question

我创建了一个带有数据表的应用程序来过滤名字和姓氏，我有一个名字和姓氏文本字段，我可以通过它来过滤名字和姓氏。过滤工作但问题是名字和姓氏过滤是从两个文本字段进行的，实际上我需要以这样的方式使其具体化，即名字文本字段仅用于名字过滤而姓氏文本字段仅用于姓氏过滤

任何人都可以告诉我一些解决方案吗？

JSFiddle

我的代码如下：

$(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

一种方法是使用 custom filtering (>1.10)

每次绘制table时都会执行这段代码。该方法从字段中获取名字和第二个名字并创建一个正则表达式。 data[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 () { return ' ' +  + ' ';}).replace(/[ ]+/g, ' ').split(' '); // courtesy: 
        return fnRegex.test(name[0]) && snRegex.test(name[1]);
    }
);

解释：

var fnRegex = new RegExp(firstName, 'i');

这将在您输入名字文本字段时创建这样的正则表达式

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

第二个名字文本字段也是如此

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

因为 table 数据看起来像这样 Jefferey Sam。下面的 .replace() 方法行会将其分解成这样的数组 ["Jeffrey", "Sam"] 以便正则表达式可以单独检查每个元素。

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

$.fn.datatable.ext.search 遍历每一行并将这些行添加到 table 中，return 为真。（这是最后一行）

return fnRegex.test(name[0]) && snRegex.test(name[1]);

名字和名字正则表达式都针对数组的第一个值（名字）和数组的第二个值（名字）进行测试。 regex.test 将 return 对或错。

如果用户在名字文本字段中键入 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

这是一个演示 http://jsfiddle.net/dhirajbodicherla/189Lp6u6/2/

版本 < 1.10

单独draw方法改成下面

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

这是一个演示 http://jsfiddle.net/dhirajbodicherla/189Lp6u6/3/

希望这对您有所帮助

使用 datatable.js 过滤名字和姓氏

Filtering firstname and lastname using datatable.js

javascript

datatable

jquery

filtering

一种方法是使用 custom filtering (>1.10)

解释：

版本 < 1.10