How to filter jQuery Tablesorter with multiple columns using OR logic
I am looking for a way to do an OR filter against multiple columns in jQuery TableSorter, like DataTable Multiple column OR filter , I have updated to 2.21.5.
I have a sample script . I tried to do 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
*/
}
}
but applying the function to any class overrides filter-availOnly.
Not sure how to move forward with this.
source to share
If I understand the request, maybe try something like this ( 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
}
}
}
});
});
source to share
The way you use filter_functions is slightly different from the way you use it in your example.
You must specify the columns that the filter function will apply to, as well as a key representing the selection value that will call the function.
You do this in the form of an object whose keys are the columns, and the value of those keys is another object whose keys are the selection values and the values of those keys, the function to be run.
For example:
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.
}
}
If you want OR you can do something like:
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.
};
The same applies to "No", except that we change the value that we will check. Wrapping everything up and making it a little tidier, we have:
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()
}
}
});
You can check it in fiddle
Hope it helps.
source to share