Permalink
Browse files

ui theme & pager update

  • Loading branch information...
1 parent 3e1ec68 commit 440f5549ad57665ab18c0e1280fae38514de63fc @Mottie committed Jul 27, 2011
View
@@ -28,6 +28,29 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs
View the [complete listing here](changelog.markdown).
+#### Version 2.0.9 (2011-07-27)
+
+* Added a jQuery UI theme and widget example. To apply the jQuery UI theme:
+ * Include any jQuery UI theme on your page.
+ * Add the base tablesorter ui theme (located in css/ui directory)
+ * Add the jQuery UI theme widget code found on [this example page](docs/example-option-ui-theme.html). This demo page includes the UI theme switcher.
+* Added a header index to the `onRenderHeader` function to make it easier to target specific header cells for modification. See the [render header example](docs/example-option-render-header.html) for an example.
+* Pager plugin updates:
+ * Removed the `separator` option and added an `output` option which allows you to completely customize the output string.
+ * In the `output` string, include any of the following variables:
+ * `{page}` is replaced with the current page number.
+ * `{totalPages}` is replaced with the total number of pages.
+ * `{startRow}` is replaced with the number of the visible start row of the pager.
+ * `{endRow}` is replaced with the number of the visible end row of the pager.
+ * `{totalRows}` is replaced with the total number of rows.
+ * The `cssPageDisplay` option can now target any element; in previous versions, this element was an input of type text.
+ * Added a `pagerArrows` and `cssDisabled` options:
+ * When `pagerArrows` is true, the first and previous pager arrows have the css class name contained in the `cssDisabled` option applied when the first row is visible.
+ * The next and last pager arrows will be have the `cssDisabled` class applied when the last row is visible.
+ * Additionally, if the number of table rows is less than the pager size, the pager will get the `cssDisabled` class name applied.
+ * If false (the default setting), the pager arrows class names will not change.
+ * Please see the updated [pager demo](docs/example-pager.html) to see this working.
+
#### Version 2.0.8 (2011-07-21)
* Fixed parsers for currency and digits to work with number values separated by commas. Thanks to Josh Renaud for the information!
@@ -1,8 +1,30 @@
+/*
+ * tablesorter pager plugin
+ * updated 7/27/2011
+ */
+
(function($) {
$.extend({tablesorterPager: new function() {
var updatePageDisplay = function(table,c) {
- var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);
+ c.startRow = c.size * (c.page) + 1;
+ c.endRow = Math.min(c.totalRows, c.size * (c.page+1));
+ var out = $(c.cssPageDisplay, c.container),
+ // form the output string
+ s = c.output.replace(/\{(page|totalPages|startRow|endRow|totalRows)\}/gi, function(m){
+ return {
+ '{page}' : c.page + 1,
+ '{totalPages}' : c.totalPages,
+ '{startRow}' : c.startRow,
+ '{endRow}' : c.endRow,
+ '{totalRows}' : c.totalRows
+ }[m];
+ });
+ if (out[0].tagName === 'INPUT') {
+ out.val(s);
+ } else {
+ out.html(s);
+ }
$(table).trigger('pagerComplete', c);
},
@@ -49,11 +71,29 @@
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)) {
+ if (c.page < 0 || c.page > (c.totalPages-1)) {
c.page = 0;
}
+ pagerArrows(c);
renderTable(table,c.rowsCopy);
},
@@ -117,7 +157,9 @@
cssLast: '.last',
cssPageDisplay: '.pagedisplay',
cssPageSize: '.pagesize',
- seperator: "/",
+ cssDisabled: 'disabled',
+ output: '{page}/{totalPages}', // '{startRow} to {endRow} of {totalRows} rows',
+ updateArrows: false,
positionFixed: true,
appender: this.appender
};
@@ -130,6 +172,7 @@
$(this).trigger("appendCache");
config.size = parseInt($(".pagesize",pager).val(), 10);
+ pagerArrows(config);
$(config.cssFirst,pager).click(function() {
moveToFirstPage(table);

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

Oops, something went wrong.
View
@@ -1,5 +1,28 @@
###TableSorter Change Log
+#### Version 2.0.9 (2011-07-27)
+
+* Added a jQuery UI theme and widget example. To apply the jQuery UI theme:
+ * Include any jQuery UI theme on your page.
+ * Add the base tablesorter ui theme (located in css/ui directory)
+ * Add the jQuery UI theme widget code found on [this example page](docs/example-option-ui-theme.html). This demo page includes the UI theme switcher.
+* Added a header index to the `onRenderHeader` function to make it easier to target specific header cells for modification. See the [render header example](docs/example-option-render-header.html) for an example.
+* Pager plugin updates:
+ * Removed the `separator` option and added an `output` option which allows you to completely customize the output string.
+ * In the `output` string, include any of the following variables:
+ * `{page}` is replaced with the current page number.
+ * `{totalPages}` is replaced with the total number of pages.
+ * `{startRow}` is replaced with the number of the visible start row of the pager.
+ * `{endRow}` is replaced with the number of the visible end row of the pager.
+ * `{totalRows}` is replaced with the total number of rows.
+ * The `cssPageDisplay` option can now target any element; in previous versions, this element was an input of type text.
+ * Added a `pagerArrows` and `cssDisabled` options:
+ * When `pagerArrows` is true, the first and previous pager arrows have the css class name contained in the `cssDisabled` option applied when the first row is visible.
+ * The next and last pager arrows will be have the `cssDisabled` class applied when the last row is visible.
+ * Additionally, if the number of table rows is less than the pager size, the pager will get the `cssDisabled` class name applied.
+ * If false (the default setting), the pager arrows class names will not change.
+ * Please see the updated [pager demo](docs/example-pager.html) to see this working.
+
#### Version 2.0.8 (2011-07-21)
* Fixed parsers for currency and digits to work with number values separated by commas. Thanks to Josh Renaud for the information!
View
@@ -0,0 +1,26 @@
+/* jQuery UI Theme */
+table.tablesorter {
+ font-family: arial;
+ margin: 10px 0pt 15px;
+ font-size: 8pt;
+ width: 100%;
+ text-align: left;
+}
+table.tablesorter thead tr th, table.tablesorter tfoot tr th {
+ border-collapse: collapse;
+ font-size: 8pt;
+ padding: 4px;
+}
+table.tablesorter thead tr .header {
+ background-repeat: no-repeat;
+ background-position: center right;
+ cursor: pointer;
+}
+table.tablesorter tbody td {
+ padding: 4px;
+ vertical-align: top;
+}
+table.tablesorter .header .ui-theme {
+ display: block;
+ float: right;
+}
@@ -35,9 +35,9 @@
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
- onRenderHeader: function (){
+ onRenderHeader: function (index){
// the TH content is wrapped with a span by default, so just add the class
- $(this).find('span').addClass('roundedCorners');
+ $(this).find('span').addClass('roundedCorners header' + index );
}
});
});</script>
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>jQuery plugin: Tablesorter 2.0 - jQuery UI Theme Widget</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>
+
+ <!-- theme switcher -->
+ <script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+
+ <!-- Tablesorter: required; also include any of the jQuery UI themes -->
+ <link rel="stylesheet" href="../css/ui/style.css">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
+ <script src="../js/jquery.tablesorter.js"></script>
+
+ <!-- Tablesorter: optional -->
+ <script src="../addons/pager/jquery.tablesorter.pager.js"></script>
+
+ <script id="js">$(function() {
+
+ // add ui theme widget
+ $.tablesorter.addWidget({
+ id: "uitheme",
+ format: function(table) {
+ var c = table.config,
+ // ["up/down arrow (cssHeaders, unsorted)", "down arrow (cssDesc, descending)", "up arrow (cssAsc, ascending)" ]
+ icons = c.uitheme || ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"],
+ klass, rmv = icons.join(' ');
+ if (!$(c.headerList[0]).is('.ui-theme')) {
+ $(table).addClass('ui-widget ui-widget-content ui-corner-all');
+ $.each(c.headerList, function(){
+ $(this)
+ // using new "ui-theme" class in case the user adds their own ui-icon using onRenderHeader
+ .addClass('ui-state-default ui-corner-all ui-theme')
+ .append('<span class="ui-theme"/>');
+ });
+ }
+ $.each(c.headerList, function(i){
+ if (c.headers[i] && c.headers[i].sorter === false) {
+ // no sort arrows for disabled columns!
+ $(this).find('span.ui-theme').removeClass(rmv + ' ui-icon');
+ } else {
+ //
+ klass = ($(this).is('.' + c.cssAsc)) ? icons[1] : ($(this).is('.' + c.cssDesc)) ? icons[2] : $(this).is('.' + c.cssHeader) ? icons[0] : '';
+ $(this).find('span.ui-theme').removeClass(rmv).addClass(klass + ' ui-icon');
+ }
+ });
+ }
+ });
+
+ // call the tablesorter plugin and apply the ui theme widget
+ $("table").tablesorter({
+ widgets : ['uitheme']
+ });
+});</script>
+
+ <script>
+ $(function() {
+ // Theme switcher
+ // ********************
+ $('#switcher').themeswitcher();
+ });
+ </script>
+</head>
+<body>
+
+<div id="banner">
+ <h1>table<em>sorter</em></h1>
+ <h2>jQuery UI Theme Widget</h2>
+ <h3>Flexible client-side table sorting</h3>
+ <a href="index.html">Back to documentation</a>
+</div>
+
+<div id="main">
+
+ <div id="switcher"></div>
+
+ <h1>Demo</h1>
+ <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>$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>$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>$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>$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>$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>CSS</h1>
+ <div>
+ <pre class="css">/* jQuery UI Theme required css; as seen in css/ui/style.css file */
+table.tablesorter {
+ font-family: arial;
+ margin: 10px 0pt 15px;
+ font-size: 8pt;
+ width: 100%;
+ text-align: left;
+}
+table.tablesorter thead tr th, table.tablesorter tfoot tr th {
+ border-collapse: collapse;
+ font-size: 8pt;
+ padding: 4px;
+}
+table.tablesorter thead tr .header {
+ background-repeat: no-repeat;
+ background-position: center right;
+ cursor: pointer;
+}
+table.tablesorter tbody td {
+ padding: 4px;
+ vertical-align: top;
+}
+table.tablesorter .header .ui-theme {
+ display: block;
+ float: right;
+}</pre>
+ </div>
+
+
+ <h1>HTML</h1>
+ <div id="html">
+ <pre class="html"></pre>
+ </div>
+
+<div class="next-up">
+ <hr />
+ Next up: <a href="example-options-headers.html">Basic: Disable header using options &rsaquo;&rsaquo;</a>
+</div>
+
+</div>
+
+</body>
+</html>
+
@@ -321,7 +321,7 @@ <h1>Javascript</h1>
<div class="next-up">
<hr />
- Next up: <a href="example-pager.html">Companion Plugins: file:///C:/Temp/tablesorter/docs/example-pager.html &rsaquo;&rsaquo;</a>
+ Next up: <a href="example-pager.html">Companion Plugins: Pager plugin &rsaquo;&rsaquo;</a>
</div>
</div>
View
@@ -123,7 +123,7 @@ <h1>HTML</h1>
<div class="next-up">
<hr />
- Next up: <a href="example-options-headers.html">Basic: Disable header using options &rsaquo;&rsaquo;</a>
+ Next up: <a href="example-ui-theme.html">Basic: Applying a jQuery UI theme widget &rsaquo;&rsaquo;</a>
</div>
</div>
Oops, something went wrong.

0 comments on commit 440f554

Please sign in to comment.