This is my first blog in english, so sorry for any spelling errors.
In one of our projects, we use the great jQuery library. A very cool plugin for jQuery is the tablesorter and the extsion to this, the pager. The only disadvantage of the pager plugin is the missing function “Jump To Page”. You can only display the current page and the page count as one string. So i have modified the code of the pager plugin a little, to add this function.
It is a very simple extension, only two existing functions need to be updated. To identify the input-field for the current page and the div for the pagecount, i added two new properties to the settings: cssPageCurrent and cssPageCount. The first function to update is the constructur. Here i connect to the change-event of the input-field and call the moveToPage function. The second function is named updatePageDisplay. It is responsible to update the number in the currentpage-inputfield if you navigate with the next/prev buttons.
Here are the updated functions:
function updatePageDisplay(c, table) { var txt = (c.page + 1) + c.seperator + c.totalPages; var pd = $(c.cssPageDisplay, c.container) if (pd.is("input")) pd.val(txt); else pd.text(txt); var pcur = $(c.cssPageCurrent, c.container) if (pcur.is("input")) pcur.val(c.page + 1); else pcur.text(c.page + 1); var pcount = $(c.cssPageCount, c.container) if (pcount.is("input")) pccount.val(c.totalPages); else pcount.text(c.totalPages); $(table).trigger("tableSorterPagerUpdatePageDisplay"); } this.defaults = { size: 10, offset: 0, page: 0, totalRows: 0, totalPages: 0, container: null, cssNext: '.next', cssPrev: '.prev', cssFirst: '.first', cssLast: '.last', cssPageDisplay: '.pagedisplay', cssPageSize: '.pagesize', cssPageCount: '.pagecount', cssPageCurrent: '.pagecurrent', seperator: "/", positionFixed: true, appender: this.appender }; this.construct = function (settings) { return this.each(function () { ... $(config.cssPageCurrent, pager).change(function () { var c = table.config; var p = $(this).val(); if (p != c.page + 1) { p = parseInt(p) - 1; if (p < 0 || isNaN(p)) p = 0; else if (p > c.totalPages - 1) p = c.totalPages - 1; c.page = p; moveToPage(table); } return false; }); }); };
Here you can download the changed scriptfile: jquery.tablesorter.pager.js
And here is how i used it:
<html> <head> <script type="text/javascript"> $(document).ready(function () { ... $(".tblSortable").tablesorter(); $(".tblSortable").tablesorterPager({ container: $("#pager"), positionFixed: false, size: 30 }); ... }); </script> </head> <body> ... <div id="pager" align="center"> <input type="text" name="pagecurrent" class="pagecurrent"> <span> / </span> <span class="pagecount">1</span> </div> ... <table class="tblSortable"> ... </table> </body> </html>
Der C+# (CPlusSharp) Blog 
#1 von shahashishk am 2011-11-10 - 13:56
Thanks Dear for helping for this kind of soting and paging configuration
#2 von #2 am 2013-12-09 - 08:40
Thanks so much this helped me a lot! Danke!