From 8921894717305a0802ee6dc13fa7b3753b756e72 Mon Sep 17 00:00:00 2001 From: Mottie Date: Mon, 26 Jan 2015 19:13:41 -0600 Subject: [PATCH] Pager: add cacheIndex variable & update docs Added a pager variable section --- addons/pager/jquery.tablesorter.pager.js | 8 + docs/example-widget-bootstrap-theme.html | 12 +- docs/index.html | 206 +++++++++++++++++++++++ js/widgets/widget-pager.js | 8 + 4 files changed, 230 insertions(+), 4 deletions(-) diff --git a/addons/pager/jquery.tablesorter.pager.js b/addons/pager/jquery.tablesorter.pager.js index fe87b89c..e509578b 100644 --- a/addons/pager/jquery.tablesorter.pager.js +++ b/addons/pager/jquery.tablesorter.pager.js @@ -325,7 +325,9 @@ s = ( p.page * p.size ), e = s + p.size, f = c.widgetOptions && c.widgetOptions.filter_filteredRow || 'filtered', + last = 0, // for cache indexing j = 0; // size counter + p.cacheIndex = []; for ( i = 0; i < l; i++ ){ if ( !rows[i].className.match(f) ) { if (j === s && rows[i].className.match(c.cssChildRow)) { @@ -333,6 +335,10 @@ rows[i].style.display = 'none'; } else { rows[i].style.display = ( j >= s && j < e ) ? '' : 'none'; + if (last !== j && j >= s && j < e) { + p.cacheIndex.push(i); + last = j; + } // don't count child rows j += rows[i].className.match(c.cssChildRow + '|' + c.selectorRemove.slice(1)) && !p.countChildRows ? 0 : 1; if ( j === e && rows[i].style.display !== 'none' && rows[i].className.match(ts.css.cssHasChild) ) { @@ -586,6 +592,7 @@ // lets not render the table more than once moveToLastPage(table, p); } + p.cacheIndex = []; p.isDisabled = false; // needed because sorting will change the page and re-enable the pager if (p.initialized) { $t.trigger('pagerChange', p); } @@ -604,6 +611,7 @@ count++; if (count > s && added <= e) { added++; + p.cacheIndex.push(index); $tb.append(rows[index]); } } diff --git a/docs/example-widget-bootstrap-theme.html b/docs/example-widget-bootstrap-theme.html index 41724374..ec5d7c52 100644 --- a/docs/example-widget-bootstrap-theme.html +++ b/docs/example-widget-bootstrap-theme.html @@ -291,13 +291,17 @@ 
<!-- Bootstrap stylesheet -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
-
 <!-- bootstrap widget theme -->
-<link rel="stylesheet" href="/tablesorter/css/theme.bootstrap.css">
+<link rel="stylesheet" href="css/theme.bootstrap.css">
+
 <!-- tablesorter plugin -->
-<script src="../js/jquery.tablesorter.js"></script>
+<script src="js/jquery.tablesorter.js"></script>
 <!-- tablesorter widget file - loaded after the plugin -->
-<script src="../js/jquery.tablesorter.widgets.js"></script>
+<script src="js/jquery.tablesorter.widgets.js"></script> + +<!-- pager plugin --> +<link rel="stylesheet" href="css/jquery.tablesorter.pager.css"> +<script src="js/jquery.tablesorter.pager.js"></script>

Javascript

diff --git a/docs/index.html b/docs/index.html index 64690af1..4ec5f05b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5562,6 +5562,7 @@ var wo = $('#mytable').data('tablesorter').widgetOptions; + jQuery Object @@ -5643,6 +5644,211 @@ var wo = $('#mytable').data('tablesorter').widgetOptions; + + + + + + + + Access the pager options† (p) using any of these methods: +
+
+ 
// pure js, get the first table (zero index)
+var p = document.getElementsByTagName('table')[0].config.pager;
+// or by table ID
+var p = document.getElementById('mytable').config.pager;
+
+// using jQuery, get first table (zero index)
+var p = $('table')[0].config.pager;
+// or from the jQuery data
+var p = $('#mytable').data('tablesorter').pager;
+
+† These methods are the same for both the pager addon and the pager widget. +

+*NOTE* This pager variable also contains all of the default pager option settings. +

+*NOTE* When using the pager widget, changing a value within the widgetOptions for the pager may not update the pager as expected. The pager widget uses most of the values within config.pager instead of the pager widgetOptions after initialization. +
+ + + + + + + + + + jQuery Object + Contains a jQuery object pointing to a pager block(s). +
+
+ The table.config.pager.$container variable is targeted using the pager container option and will have a class name of "tablesorter-pager" applied.
+
+ The container(s) may include the pager navigation arrows, page size selector, page selector and/or output block; the contents are completely customizable and all components are optional. +
+ + + + + + + jQuery Object + Contains a jQuery object pointing to an empty select within the pager block(s). +
+
+ The table.config.pager.$goto variable is targeted using the pager cssGoto option.
+
+ The contents of this select element are dynamically updated if the page size is changed or if the table gets filtered. +
+ + + + + + + jQuery Object + Contains a jQuery object pointing to a select with the desired page size settings already in place. +
+
+ The table.config.pager.$size variable is targeted using the pager cssPageSize option.
+
+ The contents of this select element must be set up with the desired page size settings before initializing tablesorter.
+
+ Also, because Internet Explorer does not appear to get the select value from the option text, please include a value attribute with all options. For example: + 
<select class="pagesize">
+  <option value="10">10</option>
+  <option value="20">20</option>
+  <option value="30">30</option>
+  <option value="40">40</option>
+</select>
+
+ + + + + + + Array + Contains an array of zero-based row indexes of rows that currently displayed within the table. +
+
+ For example, if you want to get the parsed values for the rows currently displayed within the pager, use the table.config.pager.cacheIndex variable as follows: + 
var c = $('table')[0].config,
+	p = c.pager,
+	// the cache may not have a zero index if there are any "info-only" tbodies above the main tbody
+	cache = c.cache[0].normalized,
+	cachedValues = [];
+$.each( p.cacheIndex, function(i, v) {
+	// cache[v] will be an array of parsed values for each cell in selected row
+	cachedValues.push( cache[v] );
+});
+ the p.cacheIndex variable get updated whenever the table is sorted, filtered or the pager changes pages or page size. +
+ + + + + + + Numeric + Contains a one-based index of the first row visible in the pager. +
+
+ The {startRow} tag in the pager output option is replaced by this value; and it does not correspond to the row index within the cache. +
+ + + + + + + Numeric + Contains a one-based index of the last row visible in the pager. +
+
+ The {endRow} tag in the pager output option is replaced by this value; and it does not correspond to the row index within the cache. +
+ + + + + + + Numeric + Contains the page count, determined by the page size setting, after the table is filtered. It equals the totalPages if no filters are applied. +
+
+ The {filteredPages} tag in the pager output option is replaced by this value. +
+ + + + + + + Numeric + Contains the number of rows accessible by the pager after the table is filtered. It equals the totalRows if no filters are applied. +
+
+ The {filteredRows} tag in the pager output option is replaced by this value. +
+ + + + + + + Numeric + Contains a one-based index of the current page visible in the pager. +
+
+ The {page} tag in the pager output option is replaced by this value.
+
+ Initially, this value is set by either the pager page option or from local storage if the savePages option is true. It is then updated by user interaction with the page selector (targetted by the cssGoto option or programmically by the pageSet or pageAndSize method. +
+ + + + + + + Numeric + Contains the currently selected page size. +
+
+ Initially, this value is set by either the pager size option or from local storage if the savePages option is true. It is then updated by user interaction with the size selector (targetted by the cssPageSize option or programmically by the pageSize or pageAndSize method. +
+ + + + + + + Numeric + Contains the total page count as determined by the page size setting. +
+
+ The {totalPages} tag in the pager output option is replaced by this value. +
+ + + + + + + Numeric + Contains the total number of rows within the table +
+
+ The {totalRows} tag in the pager output option is replaced by this value. +
+ + + + + +
diff --git a/js/widgets/widget-pager.js b/js/widgets/widget-pager.js index e9b8b823..83d0f98b 100644 --- a/js/widgets/widget-pager.js +++ b/js/widgets/widget-pager.js @@ -564,7 +564,9 @@ tsp = ts.pager = { s = ( p.page * p.size ), e = s + p.size, f = wo && wo.filter_filteredRow || 'filtered', + last = 0, // for cache indexing j = 0; // size counter + p.cacheIndex = []; for ( i = 0; i < l; i++ ){ if ( !rows[i].className.match(f) ) { if (j === s && rows[i].className.match(c.cssChildRow)) { @@ -572,6 +574,10 @@ tsp = ts.pager = { rows[i].style.display = 'none'; } else { rows[i].style.display = ( j >= s && j < e ) ? '' : 'none'; + if ( last !== j && j >= s && j < e ) { + p.cacheIndex.push(i); + last = j; + } // don't count child rows j += rows[i].className.match(c.cssChildRow + '|' + c.selectorRemove.slice(1)) && !wo.pager_countChildRows ? 0 : 1; if ( j === e && rows[i].style.display !== 'none' && rows[i].className.match(ts.css.cssHasChild) ) { @@ -815,6 +821,7 @@ tsp = ts.pager = { // lets not render the table more than once return tsp.moveToLastPage(table, p); } + p.cacheIndex = []; p.isDisabled = false; // needed because sorting will change the page and re-enable the pager if (p.initialized) { c.$table.trigger('pagerChange', c); } if ( !wo.pager_removeRows ) { @@ -832,6 +839,7 @@ tsp = ts.pager = { count++; if (count > s && added <= e) { added++; + p.cacheIndex.push(index); $tb.append(rows[index]); } }