我创建了一个带有 dataTable 的应用程序来过滤名字和姓氏,我有一个名字和姓氏文本字段,通过它我可以过滤名字和姓氏。过滤有效但问题是名字和姓氏过滤是从两个文本字段进行的,实际上我需要以这样的方式将其具体化,即名字文本字段仅用于名字过滤而姓氏文本字段仅用于姓氏过滤
有人能告诉我一些解决方案吗?
我的代码如下:
$(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);
}
});
最佳答案
一种方法是使用 custom filtering (>1.10)
每次绘制表格时都会执行这段代码。该方法从字段中获取名字和第二个名字并创建一个正则表达式。 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 ($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');
这将在您输入名字文本字段时创建这样的正则表达式
/J/i
/Je/i
/Jef/i
/Jeff/i
第二个名字文本框也是如此
var snRegex = new RegExp(secondName, 'i');
因为表数据看起来像这样 Jefferey Sam
。下面.replace()方法行会将其分解成这样的数组 ["Jeffrey", "Sam"]
以便正则表达式可以单独检查每个元素。
var name = data[0].replace(/[^\w\s]|_/g, function ($1) {
return ' ' + $1 + ' ';
})
.replace(/[ ]+/g, ' ')
.split(' ');
$.fn.datatable.ext.search
遍历每一行并将这些行添加到返回 true 的表中。 (这是最后一行)
return fnRegex.test(name[0]) && snRegex.test(name[1]);
名字和第二个名字正则表达式测试数组的第一个值(名字)和数组的第二个值(第二个名字)。 <强> regex.test 将返回 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
这是一个演示 http://jsfiddle.net/dhirajbodicherla/189Lp6u6/2/
版本<1.10
单独的draw方法改成下面
var myTable = $('').dataTable() with (lowercase D)
myTable.api().draw();
这是一个演示 http://jsfiddle.net/dhirajbodicherla/189Lp6u6/3/
希望对你有帮助
关于javascript - 使用 datatable.js 过滤名字和姓氏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30866770/