jQuery Tablesorter 过滤器不更新分页器

Question

我有一个表，其中有 tablesorter plugin添加到其中。我已启用 filter widget和 pager plugin .

我遇到的问题是，当在过滤器输入中放入一个值时，它不会更新寻呼机(总结果，如果更多，则寻呼机设置页数)。
而且，它似乎只是过滤分页结果，而不是整个表格。

有可能让它以这种方式工作吗？
我查看了文档，但不知道如何做到这一点(而且我的js也不是那么好)。

感谢任何和所有帮助。

我的表排序器设置:

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(); 
        });

Answer 1

过滤器小部件和寻呼机插件/小部件现在可以一起工作，但寻呼机 removeRows option必须设置为false。此选项的作用是保留表中的所有行，而不是仅将当前页面(可见)行添加到 DOM。

Bootstrap theme demo

在“不久的将来”版本中，将不再需要 removeRows 选项，因为过滤器小部件将访问存储的缓存行而不是表中的行。