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

doc & version updates

Browse Source
This commit is contained in:
Mottie 2013-01-29 16:42:23 -06:00
parent 714aac9bef
commit 009cf1e92a
13 changed files with 289 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -36,6 +36,28 @@ tablesorter can successfully parse and sort many types of data including linked
View the [complete listing here](https://github.com/Mottie/tablesorter/wiki/Change).
#### Version 2.7.4 (1/29/2013)
* Fixed an problem with the pager not pointing to a tbody, and breaking on an empty tbody. See [issue #223](https://github.com/Mottie/tablesorter/issues/223).
* Modified core to always add a `<colgroup>` to the table. Only when the `widthFixed` option is `true` will it add percentage based widths.
* Modified the parsers code to no longer require an `is` function; or if the function is missing, no error will be thrown.
* Modified the isoDate and usLongDate parsers:
* isoDate parser will now auto-detect dates with times
* usLongDate parser will now auto-detect dates in this format: "DD MMMMMMMMM YYYY" (25 Jan 2013)
* Added manifest files:
* `component.json` for bower package manager. Thanks to [appleboy](https://github.com/appleboy); also see [issue #190](https://github.com/Mottie/tablesorter/issues/190).
* `tablesorter.jquery.json` for the jquery plugin registry.
* Added `"updateRows"` method which is the exact same as `"update"`, but needed due to issues with Prototype. See [issue #217](https://github.com/Mottie/tablesorter/issues/217).
* Added `pageSize` method to change the pager page size more easily. See [issue #218](https://github.com/Mottie/tablesorter/issues/218).
* Added [filter widget change log](https://github.com/Mottie/tablesorter/wiki/Change3) to the wiki pages.
* Added a config variable `config.columns`:
* This variable indicates the number of columns in the table.
* Previously, `config.parsers.length` or `config.$headers.length` were used. Neither of which were accurate if the table was empty or multiple rows in the header existed.
* This value may still be inaccurate if a rowspan is used in the header.
* Updated index page to use jQuery 1.9.
* jQuery 2.0 is has a [bug adding rows to the table](http://jsfiddle.net/Mottie/abkNM/324/), so I didn't upgrade the demos to use it.
* Changed syntax highlighting script from chilli to google's prettify.
#### Version 2.7.3 (1/10/2013)
* Fixed a serious bug in the filter widget that was breaking the widget completely if `filter_functions` was not defined (introduced in v2.7.2). Fixes [issue #213](https://github.com/Mottie/tablesorter/issues/213).

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

@ -1,6 +1,6 @@
/*!
* tablesorter pager plugin
* updated 1/4/2013
* updated 1/29/2013
*/
/*jshint browser:true, jquery:true, unused:false */
;(function($) {
@ -138,7 +138,7 @@
if (h) {
d = h - $b.height();
if ( d > 5 && $.data(table, 'pagerLastSize') === c.size && $b.children('tr:visible').length < c.size ) {
$b.append('<tr class="pagerSavedHeightSpacer ' + table.config.selectorRemove.replace('.','') + '" style="height:' + d + 'px;"></tr>');
$b.append('<tr class="pagerSavedHeightSpacer ' + table.config.selectorRemove.replace(/(tr)?\./g,'') + '" style="height:' + d + 'px;"></tr>');
}
}
}
@ -189,7 +189,7 @@
$t = $(table),
tc = table.config,
hl = $t.find('thead th').length, tds = '',
err = '<tr class="' + c.cssErrorRow + ' ' + tc.selectorRemove.replace('.','') + '"><td style="text-align: center;" colspan="' + hl + '">' +
err = '<tr class="' + c.cssErrorRow + ' ' + tc.selectorRemove.replace(/(tr)?\./g,'') + '"><td style="text-align: center;" colspan="' + hl + '">' +
(exception ? exception.message + ' (' + exception.name + ')' : 'No rows found') + '</td></tr>',
result = c.ajaxProcessing(data) || [ 0, [] ],
d = result[1] || [],

4
addons/pager/jquery.tablesorter.pager.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
component.json
View File

@ -1,8 +1,7 @@
{
"name": "tablesorter",
"version": "2.7.3",
"main": ["js/jquery.tablesorter.js", "css/theme.blue.css"],
"dependencies": {
"jquery": ">=1.2.6"
}
"name": "tablesorter",
"version": "2.7.4",
"dependencies": {
"jqueryjs": ">=1.2.6"
}
}

6
docs/example-parsers.html
View File

@ -22,10 +22,10 @@
$.tablesorter.addParser({
// set a unique id
id: 'grades',
// is: function(s) {
is: function(s) {
// return false so this parser is not auto detected
// return false;
// },
return false;
},
format: function(s, table, cell, cellIndex) {
// format your data for normalization
return s.toLowerCase()

100
docs/example-widget-resizable.html
View File

@ -49,19 +49,31 @@
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
<li>This widget now saves all changed column widths to local storage, or it falls back to a cookie! (v2.1)</li>
<li>Column width saving requires the new "$.tablesorter.storage()" function included with the "jquery.tablesorter.widgets.js" file (v2.1).</li>
<li>Right clicking (opening the context menu) will now reset the resized columns. <span class="tip"><em>New! v2.4</em></span></li>
<li>Because this widget uses jQuery's <code>closest()</code> function, it requires jQuery 1.3+ in order to work.</li>
<li>Because this widget uses jQuery's <code>parseJson()</code> function, it requires jQuery version 1.4.1+ in order to save the widths.</li>
<li>Right clicking (opening the context menu) will now reset the resized columns (v2.4).</li>
<li>Holding down the shift key while resizing will force the last column or the table to resize instead of the next column, but only if the table is full width. <span class="tip"><em>New!</em></span> v2.7.4.</li>
<li>Prevent resizing a column by adding any of the following (they all do the same thing), set in order of priority <span class="tip"><em>New!</em></span> v2.7.4:
<ul>
<li>jQuery data <code>data-resizable="false"</code>.</li>
<li>metadata <code>class="{ resizable: 'false'}"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { resizable : 'false' } }</code>.</li>
<li>header class name <code>class="resizable-false"</code>.</li>
</ul>
</li>
<li>Setting the <code>resizable</code> widget option to <code>false</code>, will only prevent the saving of resized columns, it has nothing to do with preventing a column from being resized.</li>
<li>Because this widget uses jQuery's <code>closest()</code> (jQuery 1.3+) and <code>index()</code> (jQuery 1.4+) functions, it requires these newer versions of jQuery in order to work.</li>
<li>In order to save the resized widths, jQuery version 1.4.1+ should be used because jQuery's <code>parseJson()</code> function is needed.</li>
</ul>
</p>
<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<div id="demo">
<h3>Non-full width table <small>(individual columns resize)</small></h3>
<table class="tablesorter" style="width:auto">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th class="resizable-false">Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
@ -109,7 +121,64 @@
<td>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody>
</table></div>
</table>
<h3>Full width table <small>(use shift to force last column to resize)</small></h3>
<table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="resizable-false">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>Page Header</h1>
<div>
@ -128,8 +197,23 @@
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
<div>
<pre class="prettyprint lang-html">&lt;!-- The Age column is set to not be resizable --&gt;
&lt;table class=&quot;tablesorter&quot; style=&quot;width:auto&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;First Name&lt;/th&gt;
&lt;th&gt;Last Name&lt;/th&gt;
&lt;th class=&quot;resizable-false&quot;&gt;Age&lt;/th&gt;
&lt;th&gt;Total&lt;/th&gt;
&lt;th&gt;Discount&lt;/th&gt;
&lt;th&gt;Date&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
...
&lt;/tbody&gt;
&lt;/table&gt;</pre>
</div>
<div class="next-up">

13
docs/example-widget-ui-theme.html
View File

@ -46,18 +46,21 @@
// call the tablesorter plugin and apply the ui theme widget
$("table").tablesorter({
theme : 'jui', // theme "jui" and "bootstrap" override the uitheme widget option in v2.7+
headerTemplate : '{content} {icon}', // needed to add icon for jui theme
// widget code now contained in the jquery.tablesorter.widgets.js file
widgets : ['uitheme', 'zebra', 'resizable'],
widgets : ['uitheme', 'zebra'],
widgetOptions : {
// zebra striping class names - the uitheme widget adds the class names defined in
// $.tablesorter.themes to the zebra widget class names
zebra : ["even", "odd"],
// set the uitheme widget to use the jQuery UI theme class names ## NEW ##
uitheme : 'jui'
// set the uitheme widget to use the jQuery UI theme class names
// ** this is now optional, and will be overridden if the theme name exists in $.tablesorter.themes **
// uitheme : 'jui'
}
});
@ -82,14 +85,14 @@
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code. <span class="tip"><em>New!</em></span> v2.7!</li>
<li>The original "widgetUitheme" option has been replaced by "widgetOptions.uitheme". See the javascript block below for more details (v2.1).</li>
<li><span class="tip"><em>New!</em></span> In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
<ul>
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the jQuery UI theme saved to <code>$.tablesorter.themes.jui</code></li>
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
<li>Set the <code>uitheme</code> widget option to <code>"jui"</code> to set the widget to use the jQuery UI theme. See the <a href="example-widget-bootstrap-theme.html">bootstrap demo</a> for another example.</li>
</ul>
</li>
<li>Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4 requires jQuery 1.2.6+.</li>
<li>Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4+ requires jQuery 1.2.6+.</li>
</ul>
</p>

111
docs/index.html
View File

@ -267,15 +267,15 @@
<li><a href="example-options-headers-locked.html">Lock sort order</a></li>
<li><a href="example-options-headers-order.html">Set initial sort order</a></li>
<li><a href="example-option-sortreset-sortrestart.html">Using sortReset &amp; sortRestart options</a></li>
<li><a href="example-method-sortreset.html">Resetting the entire table sort</a> (sortReset method) <span class="tip"><em>New!</em></span> v2.4.7</li>
<li><a href="example-option-selectorsort.html">Using selectorSort option</a> <span class="tip"><em>New!</em></span> v2.4</li>
<li><a href="example-method-sortreset.html">Resetting the entire table sort</a> (sortReset method) (v2.4.7)</li>
<li><a href="example-option-selectorsort.html">Using selectorSort option</a> (v2.4)</li>
<li><a href="example-option-sort-empty.html">Sorting empty cells</a> (v2.1.11)</li>
<li><a href="example-option-sort-key.html">Change the default multi-sorting key</a></li>
<li><a href="example-option-custom-sort.html">Custom sort script</a> (v2.2)</li>
<li><a href="example-locale-sort.html">Sorting Accented Characters</a> (v2.24; <a href="https://github.com/Mottie/tablesorter/wiki/Language">languages</a>)</li>
<li><a href="example-multiple-tbodies.html">Sorting with Multiple Tbodies</a> (v2.2)</li>
<li><a href="example-header-column-span.html">Sorting Across Multiple Columns</a> (v2.3)</li>
<li><a href="example-option-show-processing.html">Show a processing icon during sorting/filtering</a> <span class="tip"><em>New!</em></span> v2.4</li>
<li><a href="example-option-show-processing.html">Show a processing icon during sorting/filtering</a> (v2.4)</li>
</ul>
<h4>Parsers / Extracting Content</h4>
@ -296,16 +296,16 @@
<li><a href="example-widget-columns.html">Columns widget</a> (v2.0.17)</li>
<li><a href="example-widget-filter.html">Filter widget</a> (v2.0.18)</li>
<li><a href="example-widget-filter-custom.html">Filter widget, custom</a> (v2.3.6)</li>
<li><a href="example-widget-ui-theme.html">UITheme widget - jQuery UI theme</a> (v2.0.9; <span class="tip"><em>Modified!</em></span> v2.4)</li>
<li><a href="example-widget-bootstrap-theme.html">UITheme widget - Bootstrap</a> <span class="tip"><em>New!</em></span> v2.4</li>
<li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1)</li>
<li><a href="example-widget-ui-theme.html">UITheme widget - jQuery UI theme</a> (v2.0.9; Modified v2.4)</li>
<li><a href="example-widget-bootstrap-theme.html">UITheme widget - Bootstrap</a> (v2.4)</li>
<li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="tip"><em>Modified</em></span> v2.7.4)</li>
<li><a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
<li><a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1)</li>
<li><a href="example-widget-zebra.html">Zebra stripe widget</a></li>
<li><a href="example-widgets.html">Widgets, writing your own</a></li>
<li><a href="example-pager.html">Pager plugin</a></li>
<li><a href="example-pager-ajax.html">Pager plugin - ajax</a> (v2.1)</li>
<li><a href="example-pager-filtered.html">Pager plugin + filter widget</a> <span class="tip"><em>New!</em></span> v2.4</li>
<li><a href="example-pager-filtered.html">Pager plugin + filter widget</a> (v2.4)</li>
</ul>
</div>
@ -413,7 +413,7 @@
<td><a class="toggle" href="#">cssChildRow</a></td>
<td>String</td>
<td>"tablesorter-childRow"</td>
<td>Add this css class to a child row that should always be attached to its parent. Click on the "cssChildRow" link to toggle the view on the attached child row. Previous default was "expand-child", <span class="tip"><em>Changed!</em></span> in v2.4.</td>
<td>Add this css class to a child row that should always be attached to its parent. Click on the "cssChildRow" link to toggle the view on the attached child row. Previous default was "expand-child" (Changed in v2.4).</td>
<td>Ex:<a href="example-child-rows.html">1</a> <a href="example-child-rows-filtered.html">2</a></td>
</tr>
<tr class="tablesorter-childRow">
@ -502,7 +502,7 @@
<td><a href="#" class="toggle2">cssHeaderRow</a></td>
<td>String</td>
<td>"tablesorter-headerRow"</td>
<td>The CSS style used to style the header row. <span class="tip"><em>New!</em></span> v2.4.
<td>The CSS style used to style the header row (v2.4).
<div class="collapsible">
Previously the row would get the same class as the header cells, this class was added to make it easier to determine what element was being targetted in the plugin.
</div>
@ -528,7 +528,7 @@
<td><span class="permalink">cssProcessing</span></td>
<td>String</td>
<td>"tablesorter-processing"</td>
<td>This class name is added to the header cell that is currently being sorted or filted. To prevent this class name from being added, set the <a href="#showprocessing"><code>showProcessing</code></a> option to <code>false</code>. <span class="tip"><em>New!</em></span> v2.4.</td>
<td>This class name is added to the header cell that is currently being sorted or filted. To prevent this class name from being added, set the <a href="#showprocessing"><code>showProcessing</code></a> option to <code>false</code> (v2.4).</td>
<td></td>
</tr>
@ -693,7 +693,9 @@
// See the "Applying the filter widget" demo
7: { filter: false }, // disable filter widget for this column
8: { filter: "parsed" }, // use parsed data for this column in the filter search
9: { filter: "noquicksearch" } // exclude this column from the advanced filter quick search
// Set resizable widget options for this column
9: { resizable: false } // prevent resizing of column 9
}
});
@ -845,7 +847,7 @@ From the example function above, you'll end up with something similar to this HT
<td>jQuery selectors used to find cells in the header.
<div class="collapsible">
You can change this, but the table will still need the required thead and tbody before this plugin will work properly.
<br>Added <code>&gt;</code> to the selector in v2.3 to prevent targetting nested table headers. It was modified again in v2.4 to include <code>td</code> cells within the thead. <span class="tip"><em>Modified!</em></span> v2.4.
<br>Added <code>&gt;</code> to the selector in v2.3 to prevent targetting nested table headers. It was modified again in v2.4 to include <code>td</code> cells within the thead.
</div>
</td>
<td></td>
@ -868,7 +870,7 @@ From the example function above, you'll end up with something similar to this HT
<td><span class="permalink">selectorSort</span></td>
<td>String</td>
<td>"th, td"</td>
<td>jQuery selector of content within <a href="#selectorheaders"><code>selectorHeaders</code></a> that is clickable to trigger a sort. <span class="tip"><em>New!</em></span> v2.4.</td>
<td>jQuery selector of content within <a href="#selectorheaders"><code>selectorHeaders</code></a> that is clickable to trigger a sort (v2.4).</td>
<td><a href="example-option-selectorsort.html">Example</a></td>
</tr>
@ -876,7 +878,7 @@ From the example function above, you'll end up with something similar to this HT
<td><span class="permalink">serverSideSorting</span></td>
<td>Boolean</td>
<td>false</td>
<td>Set to <code>true</code> if the server is performing the sorting. The ui and events will still be used. <span class="tip"><em>New!</em></span> v2.5.3.</td>
<td>Set to <code>true</code> if the server is performing the sorting. The ui and events will still be used (v2.5.3).</td>
<td></td>
</tr>
@ -884,7 +886,7 @@ From the example function above, you'll end up with something similar to this HT
<td><span class="permalink">showProcessing</span></td>
<td>Boolean</td>
<td>false</td>
<td>Show an indeterminate timer icon in the header when the table is sorted or filtered. Please note that due to javascript processing, the icon may not show as being animated. I'm looking into this further and would appreciate any feedback or suggestions with the coding. <span class="tip"><em>New!</em></span> v2.4.</td>
<td>Show an indeterminate timer icon in the header when the table is sorted or filtered. Please note that due to javascript processing, the icon may not show as being animated. I'm looking into this further and would appreciate any feedback or suggestions with the coding (v2.4).</td>
<td><a href="example-option-show-processing.html">Example</a></td>
</tr>
@ -1100,7 +1102,7 @@ From the example function above, you'll end up with something similar to this HT
<td><a href="#" class="toggle2">theme</a></td>
<td>String</td>
<td>"default"</td>
<td>This option will add a theme css class name to the table <code>"tablesorter-{theme}"</code> for styling. <span class="tip"><em>New</em></span> v2.4.
<td>This option will add a theme css class name to the table <code>"tablesorter-{theme}"</code> for styling (v2.4).
<div class="collapsible">
<br>When changing this theme option, make sure that the appropriate css theme file has also been loaded. Included theme files include:
<a href="themes.html" target="_blank" title="open themes in a new window">see all themes</a><br>
@ -1212,7 +1214,7 @@ $(function(){
<td>Boolean</td>
<td>false</td>
<td>
Indicates if tablesorter should apply fixed percentage-based widths to the table columns. <span class="tip"><em>Modified!</em></span> v2.4.
Indicates if tablesorter should apply fixed percentage-based widths to the table columns (modified v2.4).
<div class="collapsible">
Prior to v2.4, this option set pixel widths to added colgroups to fix the column widths. This is useful for the Pager companion.
<br>
@ -1463,7 +1465,7 @@ $(function(){
<td>Array</td>
<td>true</td>
<td>
Columns widget: If true, the class names from the <code>columns</code> option will also be added to the table thead. <span class="tip"><em>New!</em></span> v2.4.
Columns widget: If true, the class names from the <code>columns</code> option will also be added to the table thead (v2.4).
<div class="collapsible">
<br>
Use the <a href="#widget-columns-thead"><code>"columns_thead"</code></a> option to add the column class names to the thead as follows:
@ -1484,7 +1486,7 @@ $(function(){
<td>Array</td>
<td>true</td>
<td>
Columns widget: If true, the class names from the <code>columns</code> option will also be added to the table tfoot. <span class="tip"><em>New!</em></span> v2.4.
Columns widget: If true, the class names from the <code>columns</code> option will also be added to the table tfoot (v2.4).
<div class="collapsible">
<br>
Use the <a href="#widget-columns-tfoot"><code>"columns_tfoot"</code></a> option to add the column class names to the tfoot as follows:
@ -1527,7 +1529,7 @@ $(function(){
<td>Boolean</td>
<td>true</td>
<td>
Filter widget: If <code>true</code>, a filter will be added to the top of each table column. <span class="tip"><em>New!</em></span> v2.4.
Filter widget: If <code>true</code>, a filter will be added to the top of each table column (v2.4).
<div class="collapsible">
<br>
Use the <a href="#widget-filter-columnFilters"><code>filter_columnFilters</code></a> option as follows:
@ -1677,7 +1679,7 @@ $(function(){
<td>Boolean</td>
<td>false</td>
<td>
Filter widget: Set this option to <code>true</code> to hide the filter row initially. The rows is revealed by hovering over the filter row or giving any filter input/select focus. <span class="tip"><em>New!</em></span> v2.4.
Filter widget: Set this option to <code>true</code> to hide the filter row initially. The rows is revealed by hovering over the filter row or giving any filter input/select focus (v2.4).
<div class="collapsible">
<br>
Use the <a href="#widget-filter-hidefilters"><code>filter_hideFilters</code></a> option as follows:
@ -1760,7 +1762,7 @@ $(function(){
<td>String</td>
<td>null</td>
<td>
Filter widget: jQuery selector string of an element used to reset the filters. <span class="tip"><em>New!</em></span> v2.4.
Filter widget: jQuery selector string of an element used to reset the filters (v2.4).
<div class="collapsible">
<p>
To use this option, point to a reset button or link using a jQuery selector. For example, add this button (<code>&lt;button class="reset"&gt;Reset&lt;/button&gt;</code>) to the table header, or anywhere else on the page. That element will be used as a reset for all column and quick search filters (clears all fields):
@ -1817,7 +1819,7 @@ $('table').trigger('search', false);</pre></div>
<td>Boolean</td>
<td>false</td>
<td>
Filter widget: Set this option to <code>true</code> if filtering is performed on the server-side. <span class="tip"><em>New!</em></span> v2.5.3.
Filter widget: Set this option to <code>true</code> if filtering is performed on the server-side (v2.5.3).
<div class="collapsible">
<br>
Use the <a href="#widget-filter-serversidefiltering"><code>filter_serversideFiltering</code></a> option as follows:
@ -1859,7 +1861,7 @@ $('table').trigger('search', false);</pre></div>
<td>Boolean</td>
<td>false</td>
<td>
Filter widget: If <code>true</code>, ALL filter searches will only use parsed data. <span class="tip"><em>New!</em></span> v2.4.
Filter widget: If <code>true</code>, ALL filter searches will only use parsed data (v2.4).
<div class="collapsible">
<br>
Use the <a href="#widget-filter-useParsedData"><code>filter_useParsedData</code></a> option as follows:
@ -1914,7 +1916,7 @@ $('table').trigger('search', false);</pre></div>
<td>Boolean</td>
<td>true</td>
<td>
Resizable widget: If this option is set to <code>false</code>, resized column widths will not be saved. Previous saved values will be restored on page reload. <span class="tip"><em>New!</em></span> v2.4.
Resizable widget: If this option is set to <code>false</code>, resized column widths will not be saved. Previous saved values will be restored on page reload (v2.4).
<div class="collapsible">
<br>
Use the <a href="#widget-resizable"><code>"resizable"</code></a> option to change the css class name as follows:
@ -1936,7 +1938,7 @@ $('table').trigger('search', false);</pre></div>
<td>Boolean</td>
<td>true</td>
<td>
saveSort widget: If this option is set to <code>false</code>, new sorts will not be saved. Any previous saved sort will be restored on page reload. <span class="tip"><em>New!</em></span> v2.4.
saveSort widget: If this option is set to <code>false</code>, new sorts will not be saved. Any previous saved sort will be restored on page reload (v2.4).
<div class="collapsible">
<br>
Use the <a href="#widget-savesort"><code>"saveSort"</code></a> option to change the css class name as follows:
@ -1958,26 +1960,26 @@ $('table').trigger('search', false);</pre></div>
<td>String</td>
<td>"jui"</td>
<td>
** <span class="tip"><em>Updated! in tablesorter v2.4</em></span> **<br>
Instead of the array of icon class names, this option now contains the name of the theme. Currently jQuery UI ("jui") and Bootstrap ("bootstrap") themes are supported. To modify the class names used, extend from the theme
Instead of the array of icon class names, this option now contains the name of the theme. Currently jQuery UI ("jui") and Bootstrap ("bootstrap") themes are supported. To modify the class names used, extend from the theme (updated v2.4)
<div class="collapsible">
<p></p>
<pre class="prettyprint lang-javascript">// Extend the themes to change any of the default class names ** NEW **
$.extend($.tablesorter.themes.jui, {
// change default jQuery uitheme icons - find the full list of icons
// here: http://jqueryui.com/themeroller/ (hover over them for their name)
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
icons : 'ui-icon', // icon class added to the &lt;i&gt; in the header
sortNone : 'ui-icon-carat-2-n-s',
sortAsc : 'ui-icon-carat-1-n',
sortDesc : 'ui-icon-carat-1-s',
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
filterRow: '',
even : 'ui-widget-content', // even row zebra striping
odd : 'ui-state-default' // odd row zebra striping
table : 'ui-widget ui-widget-content ui-corner-all', // table classes
header : 'ui-widget-header ui-corner-all ui-state-default', // header classes
footerRow : '',
footerCells: '',
icons : 'ui-icon', // icon class added to the &lt;i&gt; in the header
sortNone : 'ui-icon-carat-2-n-s',
sortAsc : 'ui-icon-carat-1-n',
sortDesc : 'ui-icon-carat-1-s',
active : 'ui-state-active', // applied when column is sorted
hover : 'ui-state-hover', // hover class
filterRow : '',
even : 'ui-widget-content', // even row zebra striping
odd : 'ui-state-default' // odd row zebra striping
});</pre>
This widget option replaces the previous <a href="#widgetuitheme">widgetUitheme</a>. All theme css names are now contained within the <code>$.tablesorter.themes</code> variable. Extend the default theme as seen above.<br>
@ -1991,26 +1993,29 @@ $.extend($.tablesorter.themes.jui, {
Use the <a href="#widget-uitheme"><code>"uitheme"</code></a> option to change the css class name as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["uitheme"], // initialize ui theme styling widget of the table
theme : 'jui', // set theme name from $.tablesorter.themes here
widgets : ["uitheme"], // initialize ui theme styling widget of the table
widgetOptions: {
uitheme : "jui"
uitheme : "jui" // this is now optional in v2.7, it is overridden by the theme option
}
});
});</pre>
To add a new theme, define it as follows; replace "custom" with the name of your theme:
<pre class="prettyprint lang-javascript">$.tablesorter.themes.custom = {
table : 'table', // table classes
header : 'header', // header classes
icons : 'icon', // icon class added to the &lt;i&gt; in the header
sortNone : 'sort-none', // unsorted header
sortAsc : 'sort-asc', // ascending sorted header
sortDesc : 'sort-desc', // descending sorted header
active : 'sort-active', // applied when column is sorted
hover : 'hover', // hover class
filterRow: 'filters', // class added to the filter row
even : 'even', // even row zebra striping
odd : 'odd' // odd row zebra striping
table : 'table', // table classes
header : 'header', // header classes
footerRow : '',
footerCells: '',
icons : 'icon', // icon class added to the &lt;i&gt; in the header
sortNone : 'sort-none', // unsorted header
sortAsc : 'sort-asc', // ascending sorted header
sortDesc : 'sort-desc', // descending sorted header
active : 'sort-active', // applied when column is sorted
hover : 'hover', // hover class
filterRow : 'filters', // class added to the filter row
even : 'even', // even row zebra striping
odd : 'odd' // odd row zebra striping
}</pre></div>
</td>
<td><a href="example-widget-ui-theme.html">Example</a></td>

87
docs/themes.html
View File

@ -6,7 +6,7 @@
<!-- demo css -->
<style>
.minitable {float:left;width:190px;margin:5px;}
.minitable {float:left;min-width:190px; min-height: 280px; margin:5px;}
.minitable table {width:175px;margin:10px auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.minitable table th {font-size:11px;}
.minitable table td {font-size:11px;padding:4px !important;text-align:center;}
@ -42,37 +42,31 @@
<script>
$(function() {
$('.demo').tablesorter({
widthFixed : true,
widgets : ['zebra','columns'],
sortList : [ [0,0],[1,0],[2,0] ]
$.extend($.tablesorter.defaults, {
widthFixed: true,
widgets : ['zebra','columns'],
sortList : [ [0,0],[1,0],[2,0] ]
});
$('.demo').tablesorter();
// grey & dropbox themes need the {icon} for header icons
$('.tablesorter-dropbox,.tablesorter-grey').tablesorter({
widthFixed : true,
headerTemplate: '{content}{icon}', // dropbox theme doesn't like a space between the content & icon
widgets : ['zebra','columns'],
sortList : [ [0,0],[1,0],[2,0] ]
headerTemplate: '{content}{icon}' // dropbox theme doesn't like a space between the content & icon
});
$('.tablesorter-bootstrap').tablesorter({
theme : 'bootstrap',
widthFixed : true,
headerTemplate: '{content} {icon}',
widgets : ['zebra','columns', 'uitheme'],
sortList : [ [0,0],[1,0],[2,0] ]
widgets : ['zebra','columns', 'uitheme']
});
$('.tablesorter-jui').tablesorter({
theme : 'jui',
widthFixed : true,
headerTemplate: '{content} {icon}',
widgets : ['zebra','columns', 'uitheme'],
sortList : [ [0,0],[1,0],[2,0] ]
widgets : ['zebra','columns', 'uitheme']
});
});
</script>
</head>
@ -94,6 +88,7 @@ $(function() {
</tbody>
</table>
</div>
<div class="minitable">
<h3>blue</h3>
<table class="demo tablesorter-blue">
@ -108,20 +103,6 @@ $(function() {
</tbody>
</table>
</div>
<div class="minitable">
<h3>Bootstrap</h3>
<table class="tablesorter-bootstrap">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>dark</h3>
@ -137,6 +118,7 @@ $(function() {
</tbody>
</table>
</div>
<div class="minitable">
<h3>default</h3>
<table class="demo tablesorter-default">
@ -151,20 +133,6 @@ $(function() {
</tbody>
</table>
</div>
<div class="minitable">
<h3>dropbox</h3>
<table class="tablesorter-dropbox">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>green</h3>
@ -180,6 +148,7 @@ $(function() {
</tbody>
</table>
</div>
<div class="minitable">
<h3>grey</h3>
<table class="tablesorter-grey">
@ -194,6 +163,7 @@ $(function() {
</tbody>
</table>
</div>
<div class="minitable">
<h3>ice</h3>
<table class="demo tablesorter-ice">
@ -209,6 +179,21 @@ $(function() {
</table>
</div>
<div class="minitable">
<h3>Bootstrap</h3>
<table class="tablesorter-bootstrap">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
<div class="minitable">
<h3>jQuery UI</h3>
<table class="tablesorter-jui">
@ -224,6 +209,20 @@ $(function() {
</table>
</div>
<div class="minitable">
<h3>dropbox</h3>
<table class="tablesorter-dropbox">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
</tbody>
</table>
</div>
</div>

4
js/jquery.tablesorter.js
View File

@ -1,5 +1,5 @@
/*!
* TableSorter 2.7.3 - Client-side table sorting with ease!
* TableSorter 2.7.4 - Client-side table sorting with ease!
* @requires jQuery v1.2.6+
*
* Copyright (c) 2007 Christian Bach
@ -24,7 +24,7 @@
var ts = this;
ts.version = "2.7.3";
ts.version = "2.7.4";
ts.parsers = [];
ts.widgets = [];

4
js/jquery.tablesorter.min.js vendored
View File

File diff suppressed because one or more lines are too long

17
js/jquery.tablesorter.widgets.min.js vendored
View File

File diff suppressed because one or more lines are too long

80
package.json
View File

@ -1,42 +1,42 @@
{
"name": "tablesorter",
"version": "2.7.3",
"title": "tablesorter",
"author": {
"name": "Christian Bach",
"url": "http://tablesorter.com/"
},
"licenses": [
{
"type": "MIT",
"url": "http://www.opensource.org/licenses/mit-license.php"
},
{
"type": "GPL",
"url": "http://www.gnu.org/licenses/gpl.html"
}
],
"dependencies": {
"jquery": ">=1.2.6"
},
"description": "tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.\n\nThis forked version adds lots of new enhancements including: alphanumeric sorting, pager callback functons, multiple widgets providing column styling, ui theme application, sticky headers, column filters and resizer, as well as extended documentation with a lot more demos.",
"keywords": [
"table",
"sort",
"sorting",
"alphanumeric sort",
"natural sort"
],
"homepage": "http://mottie.github.com/tablesorter/docs/index.html",
"maintainers": [
{
"name": "Rob Garrison",
"url": "https://github.com/Mottie"
}
],
"files": [
"css/theme.blue.css",
"js/",
"/addons/pager/"
]
"name": "tablesorter",
"title": "tablesorter",
"version": "2.7.4",
"description": "tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.\n\nThis forked version adds lots of new enhancements including: alphanumeric sorting, pager callback functons, multiple widgets providing column styling, ui theme application, sticky headers, column filters and resizer, as well as extended documentation with a lot more demos.",
"main": "js/tablesorter.js",
"author": {
"name": "Christian Bach",
"url": "http://tablesorter.com/"
},
"maintainers": [{
"name": "Rob Garrison",
"url": "https://github.com/Mottie"
}],
"licenses": [{
"type": "MIT",
"url": "http://www.opensource.org/licenses/mit-license.php"
},{
"type": "GPL",
"url": "http://www.gnu.org/licenses/gpl.html"
}],
"homepage": "http://mottie.github.com/tablesorter/",
"bugs": "https://github.com/Mottie/tablesorter/issues",
"docs": "http://mottie.github.com/tablesorter/docs/index.html",
"demo": "https://github.com/Mottie/tablesorter/wiki",
"dependencies": {
"jquery": ">=1.2.6"
},
"keywords": [
"table",
"sort",
"sorting",
"alphanumeric",
"natural"
],
"files": [
"css/theme.default.css",
"js/jquery.tablesorter.min.js",
"js/jquery.tablesorter.widgets.min.js",
"addons/pager/"
]
}