Pager: Add output function support to pager widget. See #1283

This commit is contained in:
Rob Garrison 2016-09-09 06:30:00 -05:00
parent 85958ded95
commit 1214f2bfdd
No known key found for this signature in database
GPG Key ID: A6B138ABD8A3FF4A
6 changed files with 42 additions and 30 deletions

View File

@ -182,7 +182,7 @@
p.startRow = (t) ? sz * p.page + 1 : (p.filteredRows === 0 ? 0 : sz * p.page + 1);
p.endRow = Math.min( p.filteredRows, p.totalRows, sz * ( p.page + 1 ) );
$out = p.$container.find(p.cssPageDisplay);
// Output param can be callback for custom rendering or string
if (typeof p.output === 'function') {
s = p.output(table, p);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -56,6 +56,8 @@
// output string - default is '{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
// 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})',
// apply disabled classname (cssDisabled option) to the pager arrows when the rows

View File

@ -491,9 +491,9 @@
<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.27.3</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.27.7</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.27.3</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.27.7</span>).<br>
<br>
</li>
@ -4507,11 +4507,15 @@ $('table').trigger('search', false);</pre></div>
<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.17.6</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">v2.27.7</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>
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;
}</pre>
This option replaced the original <code>separator</code> option, which only separated the page number from the total number of pages. The formatted output from this option is placed inside the information block targeted by the <code>cssPageDisplay</code> option.<br>
<br>
Use it as follows:

View File

@ -464,30 +464,36 @@
p.startRow = t ? sz * p.page + 1 : ( p.filteredRows === 0 ? 0 : sz * p.page + 1 );
p.endRow = Math.min( p.filteredRows, p.totalRows, sz * ( p.page + 1 ) );
$out = p.$container.find( wo.pager_selectors.pageDisplay );
// 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 )
// {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;
})
// {totalPages}, {extra}, {extra:0} (array) or {extra : key} (object)
.replace( /\{\w+(\s*:\s*\w+)?\}/gi, function( m ) {
var len, indx,
str = m.replace( /[{}\s]/g, '' ),
extra = str.split( ':' ),
data = p.ajaxData,
// return zero for default page/row numbers
deflt = /(rows?|pages?)$/i.test( str ) ? 0 : '';
if ( /(startRow|page)/.test( extra[ 0 ] ) && extra[ 1 ] === 'input' ) {
len = ( '' + ( extra[ 0 ] === 'page' ? p.totalPages : p.totalRows ) ).length;
indx = extra[ 0 ] === 'page' ? p.page + 1 : p.startRow;
return '<input type="text" class="ts-' + extra[ 0 ] +
'" style="max-width:' + len + 'em" value="' + indx + '"/>';
}
return extra.length > 1 && data && data[ extra[ 0 ] ] ?
data[ extra[ 0 ] ][ extra[ 1 ] ] :
p[ str ] || ( data ? data[ str ] : deflt ) || deflt;
});
// Output param can be callback for custom rendering or string
if ( typeof wo.pager_output === 'function' ) {
s = wo.pager_output( table, p );
} else {
// 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 )
// {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;
})
// {totalPages}, {extra}, {extra:0} (array) or {extra : key} (object)
.replace( /\{\w+(\s*:\s*\w+)?\}/gi, function( m ) {
var len, indx,
str = m.replace( /[{}\s]/g, '' ),
extra = str.split( ':' ),
data = p.ajaxData,
// return zero for default page/row numbers
deflt = /(rows?|pages?)$/i.test( str ) ? 0 : '';
if ( /(startRow|page)/.test( extra[ 0 ] ) && extra[ 1 ] === 'input' ) {
len = ( '' + ( extra[ 0 ] === 'page' ? p.totalPages : p.totalRows ) ).length;
indx = extra[ 0 ] === 'page' ? p.page + 1 : p.startRow;
return '<input type="text" class="ts-' + extra[ 0 ] +
'" style="max-width:' + len + 'em" value="' + indx + '"/>';
}
return extra.length > 1 && data && data[ extra[ 0 ] ] ?
data[ extra[ 0 ] ][ extra[ 1 ] ] :
p[ str ] || ( data ? data[ str ] : deflt ) || deflt;
});
}
if ( p.$goto.length ) {
t = '';
options = tsp.buildPageSelect( c, p );