jQuery Pager on a table

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.

 1: (function($)
{
 2:  $.extend({
 3:  tablesorterPager: new function()
{
 4: 
 5:  function updatePageDisplay(table)
{
 6:  var c = table.config;
 7:  var paginghtml
= '';
 8: 
 9:  var startoffset
= Math.max(c.page - 1, 1);
 10:  var endoffset = Math.min(c.page
+ 3, c.totalPages);
 11: 
 12:  // hide paging controls if we only have one page
 13:  if (c.totalPages
== 1) {
 14:  $(c.cssPageDisplay, c.container).hide();
 15:  }
 16:  else {
 17:  $(c.cssPageDisplay, c.container).show();
 18:  }
 19: 
 20:  // remove old event handlers
 21:  $(c.cssPageDisplay + ' a', c.container).unbind('click');
 22: 
 23:  for (var i
= startoffset; i <= endoffset; i++) {
 24:  if (c.page + 1 == i)
{
 25:  paginghtml += '<a href="#page' + i + '"><strong>'
  + i + '</strong></a>';
 26:  }
 27:  else {
 28:  paginghtml += '<a href="#page' +
i + '">' + i + 

'</a>';
 29:  }
 30:  }
 31: 
 32:  $(c.cssPageDisplay, c.container).html(paginghtml);
 33: 
 34:  if (c.page == 0) {
 35:  $(config.cssPrev, config.container).hide();
 36:  }
 37:  else {
 38:  $(config.cssPrev, config.container).show();
 39:  }
 40: 
 41:  if (c.page
== c.totalPages - 1) {
 42:  $(config.cssNext, config.container).hide();
 43:  }
 44:  else {
 45:  $(config.cssNext, config.container).show();
 46:  }
 47: 
 48:  // set up click handlers
 49:  $(c.cssPageDisplay + ' a', c.container).click(function() {
 50:  var pageno = /#page(\d)/.exec(this.href)[1];
 51: 
 52:  table.config.page = pageno - 1; moveToPage(table);
 53: 
 54:  return false;
 55:  });
 56:  }
 57: 
 58:  function setPageSize(table,
size) {
 59:  var c =
table.config;
 60:  c.size = size;
 61:  c.totalPages = Math.ceil(c.totalRows
/ c.size);
 62:  c.pagerPositionSet = false;
 63:  moveToPage(table);
 64:  fixPosition(table);
 65:  }
 66: 
 67:  function fixPosition(table)
{
 68:  var c = table.config;
 69:  if (!c.pagerPositionSet
&& c.positionFixed) {
 70:  var c = table.config,
o = $(table);
 71:  if (o.offset)
{
 72:  c.container.css({
 73:  top: o.offset().top + o.height()
+ 'px',
 74:  position: 'absolute'
 75:  });
 76:  }
 77:  c.pagerPositionSet = true;
 78:  }
 79:  }
 80: 
 81:  function moveToFirstPage(table)
{
 82:  var c = table.config;
 83:  c.page = 0;
 84:  moveToPage(table);
 85:  }
 86: 
 87:  function moveToLastPage(table)
{
 88:  var c = table.config;
 89:  c.page = (c.totalPages - 1);
 90:  moveToPage(table);
 91:  }
 92: 
 93:  function moveToNextPage(table)
{
 94:  var c = table.config;
 95:  c.page++;
 96:  if (c.page >= (c.totalPages
- 1)) {
 97:  c.page = (c.totalPages - 1);
 98:  }
 99:  moveToPage(table);
 100:  }
 101: 
 102:  function moveToPrevPage(table)
{
 103:  var c
= table.config;
 104:  c.page--;
 105:  if (c.page
<= 0) {
 106:  c.page = 0;
 107:  }
 108:  moveToPage(table);
 109:  }
 110: 
 111: 
 112:  function moveToPage(table)
{
 113:  var c
= table.config;
 114:  if (c.page < 0
|| c.page > (c.totalPages - 1)) {
 115:  c.page = 0;
 116:  }
 117: 
 118:  renderTable(table, c.rowsCopy);
 119:  }
 120: 
 121:  function renderTable(table,
rows) {
 122: 
 123:  var c
= table.config;
 124:  var l = rows.length;
 125:  var s
= (c.page * c.size);
 126:  var e = (s + c.size);
 127:  if (e
> rows.length) {
 128:  e = rows.length;
 129:  }
 130: 
 131: 
 132:  var tableBody = $(table.tBodies[0]);
 133: 
 134:  // clear the table body
 135: 
 136:  $.tablesorter.clearTableBody(table);
 137: 
 138:  for (var i
= s; i < e; i++) {
 139: 
 140:  //tableBody.append(rows[i]);
 141: 
 142:  var o = rows[i];
 143:  var l
= o.length;
 144:  for (var j
= 0; j < l; j++) {
 145: 
 146:  tableBody[0].appendChild(o[j]);
 147: 
 148:  }
 149:  }
 150: 
 151:  fixPosition(table, tableBody);
 152: 
 153:  $(table).trigger("applyWidgets");
 154: 
 155:  if (c.page
>= c.totalPages) {
 156:  moveToLastPage(table);
 157:  }
 158: 
 159:  updatePageDisplay(table);
 160:  }
 161: 
 162:  this.appender = function(table,
rows) {
 163: 
 164:  var c = table.config;
 165: 
 166:  c.rowsCopy = rows;
 167:  c.totalRows = rows.length;
 168:  c.totalPages = Math.ceil(c.totalRows / c.size);
 169: 
 170:  renderTable(table, rows);
 171:  };
 172: 
 173:  this.defaults
= {
 174:  size: 10,
 175:  offset: 0,
 176:  page: 0,
 177:  totalRows: 0,
 178:  totalPages: 0,
 179:  container: null,
 180:  cssNext: '.next',
 181:  cssPrev: '.previous',
 182:  cssFirst: '.first',
 183:  cssLast: '.last',
 184:  cssPageDisplay: '.pagedisplay',
 185:  cssPageSize: '.pagesize',
 186:  seperator: "/",
 187:  positionFixed: false,
 188:  appender: this.appender
 189:  };
 190: 
 191:  this.construct
= function(settings) {
 192: 
 193:  return this.each(function()
{
 194: 
 195:  config = $.extend(this.config,
$.tablesorterPager.
defaults, settings);
 196: 
 197:  var table
= this, pager = config.container;
 198: 
 199:  $(this).trigger("appendCache");
 200: 
 201:  //config.size = parseInt($(".pagesize",pager).val());
 202: 
 203:  /*$(config.cssFirst, pager).click(function() {
 204:  moveToFirstPage(table);
 205:  return false;
 206:  });*/
 207:  $(config.cssNext, pager).click(function()
{
 208:  moveToNextPage(table);
 209:  return false;
 210:  });
 211:  $(config.cssPrev, pager).click(function()
{
 212:  moveToPrevPage(table);
 213:  return false;
 214:  });
 215:  /*$(config.cssLast, pager).click(function() {
 216:  moveToLastPage(table);
 217:  return false;
 218:  });*/
 219:  /*$(config.cssPageSize,pager).change(function() {
 220:  setPageSize(table,parseInt($(this).val()));
 221:  return false;
 222:  });*/
 223:  });
 224:  };
 225: 
 226:  }
 227:  });
 228:  // extend plugin scope
 229:  $.fn.extend({
 230:  tablesorterPager: $.tablesorterPager.construct
 231:  });
 232: 
 233: })(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:

 1: <ul id="pager" class="pagination">
 2:  <li><a href="" class="first">first</a></li>
 3:  <li><a href="" class="previous">previous</a></li>
 4:  <li><span class="pagedisplay"></span></li>
 5:  <li><a href="" class="next">next</a></li>
 6:  <li><a href="" class="last">last</a></li>
 7: </ul>

Leave a Reply