tablesorter not sorting all pages

Question

I am using tablesorter plugin to sort a table and jQuery for pagination. The problem is that when I sort data, its sorted only on that page and when I click another page and come back to the previous page the whole data is sorted.

Pagination Script:

$('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');
});

Sorting Script:

$('.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>

I want when I sort the first time, the whole data is sorted across all pages.

Answer 1

I think the pager code also needs to be bound to the "sortEnd" event. Also, if you are using any widgets, they need to be reapplied.

Try this code (demo):

$('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');
});