tablesorter pager (v 2.10) with page numbers

Question

The latest version of the tablesorter pager plugin seems to be missing page number support and # of items per page. With the older version (v2.0), it was possible to do so. The reason for asking this is because we need to take advantage of the ajax fetching of the rows, introduced in the newer versions (since fetching all the data at once is causing a performance hit) while keeping the look and feel of the table same as before. However, a lot has changed from v2.0 to v2.10. I also couldn't find any examples of modifying the updatePageDisplay function that would help in achieving this. The image below shows what I'm trying to accomplish:

Thanks in advance.

Answer 1

The latest version is much more flexible than the original. So, if we start with this pager HTML (page size numbers reduced to match this demo; also notice the second pager block at the top only showing the visible and total record numbers)

<div class="pager">
    <span class="left">
        # per page:
        <a href="#" class="current">5</a> |
        <a href="#">10</a> |
        <a href="#">20</a> |
        <a href="#">50</a>
    </span>
 <span class="right">
        <span class="prev">
            <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" /> Prev&nbsp;
        </span>
 <span class="pagecount"></span>
 &nbsp;<span class="next">Next 
            <img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" /> 
        </span>
</span>

this css

.left { float: left; }
.right {
    float: right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}
.pager .prev, .pager .next, .pagecount { cursor: pointer; }
.pager a {
    color: black;
}
.pager a.current {
    text-decoration: none;
    color: #0080ff;
}

and this script

var $table = $('table')
    .on('pagerInitialized pagerComplete', function (e, c) {
        var i, pages = '', t = [],
            cur = c.page + 1,
            start = cur > 1 ? (c.totalPages - cur < 3 ? -3 + (c.totalPages - cur) : -1) : 0,
            end = cur < 3 ? 5 - cur : 2;
        for (i = start; i < end; i++) {
            if (cur + i >= 1 && cur + i < c.totalPages) { t.push( cur + i ); }
        }
        // make sure first and last page are included in the pagination
        if ($.inArray(1, t) === -1) { t.push(1); }
        if ($.inArray(c.totalPages, t) === -1) { t.push(c.totalPages); }
        // sort the list
        t = t.sort(function(a, b){ return a - b; });
        // make links and spacers
        $.each(t, function(j, v){
            pages += '<a href="#" class="' + (v === cur ? 'current' : '') + '">' + v + '</a>';
            pages += j < t.length - 1 && ( t[j+1] - 1 !== v ) ? ' ... ' : ( j >= t.length - 1 ? '' : ' | ' );
        });
        $('.pagecount').html(pages);
    })
    .tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'columns']
    })
    .tablesorterPager({
        // target the pager markup - see the HTML block below
        container: $(".pager"),
        size: 5,
        output: 'showing: {startRow} to {endRow} ({totalRows})'
    });

// set up pager controls
$('.pager .left a').on('click', function () {
    $(this)
        .addClass('current')
        .siblings()
        .removeClass('current');
    $table.trigger('pageSize', $(this).html());
    return false;
});
$('.pager .right .pagecount').on('click', 'a', function(){
    $(this)
        .addClass('current')
        .siblings()
        .removeClass('current');
    $table.trigger('pageSet', $(this).html());
    return false;
});