jQuery Pager on a table

jQuery Pager on a table header image

Most of you may know the popular posts on jquery and the use of it in SharePoint by Jan Tielens (he actually made a very nice post last day about the “search-as-you-type”.

So jQuery can be used for good in SharePoint. Today we needed to create a pager on a sortable table, and since we used this tablesorter. It would be convenient to use the pager that they provide, however it didn’t really meet our standards, so we decided to modify it a bit in order to provide a cleaner look.

(function($)
{
  $.extend({
  tablesorterPager: new function(){
 function updatePageDisplay(table){
  var c = table.config;
  var paginghtml = '';
  var startoffset = Math.max(c.page - 1, 1);
  var endoffset = Math.min(c.page + 3, c.totalPages);
  // hide paging controls if we only have one page
 if(c.totalPages == 1) {
   $(c.cssPageDisplay, c.container).hide();
   }
   else {
   $(c.cssPageDisplay, c.container).show();
   }

   // remove old event handlers
   $(c.cssPageDisplay + ' a', c.container).unbind('click');

   for (var i = startoffset; i <= endoffset; i++) {
   if (c.page + 1 == i) {
   paginghtml += '<a href="#page' + i + '"><strong>' + i + '</strong></a>';
   }
   else {
   paginghtml += '<a href="#page' + i + '">' + i + '</a>';
   }
   }

   $(c.cssPageDisplay, c.container).html(paginghtml);

   if (c.page == 0) {
   $(config.cssPrev, config.container).hide();
   }
   else {
   $(config.cssPrev, config.container).show();
   }

   if (c.page == c.totalPages - 1) {
   $(config.cssNext, config.container).hide();
   }
   else {
   $(config.cssNext, config.container).show();
   }

   // set up click handlers
   $(c.cssPageDisplay + ' a', c.container).click(function() {
   var pageno = /#page(\d)/.exec(this.href)[1];

   table.config.page = pageno - 1; moveToPage(table);

   return false;
   });
   }

   function setPageSize(table, size) {
   var c = table.config;
   c.size = size;
   c.totalPages = Math.ceil(c.totalRows / c.size);
   c.pagerPositionSet = false;
   moveToPage(table);
   fixPosition(table);
   }

   function fixPosition(table) {
   var c = table.config;
   if (!c.pagerPositionSet && c.positionFixed) {
   var c = table.config, o = $(table);
   if (o.offset) {
   c.container.css({
   top: o.offset().top + o.height()+ 'px',
   position: 'absolute'
   });
   }
   c.pagerPositionSet = true;
   }
   }

   function moveToFirstPage(table) {
   var c = table.config;
   c.page = 0;
   moveToPage(table);
   }

   function moveToLastPage(table) {
   var c = table.config;
   c.page = (c.totalPages - 1);
   moveToPage(table);
   }

   function moveToNextPage(table) {
   var c = table.config;
   c.page++;
   if (c.page >= (c.totalPages - 1)) {
  c.page = (c.totalPages - 1);
  }
  moveToPage(table);
   }

   function moveToPrevPage(table){
   var c = table.config;
   c.page--;
   if (c.page <= 0) {
   c.page = 0;
   }
   moveToPage(table);
   }

   function moveToPage(table) {
   var c = table.config;
   if (c.page < 0 || c.page > (c.totalPages - 1)) {
   c.page = 0;
   }

   renderTable(table, c.rowsCopy);
   }

   function renderTable(table, rows) {

   var c = table.config;
   var l = rows.length;
   var s = (c.page * c.size);
   var e = (s + c.size);
   if (e > rows.length) {
   e = rows.length;
   }


   var tableBody = $(table.tBodies[0]);

   // clear the table body

   $.tablesorter.clearTableBody(table);

   for (var i = s; i < e; i++) {

   //tableBody.append(rows[i]);

   var o = rows[i];
   var l = o.length;
   for (var j = 0; j < l; j++) {

   tableBody[0].appendChild(o[j]);

   }
   }

   fixPosition(table, tableBody);

   $(table).trigger("applyWidgets");

   if (c.page >= c.totalPages) {
   moveToLastPage(table);
   }

   updatePageDisplay(table);
   }

   this.appender = function(table, rows) {

   var c = table.config;

   c.rowsCopy = rows;
   c.totalRows = rows.length;
   c.totalPages = Math.ceil(c.totalRows / c.size);

   renderTable(table, rows);
   };

   this.defaults = {
   size: 10,
   offset: 0,
   page: 0,
   totalRows: 0,
   totalPages: 0,
   container: null,
   cssNext: '.next',
   cssPrev: '.previous',
   cssFirst: '.first',
   cssLast: '.last',
   cssPageDisplay: '.pagedisplay',
   cssPageSize: '.pagesize',
   seperator: "/",
   positionFixed: false,
   appender: this.appender
   };

   this.construct = function(settings) {

   return this.each(function() {

   config = $.extend(this.config, $.tablesorterPager.defaults, settings);

   var table = this, pager = config.container;

   $(this).trigger("appendCache");

   //config.size = parseInt($(".pagesize",pager).val());

   /*$(config.cssFirst, pager).click(function() {
   moveToFirstPage(table);
   return false;
   });*/
   $(config.cssNext, pager).click(function() {
   moveToNextPage(table);
   return false;
   });
   $(config.cssPrev, pager).click(function() {
   moveToPrevPage(table);
   return false;
   });
   /*$(config.cssLast, pager).click(function() {
   moveToLastPage(table);
   return false;
   });*/
   /*$(config.cssPageSize,pager).change(function() {
   setPageSize(table,parseInt($(this).val()));
   return false;
   });*/
   });
   };

   }
   });
   // extend plugin scope
   $.fn.extend({
   tablesorterPager: $.tablesorterPager.construct
   });

  })(jQuery);

As you can see not much changed, just some minor modifications that will allow you to ignore the selectable page-size, options to jump to last / first page, ignoring the showing of the paging when there are no pages to show, and the use of a ‘sliding’ window showing the current page, 2 pages two the left and two pages to the right of it.

Using it will be easy:

<ul id="pager" class="pagination">
  <li><a href="" class="first">first</a></li>
  <li><a href="" class="previous">previous</a></li>
  <li><span class="pagedisplay"></span></li>
  <li><a href="" class="next">next</a></li>
  <li><a href="" class="last">last</a></li>
</ul>
Loading comments…