new pager events - issue #153

Added "pagerInitialized" and "pageMoved" thanks to ViViDboarder

addons/pager/jquery.tablesorter.pager.js

@@ -1,6 +1,6 @@
 /*!
  * tablesorter pager plugin
- * updated 10/13/2012
+ * updated 10/15/2012
  */
 /*jshint browser:true, jquery:true */
 ;(function($) {
@@ -122,7 +122,7 @@
 				}
 			}
 			pagerArrows(c);
-			$(table).trigger('pagerComplete', c);
+			if (c.initialized) { $(table).trigger('pagerComplete', c); }
 		},
 
 		fixHeight = function(table, c) {
@@ -236,12 +236,16 @@
 					$b.html( tds ); // add tbody
 				}
 				c.temp.remove(); // remove loading icon
-				$t.trigger('update');
+				if (c.initialized) { $t.trigger('update'); }
 				c.totalRows = result[0] || 0;
 				c.totalPages = Math.ceil( c.totalRows / c.size );
 				updatePageDisplay(table, c);
 				fixHeight(table, c);
-				$t.trigger('pagerChange', c);
+				if (c.initialized) { $t.trigger('pagerChange', c); }
+			}
+			if (!c.initialized) {
+				c.initialized = true;
+				$(table).trigger('pagerInitialized', c);
 			}
 		},
 
@@ -272,7 +276,7 @@
 			s = ( c.page * c.size ),
 			e = ( s + c.size );
 			if ( l < 1 ) { return; } // empty table, abort!
-			$(table).trigger('pagerChange', c);
+			if (c.initialized) { $(table).trigger('pagerChange', c); }
 			if ( !c.removeRows ) {
 				hideRows(table, c);
 			} else {
@@ -328,8 +332,7 @@
 			} else {
 				renderTable(table, table.config.rowsCopy, c);
 			}
-
-			$(table).trigger('pageMoved', c);
+			if (c.initialized) { $(table).trigger('pageMoved', c); }
 		},
 
 		setPageSize = function(table, size, c) {
@@ -406,6 +409,8 @@
 				$t = $(table),
 				pager = $(c.container).addClass('tablesorter-pager').show(); // added in case the pager is reinitialized after being destroyed.
 				config.appender = $this.appender;
+				// clear initialized flag
+				c.initialized = false;
 				enablePager(table, c, false);
 				if ( typeof(c.ajaxUrl) === 'string' ) {
 					// ajax pager; interact with database
@@ -418,6 +423,7 @@
 					hideRowsSetup(table, c);
 				}
 
+				// update pager after filter widget completes
 				if ( $(table).hasClass('hasFilters') ) {
 					$(table).unbind('filterEnd.pager').bind('filterEnd.pager', function() {
 						c.page = 0;
@@ -472,6 +478,12 @@
 				.bind('update.pager', function(){
 					hideRows(table, c);
 				});
+
+				// pager initialized
+				if (!c.ajax) {
+					c.initialized = true;
+					$(table).trigger('pagerInitialized', c);
+				}
 			});
 		};
 

docs/example-pager.html

@@ -89,28 +89,29 @@
 
 	};
 
+	$("table")
+
 		// Initialize tablesorter
 		// ***********************
-	$("table")
 		.tablesorter({
 			theme: 'blue',
 			widthFixed: true,
 			widgets: ['zebra']
 		})
 
-		// initialize the pager plugin
-		// ****************************
-		.tablesorterPager(pagerOptions)
-
 		// bind to pager events
 		// *********************
-		.bind('pagerChange pagerComplete', function(e,c){
+		.bind('pagerChange pagerComplete pagerInitialized pageMoved', function(e, c){
 			var msg = '" event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
 				' page ' + (c.page + 1) + '/' + c.totalPages;
 			$('#display')
 				.append('<li>"' + e.type + msg + '</li>')
 				.find('li:first').remove();
-		});
+		})
+
+		// initialize the pager plugin
+		// ****************************
+		.tablesorterPager(pagerOptions);
 
 		// Add two new rows using the "addRows" method
 		// the "update" method doesn't work here because not all rows are

docs/index.html

@@ -78,7 +78,6 @@
 		<li>Extensibility via <a href="example-widgets.html">widget system</a></li>
 		<li>Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+</li>
 		<li>Small code size</li>
-
 	</ul>
 
 	<a id="Demo"></a>
@@ -2280,7 +2279,16 @@ or, directly add the search string to the filter input as follows:<pre class="js
 				<td><a href="example-triggers.html">Example</a></td>
 			</tr>
 
-			<tr id="pagerChange">
+		</tbody>
+
+		<!-- non-sorting tbody -->
+		<tbody class="tablesorter-infoOnly">
+			<tr><th colspan="5">Pager Events</th></tr>
+		</tbody>
+
+		<!-- Pager addon events -->
+		<tbody>
+			<tr id="pagerchange">
 				<td><a href="#" class="toggle2">pagerChange</a></td>
 				<td>This event fires when the pager plugin begins to render the table on the currently selected page. (v2.0.7).
 					<div class="collapsible">
@@ -2306,7 +2314,7 @@ or, directly add the search string to the filter input as follows:<pre class="js
 				<td><a href="example-pager.html">Example</a></td>
 			</tr>
 
-			<tr id="pagerComplete">
+			<tr id="pagercomplete">
 				<td><a href="#" class="toggle2">pagerComplete</a></td>
 				<td>This event fires when the pager plugin has completed its render of the table on the currently selected page. (v2.0.7).
 					<div class="collapsible">
@@ -2331,8 +2339,66 @@ or, directly add the search string to the filter input as follows:<pre class="js
 				</td>
 				<td><a href="example-pager.html">Example</a></td>
 			</tr>
+
+			<tr id="pagerinitialized">
+				<td><a href="#" class="toggle2">pagerInitialized</a></td>
+				<td>This event fires when the pager plugin has completed initialization.  <span class="tip"><em>New</em></span> v2.4.4.
+					<div class="collapsible">
+						<pre class="js">$(function(){
+
+  $("table")
+
+    // initialize the sorter
+    .tablesorter()
+
+    // bind to pager initialized event BEFORE calling the addon
+    .bind('pagerInitialized', function(e, c){
+      // c.totalPages contains the total number of pages
+      $('#display').html( e.type + " event triggered, now on page " + (c.page + 1) );
+    })
+
+    // initialize the pager plugin
+    .tablesorterPager({
+      container: $("#pager")
+    });
+
+});</pre></div>
+				</td>
+				<td><a href="example-pager.html">Example</a></td>
+			</tr>
+
+			<tr id="pagemoved">
+				<td><a href="#" class="toggle2">pageMoved</a></td>
+				<td>This event fires when the pager plugin begins to change to the selected page. <span class="tip"><em>New</em></span> v2.4.4.
+					<div class="collapsible">
+						This event may fire before the <code>pagerComplete</code> event when ajax processing is involved, or after the <code>pagerComplete</code> on normal use.
+						See <a href="https://github.com/Mottie/tablesorter/pull/153">issue #153</a>.
+						<pre class="js">$(function(){
+
+  // initialize the sorter
+  $("table")
+    .tablesorter()
+
+    // initialize the pager plugin
+    .tablesorterPager({
+      container: $("#pager")
+    })
+
+    // bind to pager events
+    .bind('pageMoved', function(e, c){
+      // c.totalPages contains the total number of pages
+      $('#display').html( e.type + " event triggered, now on page " + (c.page + 1) );
+    });
+
+});</pre></div>
+				</td>
+				<td><a href="example-pager.html">Example</a></td>
+			</tr>
+
+
 		</tbody>
 
+
 		<!-- non-sorting tbody -->
 		<tbody class="tablesorter-infoOnly">
 			<tr><th colspan="5">Widget Events</th></tr>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tablesorter",
-    "version": "2.4.3",
+    "version": "2.4.4",
     "title": "tablesorter",
     "author": {
         "name": "Christian Bach",