jQuery Tablesorter筛选器未更新寻呼机 [英] jQuery Tablesorter Filter Not Updating Pager
问题描述
我有一个表，其中添加了 tablesorter插件.我同时启用了过滤器小工具和传呼器插件.
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.
是否可以通过这种方式工作?
我看了文档却看不到该怎么做(而且我的js也不太好).
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.
我的表排序器设置:
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();
});
推荐答案
过滤器小部件和寻呼机插件/小部件现在可以一起使用，但是寻呼机
The filter widget and pager plugin/widget do now work together, but the pager removeRows option must be set to false. What this option does is keeps all of the rows within the table instead of only adding the current page (visible) rows to the DOM.
在近期"版本中，不再需要removeRows选项，因为过滤器小部件将访问存储的缓存行而不是表中的行.
In a "near-future" version, the removeRows option will no longer be a requirement as the filter widget will access the stored cached rows instead of the rows within the table.
这篇关于jQuery Tablesorter筛选器未更新寻呼机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
