diff --git a/beta-testing/example-pager-custom-controls.html b/beta-testing/example-pager-custom-controls.html index de34c458..436bf427 100644 --- a/beta-testing/example-pager-custom-controls.html +++ b/beta-testing/example-pager-custom-controls.html @@ -1,7 +1,7 @@ - + jQuery plugin: Tablesorter 2.0 - Pager plugin, Custom Pagination @@ -110,26 +110,10 @@ - - - - - - - - - + - - - - - - - - - + - @@ -1153,6 +1136,7 @@ +
NameMajorSexEnglishJapaneseCalculusGeometry
NameMajorSexEnglishJapaneseCalculusGeometry
NameMajorSexEnglishJapaneseCalculusGeometry
NameMajorSexEnglishJapaneseCalculusGeometry
@@ -176,7 +160,6 @@
Student21Languagesmale5045100100
Student22Mathematicsmale1009910090
Student23Languagesfemale85808080
student23Mathematicsmale8277079
student24Languagesfemale100911382
student25Mathematicsmale22968253
student26Languagesfemale37295659
student997Mathematicsmale73334253
student998Languagesfemale6410231
student999Mathematicsmale91931635
student1000Mathematicsmale8277079
@@ -1162,7 +1146,50 @@

HTML

- 

+		
<table class="tablesorter">
+	<thead>
+		<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
+	</thead>
+	<tfoot>
+		<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
+		<tr>
+			<td colspan="7">
+				<div class="pager">
+					<nav class="left">
+						# per page:
+						<a href="#" class="current">10</a> |
+						<a href="#">25</a> |
+						<a href="#">50</a> |
+						<a href="#">100</a>
+					</nav>
+					<nav class="right">
+						<span class="prev">
+							<img src="icons/prev.png" /> Prev&nbsp;
+						</span>
+						<span class="pagecount"></span>
+						&nbsp;<span class="next">Next
+							<img src="icons/next.png" />
+						</span>
+					</nav>
+				</div>
+			</td>
+		</tr>
+	</tfoot>
+	<tbody>
+		<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
+		<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
+		<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
+		<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
+		<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
+		<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
+		<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
+		<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
+		<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
+		<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
+		<!-- ... -->
+		<tr><td>student999</td><td>Mathematics</td><td>male</td><td>91</td><td>93</td><td>16</td><td>35</td></tr>
+	</tbody>
+</table>

 	

 
 
diff --git a/beta-testing/pager-custom-controls.js b/beta-testing/pager-custom-controls.js
index ff7a2f50..ce987f23 100644
--- a/beta-testing/pager-custom-controls.js
+++ b/beta-testing/pager-custom-controls.js
@@ -1,15 +1,23 @@
-/*
+/*!
  * custom pager controls - beta testing
+  initialize custom pager script BEFORE initializing tablesorter/tablesorter pager
+  custom pager looks like this:
+  1 | 2 … 5 | 6 | 7 … 99 | 100
+    _       _   _        _     adjacentSpacer
+        _           _          distanceSpacer
+  _____               ________ ends (2 default)
+          _________            aroundCurrent (1 default)
+
  */
 /*jshint browser:true, jquery:true, unused:false, loopfunc:true */
-/*global jQuery: false, localStorage: false, navigator: false */
+/*global jQuery: false */
 
 ;(function($){
 "use strict";
 
 $.tablesorter = $.tablesorter || {};
 
-$.tablesorter.customPagerControls = function(options) {
+$.tablesorter.customPagerControls = function(settings) {
 	var defaults = {
 		table          : 'table',
 		pager          : '.pager',
@@ -23,63 +31,64 @@ $.tablesorter.customPagerControls = function(options) {
 		distanceSpacer : ' … ',               // spacer for page numbers away from each other (ellipsis)
 		addKeyboard    : true                      // add left/right keyboard arrows to change current page
 	},
-	o = $.extend({}, defaults, options),
-	$table = $(o.table);
+	options = $.extend({}, defaults, settings),
+	$table = $(options.table);
 
 	$table
 		.on('pagerInitialized pagerComplete', function (e, c) {
-			var i, pages = $('
'), t = [],
+			var indx, pages = $('
'), pageArray = [],
 			cur = c.page + 1,
-			start = cur > 1 ? (c.totalPages - cur < o.aroundCurrent ? -(o.aroundCurrent + 1) + (c.totalPages - cur) : -o.aroundCurrent) : 0,
-			end = cur < o.aroundCurrent + 1 ? o.aroundCurrent + 3 - cur : o.aroundCurrent + 1;
-			for (i = start; i < end; i++) {
-				if (cur + i >= 1 && cur + i < c.totalPages) { t.push( cur + i ); }
+			start = cur > 1 ? (c.totalPages - cur < options.aroundCurrent ? -(options.aroundCurrent + 1) + (c.totalPages - cur) : -options.aroundCurrent) : 0,
+			end = cur < options.aroundCurrent + 1 ? options.aroundCurrent + 3 - cur : options.aroundCurrent + 1;
+			for (indx = start; indx < end; indx++) {
+				if (cur + indx >= 1 && cur + indx < c.totalPages) { pageArray.push( cur + indx ); }
 			}
 			// include first and last pages (ends) in the pagination
-			for (i = 0; i < o.ends; i++){
-				if ($.inArray(i + 1, t) === -1) { t.push(i + 1); }
-				if ($.inArray(c.totalPages - i, t) === -1) { t.push(c.totalPages - i); }
+			for (indx = 0; indx < options.ends; indx++){
+				if ($.inArray(indx + 1, pageArray) === -1) { pageArray.push(indx + 1); }
+				if ($.inArray(c.totalPages - indx, pageArray) === -1) { pageArray.push(c.totalPages - indx); }
 			}
 			// sort the list
-			t = t.sort(function(a, b){ return a - b; });
+			pageArray = pageArray.sort(function(a, b){ return a - b; });
 			// make links and spacers
-			$.each(t, function(j, v){
+			$.each(pageArray, function(indx, value){
 				pages
-					.append( $(o.link.replace(/\{page\}/g, v)).toggleClass(o.currentClass, v === cur).attr('data-page', v) )
-					.append( '' + (j < t.length - 1 && ( t[j+1] - 1 !== v ) ? o.distanceSpacer : ( j >= t.length - 1 ? '' : o.adjacentSpacer )) + '' );
+					.append( $(options.link.replace(/\{page\}/g, value)).toggleClass(options.currentClass, value === cur).attr('data-page', value) )
+					.append( '' + (indx < pageArray.length - 1 && ( pageArray[ indx + 1 ] - 1 !== value ) ? options.distanceSpacer :
+						( indx >= pageArray.length - 1 ? '' : options.adjacentSpacer )) + '' );
 			});
 			$('.pagecount').html(pages.html());
 		});
 
 	// set up pager controls
-	$(o.pager).find(o.pageSize).on('click', function () {
+	$(options.pager).find(options.pageSize).on('click', function () {
 		$(this)
-		.addClass(o.currentClass)
+		.addClass(options.currentClass)
 		.siblings()
-		.removeClass(o.currentClass);
+		.removeClass(options.currentClass);
 		$table.trigger('pageSize', $(this).html());
 		return false;
 	}).end()
-	.on('click', o.currentPage, function(){
+	.on('click', options.currentPage, function(){
 		$(this)
-		.addClass(o.currentClass)
+		.addClass(options.currentClass)
 		.siblings()
-		.removeClass(o.currentClass);
+		.removeClass(options.currentClass);
 		$table.trigger('pageSet', $(this).attr('data-page'));
 		return false;
 	});
 
 	// make right/left arrow keys work
-	if (o.addKeyboard) {
-		$(document).on('keydown', function(e){
+	if (options.addKeyboard) {
+		$(document).on('keydown', function(events){
 			// ignore arrows inside form elements
-			if (/input|select|textarea/i.test(e.target.tagName)) { return; }
-			if (e.which === 37) {
+			if (/input|select|textarea/i.test(events.target.tagName)) { return; }
+			if (events.which === 37) {
 				// left
-				$(o.pager).find(o.currentPage).filter('.' + o.currentClass).prevAll(':not(span):first').click();
-			} else if (e.which === 39) {
+				$(options.pager).find(options.currentPage).filter('.' + options.currentClass).prevAll(':not(span):first').click();
+			} else if (events.which === 39) {
 				// right
-				$(o.pager).find(o.currentPage).filter('.' + o.currentClass).nextAll(':not(span):first').click();
+				$(options.pager).find(options.currentPage).filter('.' + options.currentClass).nextAll(':not(span):first').click();
 			}
 		});
 	}