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 +
+ +
+ + + +
+ + + 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 = $("