From 282c5236d45f8c0062fba2c691098bf4a5830e1e Mon Sep 17 00:00:00 2001 From: Christian Zachariasen Date: Wed, 22 Feb 2012 19:14:47 +0100 Subject: [PATCH] Added a nicer pager for tablesorter, plus example --- examples/table-with-pager.html | 360 ++++++++++++++++++++++++++ js/jquery.tablesorter.fbpager.js | 374 +++++++++++++++++++++++++++ js/jquery.tablesorter.fbpager.min.js | 2 + js/jquery.tablesorter.min.js | 7 + 4 files changed, 743 insertions(+) create mode 100644 examples/table-with-pager.html create mode 100644 js/jquery.tablesorter.fbpager.js create mode 100644 js/jquery.tablesorter.fbpager.min.js create mode 100644 js/jquery.tablesorter.min.js diff --git a/examples/table-with-pager.html b/examples/table-with-pager.html new file mode 100644 index 000000000000..54655f83fba7 --- /dev/null +++ b/examples/table-with-pager.html @@ -0,0 +1,360 @@ + + + + + App / Fbootstrapp by Clemens Krack, based on Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+

Tables For, you guessed it, tabular data

+
+ +

Example: Default table styles

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameLanguage
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
+ + +

Example: Zebra-striped

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameLanguage
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
+ span 4 columns +
+ span 2 columns + + span 2 columns +
+ +
+ +
+

© Company 2011

+
+ +
+ + + diff --git a/js/jquery.tablesorter.fbpager.js b/js/jquery.tablesorter.fbpager.js new file mode 100644 index 000000000000..2e256e039f75 --- /dev/null +++ b/js/jquery.tablesorter.fbpager.js @@ -0,0 +1,374 @@ +/* + * tablesorter pager plugin + * updated 2/22/2012 by christianz + */ + +(function($) { + $.extend({tablesorterPager: new function() { + + // hide arrows at extremes + var pagerArrows = function(c) { + var a = 'addClass', r = 'removeClass', d = c.cssDisabled; + if (c.updateArrows) { + c.container[(c.totalRows < c.size) ? a : r](d); + $(c.cssFirst + ',' + c.cssPrev, c.container)[(c.page === 0) ? a : r](d); + $(c.cssNext + ',' + c.cssLast, c.container)[(c.page === c.totalPages - 1) ? a : r](d); + } + }, + + updatePageDisplay = function(table, c) { + c.startRow = c.size * (c.page) + 1; + c.endRow = Math.min(c.totalRows, c.size * (c.page+1)); + var out = $(c.cssPageDisplay, c.container); + + pagerArrows(c); + c.container.show(); // added in case the pager is reinitialized after being destroyed. + $(table).trigger('pagerComplete', c); + }, + + fixPosition = function(table, c) { + var o = $(table); + if (!c.pagerPositionSet && c.positionFixed) { + if (o.offset) { + c.container.css({ + top: o.offset().top + o.height() + c.offset + 'px', + position: 'absolute' + }); + } + c.pagerPositionSet = true; + } + }, + + hideRows = function(table, c){ + var i, rows = $('tr:not(.' + c.cssChildRow + ')', table.tBodies[0]), + l = rows.length, + s = (c.page * c.size), + e = (s + c.size); + if (e > l) { e = l; } + for (i = 0; i < l; i++){ + rows[i].style.display = (i >= s && i < e) ? '' : 'none'; + } + }, + + hideRowsSetup = function(table, c){ + pagerArrows(c); + if (!c.removeRows) { + hideRows(table, c); + $(table).bind('sortEnd.pager', function(){ + hideRows(table, c); + $(table).trigger("applyWidgets"); + }); + } + }, + + renderTable = function(table, rows, c) { + var i, j, o, + tableBody = $(table.tBodies[0]), + l = rows.length, + s = (c.page * c.size), + e = (s + c.size); + if (l < 1) { return; } // empty table, abort! + $(table).trigger('pagerChange', c); + if (!c.removeRows) { + hideRows(table, c); + } else { + if (e > rows.length ) { + e = rows.length; + } + + // clear the table body + $.tablesorter.clearTableBody(table); + for (i = s; i < e; i++) { + o = rows[i]; + l = o.length; + for (j = 0; j < l; j++) { + tableBody[0].appendChild(o[j]); + } + } + } + fixPosition(table, tableBody, c); + $(table).trigger("applyWidgets"); + if ( c.page >= c.totalPages ) { + moveToLastPage(table, c); + } + updatePageDisplay(table, c); + }, + + showAllRows = function(table, c){ + c.lastPage = c.page; + c.lastSize = c.size; + c.size = c.totalRows; + c.totalPages = 1; + renderTable(table, c.rowsCopy, c); + }, + + moveToPage = function(table, c) { + if (c.isDisabled) { return; } + if (c.page < 0 || c.page > (c.totalPages-1)) { + c.page = 0; + } + + $(".pagerBtn").removeClass("active"); + $(".pagerBtn[rel=" + c.page + "]").addClass("active"); + + renderTable(table, c.rowsCopy, c); + }, + + setPageSize = function(table, size, c) { + c.size = c.lastSize = size; + c.totalPages = Math.ceil(c.totalRows / c.size); + c.pagerPositionSet = false; + moveToPage(table, c); + fixPosition(table, c); + }, + + moveToFirstPage = function(table, c) { + c.page = 0; + moveToPage(table, c); + }, + + moveToLastPage = function(table, c) { + c.page = (c.totalPages-1); + moveToPage(table, c); + }, + + moveToNextPage = function(table, c) { + c.page++; + + if (c.page >= (c.totalPages-1)) { + c.page = (c.totalPages-1); + } + + if (c.page % c.pagesToDisplay == 0) { + jumpToNextPageSet(table, c); + } + + moveToPage(table, c); + }, + + jumpToNextPageSet = function(table, c) { + c.currentPageSet++; + + buildNumberButtons(table, c); + }, + + jumpToPrevPageSet = function(table, c) { + c.currentPageSet--; + + buildNumberButtons(table, c); + }, + + buildNumberButtons = function(table, c) { + if (c.currentPageSet == 0) { + var numRows = table.rows.length; + + // If the page size is larger than the number of rows, don't display the pager. + if (c.size >= numRows) { + return; + } + + var numPages = numRows / c.size; + + if (c.pagesToDisplay > numPages) { + c.pagesToDisplay = numPages; + } + } + + var list = $("