TableSorter Pager（JQuery）的错误分页

Posted 2023-02-26

【中文标题】TableSorter Pager（JQuery）的错误分页

【英文标题】：Wrong pagination with TableSorter Pager (JQuery)

【发布时间】：2018-04-19 13:28:25

【问题描述】：

我的一张表的分页错误：TableSorter Pager (jQuery) 计数 5 行，而有 7 行。 我在另一个具有相同代码的表上遇到了同样的问题（请参见下文）：jQuery 计算 6 行，而只有 3 行。 有人有想法吗？

这是代码（只是 javascript）：

$(function () 
            $('#actions_table').tooltip(
                selector: "button[data-toggle=tooltip]"
            );

            var table = $('table').tablesorter(
                theme: 'bootstrap',
                headerTemplate: 'content icon',
                widgets: ["uitheme", "zebra", "filter"],
                //sortList: [[0, 1]],
                widgetOptions: 
                    // filter_anyMatch replaced! Instead use the filter_external option
                    // Set to use a jQuery selector (or jQuery object) pointing to the
                    // external filter (column specific or any match)
                    filter_external: '.search',
                    // add a default type search to the first name column
                    filter_defaultFilter: 1: '~query',
                    // include column filters
                    filter_columnFilters: false,
                    filter_placeholder: search: 'Rechercher...',
                    filter_saveFilters: false,
                    filter_reset: '.reset'
                
            ).tablesorterPager(
                // target the pager markup - see the html block below
                container: $(".pager"),
                // use this url format "http:/mydatabase.com?page=page&size=size" 
                ajaxUrl: null,
                // process ajax so that the data object is returned along with the
                // total number of rows; example:
                // 
                //   "data" : [ "ID": 1, "Name": "Foo", "Last": "Bar" ],
                //   "total_rows" : 100 
                //  
                ajaxProcessing: function (ajax) 
                    if (ajax && ajax.hasOwnProperty('data')) 
                        // return [ "data", "total_rows" ]; 
                        return [ajax.data, ajax.total_rows];
                    
                ,
                // output string - default is 'page/totalPages';
                // possible variables:
                // page, totalPages, startRow, endRow and totalRows
                output: 'startRow à endRow (totalRows au total)',
                // 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: 15,
                pageReset: 0,
                // 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: false,
                savePages: false,
                // 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: false,
                // css class names of pager arrows
                // next page arrow
                cssNext: '.next',
                // previous page arrow
                cssPrev: '.prev',
                // go to first page arrow
                cssFirst: '.first',
                // go to last page arrow
                cssLast: '.last',
                // select dropdown to allow choosing a page
                cssGoto: '.gotoPage',
                // location of where the "output" is displayed
                cssPageDisplay: '.pagedisplay',
                // dropdown that sets the "size" option
                cssPageSize: '.pagesize',
                // class added to arrows when at the extremes 
                // (i.e. prev/first arrows are "disabled" when on the first page)
                // Note there is no period "." in front of this class name
                cssDisabled: 'disabled'

            );
        );

【参考方案1】：

首先检查返回的ajax.total_rows 是否正确报告了行数。

其次，检查检查器中的 HTML 以验证是否存在与您期望的相同数量的行。格式错误的 HTML 或添加第二个带有行的 <tbody> 也可能导致报告该问题。

【讨论】：

感谢您的回复，我通过更改 $('.my_table').tablesorter 中的 $.('table').datesorter 解决了我的问题...我不知道为什么它没有不工作，但现在它工作......！