Tablesorter pager (v 2.10) with page numbers

Question

The latest version of the tablesorter pager plugins apparently lacks support for the number of pages and the number of elements per page. With an older version (v2.0) this could be done. The reason for this is that we need to use the ajax selection for rows introduced in new versions (since the selection of all data immediately causes a performance hit), while maintaining the appearance of the table the same as before. However, much has changed from v2.0 to v2.10. I also could not find examples of modifying the updatePageDisplay function that would help achieve 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 HTML pager (page size numbers are reduced in accordance with this demo , also pay attention to the second pager block at the top, showing only the visible and complete 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; }); 

Answer 2

please view the demo and download the customized code. Using this advanced version, you can add multiple tables to one page. http://www.pearlbells.co.uk/table-pagination/