I have a table that has the tablesorter plugin added to it. I have enabled both the filter widget and the pager plugin.
The issue I am having is that when a value is put in the filter input, it does not update the pager (total results, and if more then pager setting the number of pages).
Also it only seems to filter the paged results, not the entire table.
Is it possible to make it work this way?
I have looked at the documentation and can't see how to do it (also my js isn't that good).
Any and all help appreciated.
My tablesorter settings:
var pagerOptions = {
// target the pager markup - see the HTML block below
container: $(".pager"),
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 0,
// Number of visible rows - default is 10
size: 10,
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: true,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: true,
// css class names of pager arrows
cssNext: '.next', // next page arrow
cssPrev: '.prev', // previous page arrow
cssFirst: '.first', // go to first page arrow
cssLast: '.last', // go to last page arrow
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled: 'disabled' // Note there is no period "." in front of this class name
};
$.tablesorter.addParser({
id: "datetime",
is: function(s) {
return false;
},
format: function(s,table, cell) {
s = s.replace(/\-/g,"/");
s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
return $.tablesorter.formatFloat(new Date(s).getTime());
},
type: "numeric"
});
$("#results").tablesorter({
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
// headers: { 5: { sorter: false, filter: false } },
widgetOptions : {
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
// If there are child rows in the table (rows with class name from "cssChildRow" option)
// and this option is true and a match is found anywhere in the child row, then it will make that row
// visible; default is false
filter_childRows : true,
// Set this option to true to use the filter to find text from the start of the column
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_startsWith : false,
// Set this option to false to make the searches case sensitive
filter_ignoreCase : true,
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
// every character while typing and should make searching large tables faster.
filter_searchDelay : 300,
// See the filter widget advanced demo on how to use these special functions
filter_functions : {
4 : function(e, n, f, i) {
alert(e);
console.log(e);
if (e != "") {
return e === f;
}
}
},
empty: 'bottom',
dateFormat : "ddmmyyyy"
},
widthFixed: true
})
.tablesorterPager(pagerOptions)
// bind to pager events
// *********************
.bind('pagerChange pagerComplete', function(e,c){
console.log(e);
console.log(c);
var msg = '" event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
' page ' + (c.page + 1) + '/' + c.totalPages;
$('#display')
.append('<li>"' + e.type + msg + '</li>')
.find('li:first').remove();
});
:)– Tautog