jQuery Tablesorter 过滤器不更新寻呼机

Posted 2023-05-09

【中文标题】jQuery Tablesorter 过滤器不更新寻呼机

【英文标题】：jQuery Tablesorter Filter Not Updating Pager

【发布时间】：2012-07-23 07:30:07

【问题描述】：

我有一张添加了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(/(\d1,2)[\/\-](\d1,2)[\/\-](\d4)/, "$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(); 
        );

【问题讨论】：

大声笑我今天也遇到了 tablesorter 的一些问题。 :)

@CG 我希望你能解决你的问题，这让我很生气。

过滤器小部件和寻呼机插件目前并不真正兼容。我正在为下一次更新而努力，但同时尝试这个过滤器小部件：github.com/jbritten/jquery-tablesorter-filter - 我认为它适用于寻呼机插件

更新：过滤器和寻呼机插件现在可以无缝地协同工作 - 请参阅Bootstrap theme demo。

@Leonid LOL 我完全忘记了这个问题......当然我会添加一个答案。

【参考方案1】：

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

Bootstrap theme demo

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

【讨论】：

@Leonid，我会将其标记为解决方案，因为此时它是。我相信 Mottie 会在“不久的将来”适当时回来更新答案。

你好 Mottie，这仍然是这个问题的最新解决方案吗？

@JuanCarlosOropeza 无论removeRows 选项的设置如何，过滤器和寻呼机小部件/插件都应该很好地协同工作。