Skip to content

Commit

Permalink
Pager: add data-attribute override on output. See #1348
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mottie
Mottie committed Dec 30, 2016
1 parent 71a4ad9 commit 1b43b04
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 26 deletions.
10 changes: 7 additions & 3 deletions addons/pager/jquery.tablesorter.pager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@

updatePageDisplay = function(table, p, completed) {
if ( p.initializing ) { return; }
var s, t, $out, $el, indx, len, options,
var s, t, $out, $el, indx, len, options, output,
c = table.config,
namespace = c.namespace + 'pager',
sz = parsePageSize( p, p.size, 'get' ); // don't allow dividing by zero
Expand All @@ -196,8 +196,12 @@
if (typeof p.output === 'function') {
s = p.output(table, p);
} else {
output = $out
// get output template from data-pager-output or data-pager-output-filtered
.attr('data-pager-output' + (p.filteredRows < p.totalRows ? '-filtered' : '')) ||
p.output;
// form the output string (can now get a new output string from the server)
s = ( p.ajaxData && p.ajaxData.output ? p.ajaxData.output || p.output : p.output )
s = ( p.ajaxData && p.ajaxData.output ? p.ajaxData.output || output : output )
// {page} = one-based index; {page+#} = zero based index +/- value
.replace(/\{page([\-+]\d+)?\}/gi, function(m, n){
return p.totalPages ? p.page + (n ? parseInt(n, 10) : 1) : 0;
Expand Down Expand Up @@ -496,7 +500,7 @@
$h.find('.' + ts.css.headerIn).html( th[j] );
if (hsh && $sh.length) {
// add sticky header to container just in case it contains pager controls
p.$container = p.$container.add( wo.$sticky );
p.$container = p.$container.add( c.widgetOptions.$sticky );
$sh.eq(j).find('.' + ts.css.headerIn).html( th[j] );
}
}
Expand Down
16 changes: 9 additions & 7 deletions docs/example-pager.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
// In v2.27.7, this can be set as a function
// output: function(table, pager) { return 'page ' + pager.startRow + ' - ' + pager.endRow; }
output: '{startRow:input} to {endRow} ({totalRows})',
output: '{startRow:input} &ndash; {endRow} / {totalRows} rows',

// apply disabled classname (cssDisabled option) to the pager arrows when the rows
// are at either extreme is visible; default is true
Expand Down Expand Up @@ -116,7 +116,7 @@
.tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra']
widgets: ['zebra', 'filter']
})

// bind to pager events
Expand Down Expand Up @@ -239,6 +239,7 @@ <h3>Flexible client-side table sorting</h3>
<em>NOTE!</em> The following are not part of the original plugin:
</p>
<ul>
<li>In <span class="version updated">v2.28.4</span>, added <code>data-pager-output</code> and <code>data-pager-output-filtered</code> attributes which override the <code>output</code> option when set on the <code>pageDisplay</code> element.</li>
<li>In <span class="version updated">v2.26.0</span>, a page size of "all" instead of a specific number will be saved and used on reload. Also, ajax interaction will pass a size of "all" which may break current server methods on number of pages to return.</li>
<li>In <span class="version updated">v2.24.0</span>, a page size select option with a value of "all" will display all rows - not recommended for ajax interactions!</li>
<li>In <span class="version updated">v2.23.0</span>, the following methods were changed due to issues with unique namespacing.
Expand Down Expand Up @@ -271,14 +272,14 @@ <h1>Demo</h1>
<div class="pager">
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<!-- the "pagedisplay" can be any element, including an input -->
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows"></span>
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="all">All Rows</option>
</select>
<select class="gotoPage" title="Select page number"></select>
Expand Down Expand Up @@ -366,14 +367,14 @@ <h1>Demo</h1>
<div class="pager">
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<!-- the "pagedisplay" can be any element, including an input -->
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows"></span>
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="all">All Rows</option>
</select>
<select class="gotoPage" title="Select page number"></select>
Expand Down Expand Up @@ -440,7 +441,8 @@ <h1>HTML</h1>
&lt;form&gt;
&lt;img src=&quot;first.png&quot; class=&quot;first&quot;/&gt;
&lt;img src=&quot;prev.png&quot; class=&quot;prev&quot;/&gt;
&lt;span class=&quot;pagedisplay&quot;&gt;&lt;/span&gt; &lt;!-- this can be any element, including an input --&gt;
&lt;!-- the &quot;pagedisplay&quot; can be any element, including an input --&gt;
&lt;span class=&quot;pagedisplay&quot; data-pager-output-filtered=&quot;{startRow:input} &amp;ndash; {endRow} / {filteredRows} of {totalRows} total rows&quot;&gt;&lt;/span&gt;
&lt;img src=&quot;next.png&quot; class=&quot;next&quot;/&gt;
&lt;img src=&quot;last.png&quot; class=&quot;last&quot;/&gt;
&lt;select class=&quot;pagesize&quot;&gt;
Expand Down
18 changes: 9 additions & 9 deletions docs/example-widget-pager.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@
.tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'pager'],
widgets: ['zebra', 'filter', 'pager'],

widgetOptions: {

// output default: '{page}/{totalPages}'
// possible variables: {size}, {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
pager_output: '{startRow:input} to {endRow} of {totalRows} rows', // '{page}/{totalPages}'
pager_output: '{startRow:input} &ndash; {endRow} / {totalRows} rows', // '{page}/{totalPages}'

// apply disabled classname to the pager arrows when the rows at either extreme is visible
pager_updateArrows: true,
Expand Down Expand Up @@ -231,6 +231,7 @@ <h3>Flexible client-side table sorting</h3>
<em>NOTE!</em>
</p>
<ul>
<li>In <span class="version updated">v2.28.4</span>, added <code>data-pager-output</code> and <code>data-pager-output-filtered</code> attributes which override the <code>output</code> option when set on the <code>pageDisplay</code> element.</li>
<li>In <span class="version updated">v2.26.0</span>, a page size of "all" instead of a specific number will be saved and used on reload. Also, ajax interaction will pass a size of "all" which may break current server methods on number of pages to return.</li>
<li>In <span class="version updated">v2.25.4</span>, updated example to use <code>applyWidgetId</code> to re-apply the pager widget after being destroyed.</li>
<li>In <span class="version updated">v2.24.0</span>, a page size select option with a value of "all" will display all rows - not recommended for ajax interactions!</li>
Expand Down Expand Up @@ -267,14 +268,14 @@ <h1>Demo</h1>
<div class="pager">
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<!-- the "pagedisplay" can be any element, including an input -->
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows"></span>
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="all">All Rows</option>
</select>
<select class="gotoPage" title="Select page number"></select>
Expand Down Expand Up @@ -362,14 +363,14 @@ <h1>Demo</h1>
<div class="pager">
<img src="../addons/pager/icons/first.png" class="first" alt="First" />
<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<!-- the "pagedisplay" can be any element, including an input -->
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows"></span>
<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="all">All Rows</option>
</select>
<select class="gotoPage" title="Select page number"></select>
Expand Down Expand Up @@ -448,7 +449,8 @@ <h1>HTML</h1>
&lt;form&gt;
&lt;img src=&quot;first.png&quot; class=&quot;first&quot;/&gt;
&lt;img src=&quot;prev.png&quot; class=&quot;prev&quot;/&gt;
&lt;span class=&quot;pagedisplay&quot;&gt;&lt;/span&gt; &lt;!-- this can be any element, including an input --&gt;
&lt;!-- the &quot;pagedisplay&quot; can be any element, including an input --&gt;
&lt;span class=&quot;pagedisplay&quot; data-pager-output-filtered=&quot;{startRow:input} &amp;ndash; {endRow} / {filteredRows} of {totalRows} total rows&quot;&gt;&lt;/span&gt;
&lt;img src=&quot;next.png&quot; class=&quot;next&quot;/&gt;
&lt;img src=&quot;last.png&quot; class=&quot;last&quot;/&gt;
&lt;select class=&quot;pagesize&quot;&gt;
Expand All @@ -469,8 +471,6 @@ <h1>Pager Change Log</h1>
<li>Moved to <a href="https://github.com/Mottie/tablesorter/wiki/Changes">wiki pages</a>.</li>
</ul>



</div>

</body>
Expand Down
12 changes: 8 additions & 4 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -493,9 +493,9 @@ <h4 id="extras">Plugins / Widgets<br>
<br><br>
</li>

<li>Pager plugin (<a href="example-pager.html">basic</a> &amp; <a href="example-pager-ajax.html">ajax</a> demos; <span class="version updated">v2.28.0</span>).</li>
<li>Pager plugin (<a href="example-pager.html">basic</a> &amp; <a href="example-pager-ajax.html">ajax</a> demos; <span class="version updated">v2.28.4</span>).</li>
<li>
Pager widget (<a href="example-widget-pager.html">basic</a> &amp; <a href="example-widget-pager-ajax.html">ajax</a> demos) (<span class="version">v2.12</span>; <span class="version updated">v2.28.0</span>).<br>
Pager widget (<a href="example-widget-pager.html">basic</a> &amp; <a href="example-widget-pager-ajax.html">ajax</a> demos) (<span class="version">v2.12</span>; <span class="version updated">v2.28.4</span>).<br>
<br>
</li>

Expand Down Expand Up @@ -4523,11 +4523,15 @@ <h3><a href="#">Array (rows as an array of arrays)</a></h3>
<td><a href="#" class="permalink">output</a></td>
<td>String</td>
<td>&quot;{page}/<wbr>{totalPages}&quot;</td>
<td>This option allows you to format the output display which can show the current page, total pages, filtered pages, current start and end rows, total rows and filtered rows (v2.0.9; <span class="version">v2.27.7</span>).
<td>This option allows you to format the output display which can show the current page, total pages, filtered pages, current start and end rows, total rows and filtered rows (v2.0.9; <span class="version updated">v2.28.4</span>).
<div class="collapsible">
<br>
<span class="label label-info">Note</span> The pager widget equivalent option is within the <code>widgetOptions</code> and accessed via <code>widgetOptions.pager_output</code><br>
<br>
<p>
In <span class="version updated">v2.28.4</span>
<p>The <a href="#pager-csspagedisplay">output</a> element can now include two data-attributes, <code>data-pager-output</code> and <code>data-pager-output-filtered</code> which override this setting <em>string</em> when set.</p>
<pre class="prettyprint lang-html">&lt;span class=&quot;pagedisplay&quot; data-pager-output=&quot;{startRow:input} &ndash; {endRow} / {totalRows} total rows&quot; data-pager-output-filtered=&quot;{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows&quot;&gt;&lt;/span&gt;</pre>
<p>It will not override this option if set as a function, or if a specific <a href="#object">output is returned</a> from the server through ajax.</p>
In <span class="version updated">v2.27.7</span>, this option can also be set as a function
<pre class="prettyprint lang-js">output: function(table, pager) {
return 'page ' + pager.startRow + ' - ' + pager.endRow;
Expand Down
10 changes: 7 additions & 3 deletions js/widgets/widget-pager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -439,7 +439,7 @@

updatePageDisplay: function( c, completed ) {
if ( c.pager && c.pager.initializing ) { return; }
var s, t, $out, options, indx, len,
var s, t, $out, options, indx, len, output,
table = c.table,
wo = c.widgetOptions,
p = c.pager,
Expand Down Expand Up @@ -468,8 +468,12 @@
if ( typeof wo.pager_output === 'function' ) {
s = wo.pager_output( table, p );
} else {
output = $out
// get output template from data-pager-output or data-pager-output-filtered
.attr('data-pager-output' + (p.filteredRows < p.totalRows ? '-filtered' : '')) ||
wo.pager_output;
// form the output string (can now get a new output string from the server)
s = ( p.ajaxData && p.ajaxData.output ? p.ajaxData.output || wo.pager_output : wo.pager_output )
s = ( p.ajaxData && p.ajaxData.output ? p.ajaxData.output || output : output )
// {page} = one-based index; {page+#} = zero based index +/- value
.replace( /\{page([\-+]\d+)?\}/gi, function( m, n ) {
return p.totalPages ? p.page + ( n ? parseInt( n, 10 ) : 1 ) : 0;
Expand Down Expand Up @@ -686,7 +690,7 @@
hideRowsSetup: function( c ) {
var p = c.pager,
namespace = c.namespace + 'pager',
$el = p.$container.find( wo.pager_selectors.pageSize ),
$el = p.$container.find( c.widgetOptions.pager_selectors.pageSize ),
size = $el.val();
p.size = tsp.parsePageSize( c, size, 'get' );
$el.val( p.size );
Expand Down

0 comments on commit 1b43b04

Please sign in to comment.