library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Pager: output can now add user modifiable startRow or page inputs

Browse Source
This commit is contained in:
Mottie 2014-07-22 07:42:15 -05:00
parent f1ab20f65c
commit 39e91a5733
5 changed files with 50 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
addons/pager/jquery.tablesorter.pager.js
View File

@ -129,7 +129,7 @@
}, },
updatePageDisplay = function(table, p, completed) { updatePageDisplay = function(table, p, completed) {
var i, pg, s, out, regex, var i, pg, s, $out, regex,
c = table.config, c = table.config,
f = c.$table.hasClass('hasFilters'), f = c.$table.hasClass('hasFilters'),
t = [], t = [],
@ -159,7 +159,7 @@
p.startRow = (t) ? 1 : (p.filteredRows === 0 ? 0 : p.size * p.page + 1); p.startRow = (t) ? 1 : (p.filteredRows === 0 ? 0 : p.size * p.page + 1);
p.page = (t) ? 0 : p.page; p.page = (t) ? 0 : p.page;
p.endRow = Math.min( p.filteredRows, p.totalRows, p.size * ( p.page + 1 ) ); p.endRow = Math.min( p.filteredRows, p.totalRows, p.size * ( p.page + 1 ) );
out = p.$container.find(p.cssPageDisplay); $out = p.$container.find(p.cssPageDisplay);
// form the output string (can now get a new output string from the server) // 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 || p.output : p.output )
// {page} = one-based index; {page+#} = zero based index +/- value // {page} = one-based index; {page+#} = zero based index +/- value
@ -168,15 +168,21 @@
}) })
// {totalPages}, {extra}, {extra:0} (array) or {extra : key} (object) // {totalPages}, {extra}, {extra:0} (array) or {extra : key} (object)
.replace(/\{\w+(\s*:\s*\w+)?\}/gi, function(m){ .replace(/\{\w+(\s*:\s*\w+)?\}/gi, function(m){
var str = m.replace(/[{}\s]/g,''), var len, indx,
str = m.replace(/[{}\s]/g,''),
extra = str.split(':'), extra = str.split(':'),
data = p.ajaxData, data = p.ajaxData,
// return zero for default page/row numbers // return zero for default page/row numbers
deflt = /(rows?|pages?)$/i.test(str) ? 0 : ''; 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; return extra.length > 1 && data && data[extra[0]] ? data[extra[0]][extra[1]] : p[str] || (data ? data[str] : deflt) || deflt;
}); });
if (out.length) { if ($out.length) {
out[ (out[0].tagName === 'INPUT') ? 'val' : 'html' ](s); $out[ ($out[0].tagName === 'INPUT') ? 'val' : 'html' ](s);
if ( p.$goto.length ) { if ( p.$goto.length ) {
t = ''; t = '';
pg = Math.min( p.totalPages, p.filteredPages ); pg = Math.min( p.totalPages, p.filteredPages );
@ -185,6 +191,12 @@
} }
p.$goto.html(t).val( p.page + 1 ); p.$goto.html(t).val( p.page + 1 );
} }
// rebind startRow/page inputs
$out.find('.ts-startRow, .ts-page').unbind('change').bind('change', function(){
var v = $(this).val(),
pg = $(this).hasClass('ts-startRow') ? Math.floor( v/p.size ) + 1 : v;
c.$table.trigger('pageSet.pager', [ pg ]);
});
} }
} }
pagerArrows(p); pagerArrows(p);
@ -546,7 +558,7 @@
} }
} }
// disable size selector // disable size selector
p.$size.add(p.$goto).each(function(){ p.$size.add(p.$goto).add(p.$container.find('.ts-startRow, .ts-page')).each(function(){
$(this).attr('aria-disabled', 'true').addClass(p.cssDisabled)[0].disabled = true; $(this).attr('aria-disabled', 'true').addClass(p.cssDisabled)[0].disabled = true;
}); });
}, },
@ -665,7 +677,10 @@
enablePager = function(table, p, triggered){ enablePager = function(table, p, triggered){
var info, var info,
c = table.config; c = table.config;
p.$size.add(p.$goto).removeClass(p.cssDisabled).removeAttr('disabled').attr('aria-disabled', 'false'); p.$size.add(p.$goto).add(p.$container.find('.ts-startRow, .ts-page'))
.removeClass(p.cssDisabled)
.removeAttr('disabled')
.attr('aria-disabled', 'false');
p.isDisabled = false; p.isDisabled = false;
p.page = $.data(table, 'pagerLastPage') || p.page || 0; p.page = $.data(table, 'pagerLastPage') || p.page || 0;
p.size = $.data(table, 'pagerLastSize') || parseInt(p.$size.find('option[selected]').val(), 10) || p.size || 10; p.size = $.data(table, 'pagerLastSize') || parseInt(p.$size.find('option[selected]').val(), 10) || p.size || 10;

4
docs/example-pager.html
View File

@ -49,7 +49,8 @@
// output string - default is '{page}/{totalPages}' // output string - default is '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows} // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
output: '{startRow} to {endRow} ({totalRows})', // also {page:input} & {startRow:input} will add a modifiable input in place of the value
output: '{startRow:input} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true // apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
updateArrows: true, updateArrows: true,
@ -197,6 +198,7 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> The following are not part of the original plugin: <em>NOTE!</em> The following are not part of the original plugin:
<ul> <ul>
<li>In <span class="version">v2.17.6</span>, added <code>{startRow:input}</code> and <code>{page:input}</code> variables to the <code>output</code> option.</li>
<li>This pager plugin can be applied to the original tablesorter, but there is one exception - setting the <code>removeRows</code> option to false will break the sort.</li> <li>This pager plugin can be applied to the original tablesorter, but there is one exception - setting the <code>removeRows</code> option to false will break the sort.</li>
<li>There have been lots of changes made in version 2.1, please check out the <a href="https://github.com/Mottie/tablesorter/wiki/Changes">change log</a>.</li> <li>There have been lots of changes made in version 2.1, please check out the <a href="https://github.com/Mottie/tablesorter/wiki/Changes">change log</a>.</li>
<li>In <span class="version">v2.11</span>, the <code>savePages</code> option was added to saves the current page size and number (requires storage script).</li> <li>In <span class="version">v2.11</span>, the <code>savePages</code> option was added to saves the current page size and number (requires storage script).</li>

4
docs/example-widget-pager.html
View File

@ -37,7 +37,8 @@
// output default: '{page}/{totalPages}' // output default: '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows} // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
pager_output: '{startRow} to {endRow} of {totalRows} rows', // '{page}/{totalPages}' // 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}'
// apply disabled classname to the pager arrows when the rows at either extreme is visible // apply disabled classname to the pager arrows when the rows at either extreme is visible
pager_updateArrows: true, pager_updateArrows: true,
@ -225,6 +226,7 @@
<li>See the Javascript code below for a full example.</li> <li>See the Javascript code below for a full example.</li>
</ul> </ul>
</li> </li>
<li>In <span class="version">v2.17.6</span>, added <code>{startRow:input}</code> and <code>{page:input}</code> variables to the <code>output</code> option.</li>
</ul> </ul>
<p> <p>

7
docs/index.html
View File

@ -1864,7 +1864,8 @@ $(function(){
<tbody> <tbody>
<tr><td>30</td><td>columns</td><td>v1.2.6</td><td></td></tr> <tr><td>30</td><td>columns</td><td>v1.2.6</td><td></td></tr>
<tr><td>50</td><td>filter</td><td>v1.4.3</td><td>1.4.3 (nextUntil &amp; delegate)</td></tr> <tr><td>50</td><td>filter</td><td>v1.4.3</td><td>1.4.3 (nextUntil &amp; delegate)</td></tr>
<tr><td>Last</td><td>pager</td><td>v1.2.6</td><td></td></tr> <tr><td>Last</td><td>pager plugin</td><td>v1.2.6</td><td></td></tr>
<tr><td>55</td><td>pager widget</td><td>v1.7</td><td>1.7 (on)</td></tr>
<tr><td>40</td><td>resizable</td><td>v1.4.1*</td><td>1.4 (isEmptyObject); 1.4.1 (parseJSON)*</td></tr> <tr><td>40</td><td>resizable</td><td>v1.4.1*</td><td>1.4 (isEmptyObject); 1.4.1 (parseJSON)*</td></tr>
<tr><td>20</td><td>saveSort</td><td>v1.4.1</td><td>1.4.1 (parseJSON)*</td></tr> <tr><td>20</td><td>saveSort</td><td>v1.4.1</td><td>1.4.1 (parseJSON)*</td></tr>
<tr><td>60</td><td>stickyHeaders</td><td>v1.2.6</td><td></td></tr> <tr><td>60</td><td>stickyHeaders</td><td>v1.2.6</td><td></td></tr>
@ -3463,7 +3464,7 @@ $.extend($.tablesorter.themes.jui, {
<td><a href="#" class="permalink">output</a></td> <td><a href="#" class="permalink">output</a></td>
<td>String</td> <td>String</td>
<td>&quot;{page}/{totalPages}&quot;</td> <td>&quot;{page}/{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). <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>).
<div class="collapsible"> <div class="collapsible">
<br> <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> <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>
@ -3485,9 +3486,11 @@ $.extend($.tablesorter.themes.jui, {
</thead> </thead>
<tbody> <tbody>
<tr><td><code>{page}</code></td><td>The current pager page</td></tr> <tr><td><code>{page}</code></td><td>The current pager page</td></tr>
<tr><td><code>{page:input}</code></td><td>The current pager page within an input (<span class="version">v2.17.6</span>)</td></tr>
<tr><td><code>{totalPages}</code></td><td>Total number of pager pages</td></tr> <tr><td><code>{totalPages}</code></td><td>Total number of pager pages</td></tr>
<tr><td><code>{filteredPages}</code></td><td>Total number of pages left after being filtered</td></tr> <tr><td><code>{filteredPages}</code></td><td>Total number of pages left after being filtered</td></tr>
<tr><td><code>{startRow}</code></td><td>Starting row number currently displayed</td></tr> <tr><td><code>{startRow}</code></td><td>Starting row number currently displayed</td></tr>
<tr><td><code>{startRow:input}</code></td><td>Starting row number currently displayed within an input (<span class="version">v2.17.6</span>)</td></tr>
<tr><td><code>{endRow}</code></td><td>Ending row number currently displayed</td></tr> <tr><td><code>{endRow}</code></td><td>Ending row number currently displayed</td></tr>
<tr><td><code>{filteredRows}</code></td><td>Total number of rows left after being filtered</td></tr> <tr><td><code>{filteredRows}</code></td><td>Total number of rows left after being filtered</td></tr>
<tr><td><code>{totalRows}</code></td><td>Total number of rows</td></tr> <tr><td><code>{totalRows}</code></td><td>Total number of rows</td></tr>

22
js/widgets/widget-pager.js
View File

@ -336,7 +336,7 @@ tsp = ts.pager = {
}, },
updatePageDisplay: function(table, c, completed) { updatePageDisplay: function(table, c, completed) {
var i, pg, s, out, regex, var i, pg, s, $out, regex,
wo = c.widgetOptions, wo = c.widgetOptions,
p = c.pager, p = c.pager,
f = c.$table.hasClass('hasFilters'), f = c.$table.hasClass('hasFilters'),
@ -368,7 +368,7 @@ tsp = ts.pager = {
p.startRow = (t) ? 1 : (p.filteredRows === 0 ? 0 : p.size * p.page + 1); p.startRow = (t) ? 1 : (p.filteredRows === 0 ? 0 : p.size * p.page + 1);
p.page = (t) ? 0 : p.page; p.page = (t) ? 0 : p.page;
p.endRow = Math.min( p.filteredRows, p.totalRows, p.size * ( p.page + 1 ) ); p.endRow = Math.min( p.filteredRows, p.totalRows, p.size * ( p.page + 1 ) );
out = p.$container.find(wo.pager_selectors.pageDisplay); $out = p.$container.find(wo.pager_selectors.pageDisplay);
// form the output string (can now get a new output string from the server) // 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 || wo.pager_output : wo.pager_output )
// {page} = one-based index; {page+#} = zero based index +/- value // {page} = one-based index; {page+#} = zero based index +/- value
@ -377,15 +377,21 @@ tsp = ts.pager = {
}) })
// {totalPages}, {extra}, {extra:0} (array) or {extra : key} (object) // {totalPages}, {extra}, {extra:0} (array) or {extra : key} (object)
.replace(/\{\w+(\s*:\s*\w+)?\}/gi, function(m){ .replace(/\{\w+(\s*:\s*\w+)?\}/gi, function(m){
var str = m.replace(/[{}\s]/g,''), var len, indx,
str = m.replace(/[{}\s]/g,''),
extra = str.split(':'), extra = str.split(':'),
data = p.ajaxData, data = p.ajaxData,
// return zero for default page/row numbers // return zero for default page/row numbers
deflt = /(rows?|pages?)$/i.test(str) ? 0 : ''; 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; return extra.length > 1 && data && data[extra[0]] ? data[extra[0]][extra[1]] : p[str] || (data ? data[str] : deflt) || deflt;
}); });
if (out.length) { if ($out.length) {
out[ (out[0].tagName === 'INPUT') ? 'val' : 'html' ](s); $out[ ($out[0].tagName === 'INPUT') ? 'val' : 'html' ](s);
if ( p.$goto.length ) { if ( p.$goto.length ) {
t = ''; t = '';
pg = Math.min( p.totalPages, p.filteredPages ); pg = Math.min( p.totalPages, p.filteredPages );
@ -394,6 +400,12 @@ tsp = ts.pager = {
} }
p.$goto.html(t).val( p.page + 1 ); p.$goto.html(t).val( p.page + 1 );
} }
// rebind startRow/page inputs
$out.find('.ts-startRow, .ts-page').unbind('change').bind('change', function(){
var v = $(this).val(),
pg = $(this).hasClass('ts-startRow') ? Math.floor( v/p.size ) + 1 : v;
c.$table.trigger('pageSet.pager', [ pg ]);
});
} }
} }
tsp.pagerArrows(c); tsp.pagerArrows(c);