【问题标题】:Wrong pagination with TableSorter Pager (JQuery)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'

            });
        });

【问题讨论】:

    标签: javascript jquery tablesorter pager


    【解决方案1】:

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

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

    【讨论】:

    • 感谢您的回复,我通过更改 $('.my_table').tablesorter 中的 $.('table').datesorter 解决了我的问题...我不知道为什么它没有不工作,但现在它工作......!
    猜你喜欢
    • 2012-01-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多