Permalink
Browse files

addRows method & destroy pager

  • Loading branch information...
Mottie committed Sep 8, 2011
1 parent 72f6213 commit 1153c051711de2fea9b76be9a726d57e8d037580
View
@@ -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.
@@ -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),
@@ -25,6 +42,7 @@
} else {
out.html(s);
}
+ pagerArrows(c);
$(table).trigger('pagerComplete', c);
},
@@ -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);
},
@@ -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) {
@@ -195,6 +207,10 @@
return false;
});
+ $(this).bind('destroy.pager', function(){
+ destroyPager(table);
+ });
+
});
};

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -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)
============================
View
@@ -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;}
View
@@ -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>
View
@@ -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>
@@ -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>
@@ -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>
@@ -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;
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
Oops, something went wrong.

0 comments on commit 1153c05

Please sign in to comment.