我正在寻找一种对jQuery TableSorter中的多个列进行OR过滤的方法,就像DataTable Multiple column OR filter一样。我升级到2.21.5。
我有fiddle example。我试过filter_functions:
filter_functions: {
'.filter-OR': function (e, n, f, i, $r, c) {
/*
manually check the row for all columns
with a class of filter-OR
*/
}
}
但是将函数应用于任何类都会覆盖filter-availOnly选项。
不确定如何继续前进。
答案 0 :(得分:3)
使用filter_functions的方式与您在示例中使用它的方式略有不同。
您必须提供将应用过滤器功能的列以及表示将触发该功能的选择值的键。
您可以以键为列的对象的形式执行此操作,这些键的值是另一个对象,其键是select的值,这些键的值将是要触发的函数。
例如:
filter_functions: {
1: {// Column one...
"Yes" : function() {},//... will trigger the anonymous function when "Yes" is selected.
"No" : function() {}//... will trigger the anonymous function when "No" is selected.
}
}
如果您想要一个OR,您可以执行以下操作:
function (e, n, f, i, $r, c) {
return $r.find("td")// For all the tds of this row
.not(":first")// Avoid checking the first one (usually the ID)
.filter(function (_, el) {// filter all tds which value differs from "Yes"
return $(el).text() === "Yes";
})
.length > 0;// If length is bigger than one it means we have at least one "Yes", therefore we tell tablesorter not to filter this row.
};
同样适用于“否”,除非我们更改我们要检查的值。 将所有内容包装起来并使其更加整洁:
var checker = function (value) {
return function (e, n, f, i, $r, c) {
return $r.find("td")
.not(":first")
.filter(function (_, el) {
return $(el).text() === value;
})
.length > 0;
};
}, objChecker = function () {
return {
"Yes": checker("Yes"),
"No": checker("No")
};
};
$('table').tablesorter({
// Here goes your code to set up the table sorter ...
filter_functions: {
1: objChecker(),
2: objChecker(),
3: objChecker()
}
}
});
您可以在 fiddle
中查看希望它有所帮助。
答案 1 :(得分:0)
如果我理解了请求,可以尝试这样的事情(demo):
$(function () {
var $table = $('table'),
// get 'filter-OR' column indexes
orColumns = $('.filter-OR').map(function (i) {
return this.cellIndex;
}).get(),
filterfxn = function (e, n, f, i, $r, c) {
var col, v,
showRow = false,
content = [];
$r.children().filter(function (indx) {
if (orColumns.indexOf(indx) > -1) {
v = (c.$filters.eq(indx).find('.tablesorter-filter').val() || '').toLowerCase();
showRow = showRow || $(this).text().toLowerCase() === v;
}
});
return showRow;
};
$table.tablesorter({
theme: 'green',
widgets: ['uitheme', 'zebra', 'columns', 'filter'],
sortReset: true,
sortRestart: true,
widthFixed: true,
widgetOptions: {
filter_functions: {
'.filter-OR': {
'Yes': filterfxn,
'No' : filterfxn
}
}
}
});
});