Skip to content

Commit

Permalink
addRows method & destroy pager
Browse files Browse the repository at this point in the history
  • Loading branch information
Mottie committed Sep 8, 2011
1 parent 72f6213 commit 1153c05
Show file tree
Hide file tree
Showing 25 changed files with 345 additions and 41 deletions.
8 changes: 8 additions & 0 deletions README.markdown
Expand Up @@ -28,6 +28,14 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs

View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt).

#### Version 2.0.16 (2011-09-08)

* Added notes to demo pages to indicate if the original (version 2.0.5, at [tablesorter.com](http://tablesorter.com/docs/)) does have that option or method.
* Added "addRows" method that allows adding table rows.
* This method differs from the "update" method in that it only adds rows to the cache.
* Use this new method to add rows to a table with the pager plugin applied. Using the "update" method on a table with the pager plugin will remove all hidden rows from the cache.
* Added a "destroy.pager" method to remove the pager from the table - pager demo updated.

#### Version 2.0.15 (2011-08-23)

* Fixed a problem that caused a javascript error when a table header cell doesn't have a class name.
Expand Down
56 changes: 36 additions & 20 deletions addons/pager/jquery.tablesorter.pager.js
@@ -1,12 +1,29 @@
/*
* tablesorter pager plugin
* updated 7/27/2011
* updated 9/8/2011
*/

(function($) {
$.extend({tablesorterPager: new function() {

var updatePageDisplay = function(table,c) {
// hide arrows at extremes
var pagerArrows = function(c) {
if (c.updateArrows) {
c.container.removeClass(c.cssDisabled);
$(c.cssFirst + ',' + c.cssPrev + ',' + c.cssNext + ',' + c.cssLast, c.container).removeClass(c.cssDisabled);
if (c.page === 0) {
$(c.cssFirst + ',' + c.cssPrev, c.container).addClass(c.cssDisabled);
} else if (c.page === c.totalPages - 1) {
$(c.cssNext + ',' + c.cssLast, c.container).addClass(c.cssDisabled);
}
// if the total # of pages is less than the selected number of visible rows, then hide the pager
if (c.totalRows < c.size) {
c.container.addClass(c.cssDisabled);
}
}
},

updatePageDisplay = function(table,c) {
c.startRow = c.size * (c.page) + 1;
c.endRow = Math.min(c.totalRows, c.size * (c.page+1));
var out = $(c.cssPageDisplay, c.container),
Expand All @@ -25,6 +42,7 @@
} else {
out.html(s);
}
pagerArrows(c);
$(table).trigger('pagerComplete', c);
},

Expand Down Expand Up @@ -71,29 +89,11 @@
updatePageDisplay(table,c);
},

// hide arrows at extremes
pagerArrows = function(c) {
if (c.updateArrows) {
c.container.removeClass(c.cssDisabled);
$(c.cssFirst + ',' + c.cssPrev + ',' + c.cssNext + ',' + c.cssLast, c.container).removeClass(c.cssDisabled);
if (c.page === 0) {
$(c.cssFirst + ',' + c.cssPrev, c.container).addClass(c.cssDisabled);
} else if (c.page === c.totalPages - 1) {
$(c.cssNext + ',' + c.cssLast, c.container).addClass(c.cssDisabled);
}
// if the total # of pages is less than the selected number of visible rows, then hide the pager
if (c.totalRows < c.size) {
c.container.addClass(c.cssDisabled);
}
}
},

moveToPage = function(table) {
var c = table.config;
if (c.page < 0 || c.page > (c.totalPages-1)) {
c.page = 0;
}
pagerArrows(c);
renderTable(table,c.rowsCopy);
},

Expand Down Expand Up @@ -134,6 +134,18 @@
c.page = 0;
}
moveToPage(table);
},

destroyPager = function(table){
var c = table.config;
c.size = c.totalRows;
c.totalPages = 1;
renderTable(table,c.rowsCopy);
// hide pager
c.container.hide();
c.appender = null;
$(table).unbind('destroy.pager');

};

this.appender = function(table,rows) {
Expand Down Expand Up @@ -195,6 +207,10 @@
return false;
});

$(this).bind('destroy.pager', function(){
destroyPager(table);
});

});
};

Expand Down
2 changes: 1 addition & 1 deletion addons/pager/jquery.tablesorter.pager.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions changelog.txt
@@ -1,5 +1,14 @@
TableSorter Change Log

Version 2.0.16 (2011-09-08)
============================

* Added notes to demo pages to indicate if the original (version 2.0.5, at [tablesorter.com](http://tablesorter.com/docs/)) does have that option or method.
* Added "addRows" method that allows adding table rows.
* This method differs from the "update" method in that it only adds rows to the cache.
* Use this new method to add rows to a table with the pager plugin applied. Using the "update" method on a table with the pager plugin will remove all hidden rows from the cache.
* Added a "destroy.pager" method to remove the pager from the table - pager demo updated.

Version 2.0.15 (2011-08-23)
============================

Expand Down
2 changes: 1 addition & 1 deletion docs/css/jq.css
Expand Up @@ -24,7 +24,7 @@ pre.normal{background-color:transparent;border:none;border-left-width:0;overflow
hr{height:1px;}
code{font-size:108%;font-style:normal;padding:0;}
ul{color:#333;list-style:square;}
#banner{margin:20px;padding-bottom:10px;text-align:left;}
#banner{margin:20px 20px 5px 20px;padding:0;text-align:left;}
#banner *{color:#232121;font-family:Georgia, Palatino, Times New Roman;font-size:30px;font-style:normal;font-weight:400;margin:0;padding:0;}
#banner h1{display:block;float:left;}
#banner h1 em{color:#6cf;}
Expand Down
140 changes: 140 additions & 0 deletions docs/example-add-rows.html
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Adding a table row</title>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css">
<script src="js/chili/jquery.chili-2.2.js"></script>
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>

<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/blue/style.css">
<script src="../js/jquery.tablesorter.js"></script>

<style>
.discount { cursor: pointer; }
</style>

<script id="js">$(function() {

$("table").tablesorter({ sortList: [[3,1],[0,0]] });

// Add two new rows using the "addRows" method
// the "update" method doesn't work here because not all
// rows are present in the table when the pager is applied
$('button').click(function(){
// add two rows
var row = '<tr><td>Frank</td><td>Smith</td><td>53</td><td>$39.95</td><td>22%</td><td>Mar 22, 2011 9:33 AM</td></tr>' +
'<tr><td>Inigo</td><td>Montoya</td><td>34</td><td>$19.99</td><td>15%</td><td>Sep 25, 1987 12:00PM</td></tr>',
$row = $(row);
$('table')
.find('tbody').append($row)
.trigger('addRows', [$row]);
});

});</script>
</head>
<body>

<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Adding table rows</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>

<div id="main">

<p class="tip">
<em>NOTE!</em>
<ul>
<li>Click on the [ Add Rows ] button to add two new rows.</li>
<li>The "addRows" method was added in version 2.0.16, and is not part of the original plugin.</li>
<li>This example could have used the "update" method to add rows, but to remove rows only the "update" method works.</li>
<li>This method is better used for the <a href="example-pager.html">pager plugin</a> when not all of the rows are displayed.</li>
</ul>
</p>

<h1>Demo</h1>
<br>
<button>Add Rows</button>
<br>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td class="discount">$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td class="discount">$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td class="discount">$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Almighty</td>
<td>45</td>
<td class="discount">$153.19</td>
<td>44%</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td class="discount">$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody>
</table></div>

<h1>Javascript</h1>
<div id="javascript">
<pre class="js"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="html"></pre>
</div>

<div class="next-up">
<hr />
Next up: <a href="example-update-cell.html">Advanced: Update the table after cell content has changed &rsaquo;&rsaquo;</a>
</div>

</div>

</body>
</html>
2 changes: 1 addition & 1 deletion docs/example-ajax.html
Expand Up @@ -125,7 +125,7 @@ <h1>HTML</h1>

<div class="next-up">
<hr />
Next up: <a href="example-update-cell.html">Advanced: Update the table after cell content has changed &rsaquo;&rsaquo;</a>
Next up: <a href="example-add-rows.html">Advanced: Adding a table row &rsaquo;&rsaquo;</a>
</div>

</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/example-apply-widget.html
Expand Up @@ -46,7 +46,7 @@ <h3>Flexible client-side table sorting</h3>
<div id="main">

<p class="tip">
<em>NOTE!</em> Click on [ Apply Widget Id ], then sort the table a few times... then click on [ Apply Widgets ] and sort again.
<em>NOTE!</em> Click on [ Apply Widget Id ], then sort the table a few times... then click on [ Apply Widgets ] and sort again (these methods <strong>are</strong> part of the original plugin).
</p>

<h1>Demo</h1>
Expand Down
2 changes: 1 addition & 1 deletion docs/example-child-rows.html
Expand Up @@ -62,7 +62,7 @@ <h3>Flexible client-side table sorting</h3>

<p class="tip">
<em>NOTE!</em> Click the link in the Order # column to reveal the hidden child row cells
(<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>).
(<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>). This option is available in the original plugin.
</p>

<h1>Demo</h1>
Expand Down
9 changes: 7 additions & 2 deletions docs/example-empty-table.html
Expand Up @@ -33,8 +33,8 @@
// append new html to table body
$("table tbody").append(html);

// let the plugin know that we made a update, then
// set sorting column and direction, this will sort on the first and third column
// let the plugin know that we made a update, then the plugin will
// automatically sort the table based on the header settings
$("table").trigger("update");

return false;
Expand All @@ -52,6 +52,11 @@ <h3>Flexible client-side table sorting</h3>
</div>

<div id="main">

<p class="tip">
<em>NOTE!</em> The presorting of an empty table and automatic sorting of appended data was added in version 2.0.14 (not part of the original plugin).
</p>

<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<thead>
Expand Down
2 changes: 1 addition & 1 deletion docs/example-option-digits.html
Expand Up @@ -32,7 +32,7 @@ <h3>Flexible client-side table sorting</h3>
<div id="main">

<p class="tip">
<em>NOTE!</em> Click on any column header to sort that column. Note the new alphanumeric sort working in the first column.
<em>NOTE!</em> Click on any column header to sort that column. The alphanumeric sort working in the first column was added in version 2.0.6 (not part of the original plugin).
</p>

<h1>Demo</h1>
Expand Down
5 changes: 5 additions & 0 deletions docs/example-option-render-header.html
Expand Up @@ -52,6 +52,11 @@ <h3>Flexible client-side table sorting</h3>
</div>

<div id="main">

<p class="tip">
<em>NOTE!</em> The span wrapping the header text and the index variable for the function was added in version 2.0.9 (it is not part of the original plugin, but the "onRenderHeader" option was available).
</p>

<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<thead>
Expand Down
6 changes: 5 additions & 1 deletion docs/example-option-sort-append.html
Expand Up @@ -40,7 +40,11 @@ <h3>Flexible client-side table sorting</h3>
<div id="main">

<p class="tip">
<em>NOTE!</em> Click to sort any column header to see the the first column sort is appended to the selected sort order.
<em>NOTE!</em>
<ul>
<li>Click to sort any column header to see the the first column sort is appended to the selected sort order.</li>
<li>This option is part of the original plugin</li>
</ul>
</p>

<h1>Demo</h1>
Expand Down
6 changes: 5 additions & 1 deletion docs/example-option-text-extraction.html
Expand Up @@ -56,7 +56,11 @@ <h3>Flexible client-side table sorting</h3>

<div id="main">
<p class="tip">
<em>NOTE!</em> The "First Name" column is sorting by the contents of the &lt;strong&gt; tag (in red).
<em>NOTE!</em>
<ul>
<li>The textExtraction function setting for each column was added in version 2.0.12 (not part of the original plugin).</li>
<li>The "First Name" column is sorting by the contents of the &lt;strong&gt; tag (in red).</li>
</ul>
</p>

<h1>Demo</h1>
Expand Down
1 change: 1 addition & 0 deletions docs/example-options-headers-digits-strings.html
Expand Up @@ -45,6 +45,7 @@ <h3>Flexible client-side table sorting</h3>
<p class="tip">
<em>NOTE!</em>
<ul>
<li>This functionality is new as of version 2.0.10 (not part of the original plugin).</li>
<li>When a column is sorted numerically ( sorter:"digit" ) any text in that column will, by default, be given a <em>zero</em> value. Sort the last column (#9) to see the problem with this method.</li>
<li>Set the headers option "string" value to "max+" to treat any text in that column as a value greater than the <em>max positive</em> value.</li>
<li>Set the headers option "string" value to "max-" to treat any text in that column as a value greater than the <em>max negative</em> value.</li>
Expand Down
3 changes: 2 additions & 1 deletion docs/example-options-headers-locked.html
Expand Up @@ -43,7 +43,8 @@ <h3>Flexible client-side table sorting</h3>
<div id="main">

<p class="tip">
<em>TIP!</em> Sort the first and third columns to see how the sort is locked. Override this by using the multisort key (shift) while clicking on the header.
<em>TIP!</em> Sort the first and third columns to see how the sort is locked. Override this by using the multisort key (shift) while clicking on the header.<br>
<em>NOTE!</em> This option was part of the original plugin, but it was broken.
</p>


Expand Down

0 comments on commit 1153c05

Please sign in to comment.