tablesorter没有排序所有页面

Question

我正在使用tablesorter插件对表进行排序,并使用jQuery进行分页.问题是,当我对数据进行排序时,它仅在该页面上排序,当我单击另一个页面并返回上一页时,整个数据都会被排序.

分页脚本:

$('table.datatable').each(function () {
    var currentPage = 0;
    var numPerPage = 8;
    var $table = $(this);
    $table.bind('repaginate', function () {
        $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
    });

    $table.trigger('repaginate');
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager = $('<div class="pager"></div>');
    for (var page = 0; page < numPages; page++) {
        $('<span class="page-number"></span>').text(page + 1).bind('click', {
            newPage: page
        }, function (event) {
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');
        }).appendTo($pager).addClass('clickable');
    }
    $pager.insertAfter($table).find('span.page-number:first').addClass('active');
});

排序脚本:

$('.datatable').tablesorter({
                dateFormat: "mmddyyyy",

                headers: {
                    0: {
                        sorter: false
                    },
                    1: {
                        sorter: 'text'
                    },
                    2: {
                        sorter: 'text'
                    },
                    3: {
                        sorter: 'text'
                    },
                    4: {
                        sorter: 'text'
                    },
                    5: {
                        sorter: 'dateFormat'
                    },
                    6: {
                        sorter: 'dateFormat'
                    }
                },

                ignoreCase: true,

                emptyTo: "bottom"


            });

HTML:

<table class="datatable" id="maintable">
 <th>...</th>
 <tbody>...<tbody>
<table>

我想在第一次排序时,整个数据在所有页面中排序.

Answer 1

我认为寻呼机代码也需要绑定到"sortEnd"事件.此外,如果您使用任何小部件,则需要重新应用它们.

试试这个代码(演示):

$('table').each(function () {
    var currentPage = 0;
    var numPerPage = 5;
    var $table = $(this);
    $table.bind('sortEnd repaginate', function () {
        $table
            .find('tbody tr').hide()
            .slice(currentPage * numPerPage, (currentPage + 1) * numPerPage)
            .show(10, function(){
                // update zebra striping after rows are visible
                $table.trigger('applyWidgets');
            });
    });
    $table.trigger('repaginate');
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager = $('<div class="pager"></div>');
    for (var page = 0; page < numPages; page++) {
        $('<span class="page-number"></span>').text(page + 1).bind('click', {
            newPage: page
        }, function (event) {
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');
        }).appendTo($pager).addClass('clickable');
    }
    $pager.insertAfter($table).find('span.page-number:first').addClass('active');
});