TableSorter寻呼机(JQuery)的错误分页

时间:2018-04-19 13:28:25

标签: javascript jquery tablesorter pager

我的一个表的分页是错误的:TableSorter寻呼机(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 个答案:

答案 0 :(得分:2)

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

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