不使用全局对象进行过滤
Filtering without using a global object
我有一个数据table,有时显示有时隐藏。我在同一页上还有其他几个 table。
数据table的示例(located here) 使用全局对象来存储您的自定义函数$.fn.dataTable.ext.search
。这很好,但它会影响所有 tables。
我找不到一种方法来提供 per table 的搜索功能,而不是将其添加到全局变量。
这是我目前的情况:
t.rows().data().filter(
function(val, idx){
console.log("Value: " + JSON.stringify(val) + " at " + idx);
if(idx < 2) {return true;} return false;
})
这行得通,但是我该如何用新行重新绘制 table?调用 t.draw() 不起作用,接下来怎么办?
这是编辑前的老问题:
这是我的过滤器初始代码,它 运行s 并打印出我期望的内容,但我无法将它隔离到 运行 仅在页面上的一个 table 上。我不知道哪个 table 它在函数内部(我不认为)但我真的只希望在某个 table.
上调用该函数
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex )
{
console.log(settings);
console.log(data);
console.log(dataIndex);
});
您从搜索函数收到的第一个参数是 settings
variable, which contains the full configuration and data of a DataTable. With that, you can access the table's API。
然后您可以使用 table().node()
到达标签的节点(它 returns table 的 DOM 元素):
var tablesToSearchArray = new Array("example2");
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
var api = new $.fn.dataTable.Api( settings );
var tableId = api.table().node().id;
if (tablesToSearchArray.indexOf(tableId) === -1) {
return true; // don't filter this table.
}
var min = parseInt($('#min').val(), 10);
var max = parseInt($('#max').val(), 10);
var age = parseFloat(data[3]) || 0; // use data for the age column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
});
$(document).ready(function() {
var table = $('#example').DataTable();
var table2 = $('#example2').DataTable();
$('#min, #max').keyup(function() {
table.draw();
table2.draw(); // just so you see it won't filter
});
});
这是基于 example at the DataTables site. Check out the JSFiddle。
我有一个数据table,有时显示有时隐藏。我在同一页上还有其他几个 table。
数据table的示例(located here) 使用全局对象来存储您的自定义函数$.fn.dataTable.ext.search
。这很好,但它会影响所有 tables。
我找不到一种方法来提供 per table 的搜索功能,而不是将其添加到全局变量。
这是我目前的情况:
t.rows().data().filter(
function(val, idx){
console.log("Value: " + JSON.stringify(val) + " at " + idx);
if(idx < 2) {return true;} return false;
})
这行得通,但是我该如何用新行重新绘制 table?调用 t.draw() 不起作用,接下来怎么办?
这是编辑前的老问题:
这是我的过滤器初始代码,它 运行s 并打印出我期望的内容,但我无法将它隔离到 运行 仅在页面上的一个 table 上。我不知道哪个 table 它在函数内部(我不认为)但我真的只希望在某个 table.
上调用该函数$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex )
{
console.log(settings);
console.log(data);
console.log(dataIndex);
});
您从搜索函数收到的第一个参数是 settings
variable, which contains the full configuration and data of a DataTable. With that, you can access the table's API。
然后您可以使用 table().node()
到达标签的节点(它 returns table 的 DOM 元素):
var tablesToSearchArray = new Array("example2");
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
var api = new $.fn.dataTable.Api( settings );
var tableId = api.table().node().id;
if (tablesToSearchArray.indexOf(tableId) === -1) {
return true; // don't filter this table.
}
var min = parseInt($('#min').val(), 10);
var max = parseInt($('#max').val(), 10);
var age = parseFloat(data[3]) || 0; // use data for the age column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
});
$(document).ready(function() {
var table = $('#example').DataTable();
var table2 = $('#example2').DataTable();
$('#min, #max').keyup(function() {
table.draw();
table2.draw(); // just so you see it won't filter
});
});
这是基于 example at the DataTables site. Check out the JSFiddle。