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: Add pageAndSize method to set both page & size

Browse Source
This commit is contained in:
Mottie 2015-01-16 11:21:23 -06:00
parent 85a1ca0453
commit 14799b9ce8
5 changed files with 68 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -892,14 +892,20 @@
setPageSize(table, parseInt(v, 10) || p.settings.size || 10, p);
hideRows(table, p);
updatePageDisplay(table, p, false);
if (p.$size.length) { p.$size.val(p.size); } // twice?
})
.bind('pageSet.pager', function(e,v){
e.stopPropagation();
p.page = (parseInt(v, 10) || 1) - 1;
if (p.$goto.length) { p.$goto.val(p.size); } // twice?
moveToPage(table, p, true);
updatePageDisplay(table, p, false);
})
.bind('pageAndSize.pager', function(e, page, size){
e.stopPropagation();
p.page = (parseInt(page, 10) || 1) - 1;
setPageSize(table, parseInt(size, 10) || p.settings.size || 10, p);
moveToPage(table, p, true);
hideRows(table, p);
updatePageDisplay(table, p, false);
});
// clicked controls

18
docs/example-pager.html
View File

@ -183,6 +183,21 @@
$('.toggle').text('Disable Pager');
});
// clear storage (page & size)
$('.clear-pager-data').click(function(){
// clears user set page & size from local storage, so on page
// reload the page & size resets to the original settings
$.tablesorter.storage( $('table'), 'tablesorter-pager', '' );
});
// go to page 1 showing 10 rows
$('.goto').click(function(){
// triggering "pageAndSize" without parameters will reset the
// pager to page 1 and the original set size (10 by default)
// $('table').trigger('pageAndSize')
$('table').trigger('pageAndSize', [1, 10]);
});
});</script>
<script>
$(function(){
@ -205,6 +220,7 @@
<p class="tip">
<em>NOTE!</em> The following are not part of the original plugin:
<ul>
<li>In <span class="version">v2.18.5</span>, added <code>pageAndSize</code> method which allows setting both the pager page &amp; size.</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>
<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>
@ -224,7 +240,7 @@
<h1>Demo</h1>
<br>
<button type="button">Add Rows</button> <button type="button" class="toggle">Disable Pager</button> <button type="button">Destroy Pager</button>
<br><br>
<p><button type="button" class="clear-pager-data">Clear saved pager data</button> <button type="button" class="goto">Set page 1 &amp; size 10</button></p>
<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" />

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

@ -196,6 +196,21 @@
$('.toggle').text('Disable Pager');
});
// clear storage (page & size)
$('.clear-pager-data').click(function(){
// clears user set page & size from local storage, so on page
// reload the page & size resets to the original settings
$.tablesorter.storage( $('table'), 'tablesorter-pager', '' );
});
// go to page 1 showing 10 rows
$('.goto').click(function(){
// triggering "pageAndSize" without parameters will reset the
// pager to page 1 and the original set size (10 by default)
// $('table').trigger('pageAndSize')
$('table').trigger('pageAndSize', [1, 10]);
});
});</script>
</head>
<body id="pager-demo">
@ -211,6 +226,9 @@
<p class="tip">
<em>NOTE!</em>
<ul>
<li>In <span class="version">v2.18.5</span>, added <code>pageAndSize</code> method which allows setting both the pager page &amp; size.</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.<p></p></li>
<li>This pager WIDGET <em>can not</em> be applied to the original tablesorter.</li>
<li>Do not use this widget along with the pager plugin.</li>
<li>The pager.css file also works with this pager widget.</li>
@ -225,7 +243,6 @@
<li>See the Javascript code below for a full example.</li>
</ul>
</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>
<p>
@ -239,7 +256,7 @@
<h1>Demo</h1>
<br>
<button type="button">Add Rows</button> <button type="button" class="toggle">Disable Pager</button> <button type="button">Destroy Pager</button>
<br><br>
<p><button type="button" class="clear-pager-data">Clear saved pager data</button> <button type="button" class="goto">Set page 1 &amp; size 10</button></p>
<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" />

20
docs/index.html
View File

@ -471,7 +471,7 @@
<li><a href="example-widget-build-table.html">Build Table Widget</a> (<span class="version">v2.11</span>; <span class="version updated">v2.16</span>).</li>
<li><span class="results">&dagger;</span> <a href="example-widget-columns.html">Columns Highlight widget</a> (v2.0.17)</li>
<li><span class="label label-info">Beta</span> <a href="example-widget-column-selector.html">Column Selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.18.1</span>).</li>
<li><span class="label label-info">Beta</span> <a href="example-widget-column-selector.html">Column Selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.18.5</span>).</li>
<li><a href="example-widget-editable.html">Content Editable widget</a> (v2.9; <span class="version updated">v2.18.0</span>).</li>
<li><span class="results">&dagger;</span> Filter Widget (<span class="version updated">v2.17.4</span>):
<ul>
@ -497,9 +497,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.18.1</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.18.5</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.18.1</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.18.5</span>).<br>
<br>
</li>
@ -512,7 +512,7 @@
<li><span class="label label-info">Beta</span> <a href="example-widget-static-row.html">StaticRow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.17.3</span>).</li>
<li><span class="results">&dagger;</span> <a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1; <span class="version updated">v2.18.0</span>)</li>
<li><a href="example-widget-css-sticky-header.html">Sticky header (css3) widget</a> (<span class="version">v2.14.2</span>; <span class="version updated">v2.18.3</span>).</li>
<li><span class="results">&dagger;</span> UITheme widget (<span class="version updated">v2.17.4</span>; <span class="version updated">v2.18.0</span>):
<li><span class="results">&dagger;</span> UITheme widget (<span class="version updated">v2.17.4</span>; <span class="version updated">v2.18.5</span>):
<ul>
<li><a href="example-widget-ui-theme.html">jQuery UI theme</a> (v2.0.9)</li>
<li><a href="example-widget-bootstrap-theme.html">Bootstrap</a> (v2.4)</li>
@ -4671,6 +4671,18 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
</td>
<td></td>
</tr>
<tr id="pageandsize">
<td><a href="#" class="permalink">pageAndSize</a></td>
<td>Trigger the pager to change the current page &amp; size (<span class="version">v2.18.5</span>).
<div class="collapsible">
<br>
If no value is passed, the pager will reset to page 1 with the original pager size setting; otherwise, pass a "one-based" index of the desired page and the pager size as an array
<pre class="prettyprint lang-js">$(function(){
$('table').trigger('pageAndSize', [ 2, 20 ]); // pass a one-based page index & page size
});</pre></div>
</td>
<td></td>
</tr>
<tr id="destroypager">
<td><a href="#" class="permalink">destroy.pager</a></td>

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

@ -284,14 +284,20 @@ tsp = ts.pager = {
tsp.setPageSize(table, parseInt(v, 10) || p.setSize || 10, c);
tsp.hideRows(table, c);
tsp.updatePageDisplay(table, c, false);
if (p.$size.length) { p.$size.val(p.size); } // twice?
})
.on('pageSet.pager', function(e,v){
e.stopPropagation();
p.page = (parseInt(v, 10) || 1) - 1;
if (p.$goto.length) { p.$goto.val(c.size); } // twice?
tsp.moveToPage(table, p, true);
tsp.updatePageDisplay(table, c, false);
})
.on('pageAndSize.pager', function(e, page, size){
e.stopPropagation();
p.page = (parseInt(page, 10) || 1) - 1;
tsp.setPageSize(table, parseInt(size, 10) || p.setSize || 10, c);
tsp.moveToPage(table, p, true);
tsp.hideRows(table, c);
tsp.updatePageDisplay(table, c, false);
});
// clicked controls