library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-10-08 13:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

All class names used for finding elements have new "empty" default values. Fixes #381

Browse Source
This commit is contained in:
Mottie 2013-10-08 12:41:44 -05:00
parent d589d3272e
commit 12ca586011
10 changed files with 204 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -275,11 +275,11 @@
c.$headers.each(function(j){
var $t = $(this), icn;
// add new test within the first span it finds, or just in the header
if ( $t.find('.' + c.cssIcon).length ) {
icn = $t.find('.' + c.cssIcon).clone(true);
if ( $t.find('.' + ts.css.icon).length ) {
icn = $t.find('.' + ts.css.icon).clone(true);
$t.find('.tablesorter-header-inner').html( th[j] ).append(icn);
if ( hsh && $sh.length ) {
icn = $sh.eq(j).find('.' + c.cssIcon).clone(true);
icn = $sh.eq(j).find('.' + ts.css.icon).clone(true);
$sh.eq(j).find('.tablesorter-header-inner').html( th[j] ).append(icn);
}
} else {

4
docs/example-widget-filter-custom.html
View File

@ -68,8 +68,8 @@
widgetOptions : {
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
// extra css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : '',
// If there are child rows in the table (rows with class name from "cssChildRow" option)
// and this option is true and a match is found anywhere in the child row, then it will make that row

6
docs/example-widget-filter.html
View File

@ -55,8 +55,8 @@
// if you set this to false, make sure you perform a search using the second method below
filter_columnFilters : true,
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
// extra css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : '',
// class added to filtered rows (rows that are not showing); needed by pager plugin
filter_filteredRow : 'filtered',
@ -219,7 +219,7 @@ $(function(){
<ul>
<li><code>filter_childRows : false</code> - if true, filter includes child row content in the search.</li>
<li><code>filter_columnFilters : true</code> - if true, a filter will be added to the top of each table column.</li>
<li><code>filter_cssFilter : 'tablesorter-filter'</code> - css class name added to the filter row & each input in the row.</li>
<li><code>filter_cssFilter : ''</code> - extra css class name added to the filter row & each input in the row.</li>
<li><code>filter_filteredRow : 'filtered'</code> - css class name added to filtered rows (rows that are not showing); needed by pager plugin.</li>
<li><code>filter_formatter : null</code> - add custom filter elements to the filter row.</li>
<li><code>filter_functions : null</code> - add custom filter functions using this option.</li>

6
docs/example-widget-sticky-header.html
View File

@ -42,8 +42,8 @@
widgetOptions: {
// css class name applied to the sticky header row (tr)
stickyHeaders : 'tablesorter-stickyHeader',
// extra css class name applied to the sticky header row (tr) - changed in v2.11
stickyHeaders : '',
// adding zebra striping, using content and default styles - the ui css removes the background from default
// even and odd class names included for this demo to allow switching themes
@ -107,7 +107,7 @@ $(function() {
<li>Table captions and any additional rows (filter widget row) will also be included in the sticky header (<span class="version">v2.9</span>).</li>
<li>You will need to modify the <code>headerTemplate</code> option to include the jQuery UI icon! See the example in the code (v2.7).</li>
<li>Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!</li>
<li>Added a widget option named <code>stickyHeader</code> option which contains the css class name applied to the actual sticky header (v2.1).</li>
<li>Added a widget option named <code>stickyHeaders</code> option which contains the css class name applied to the actual sticky header (v2.1). Modified in <span class="version">v2.11</span> so that "tablesorter-stickyHeader" class is always added and this option only adds additional classes.</li>
<li>Multiple rows in the header will become sticky (v2.1.17).</li>
<li>The filter widget adds a row to the table header, but that row will not be included in the sticky header.</li>
<li>Add the class name <code>sticky-false</code> to any header rows you don't want to become sticky (v2.1.18).</li>

210
docs/index.html
View File

@ -435,10 +435,11 @@
<tr id="cssasc">
<td><a href="#" class="toggle2">cssAsc</a></td>
<td>String</td>
<td>&quot;tablesorter-headerAsc&quot;</td>
<td>The CSS style used to style the header when sorting ascending. Default value (changed v2.5).
<div class="collapsible">
Example from the blue theme:
<td>&quot;&quot;</td>
<td>Additional CSS class applied to style the header with a ascending sort - <span class="version updated">v2.11</span>.
<div class="collapsible"><br>
Changed to empty string in v2.11, as the <code>&quot;tablesorter-headerAsc&quot;</code> class will always be added to a header cell with an ascending sort; this option now contains any additional class names to add. Previous default value changed v2.5.
<p>Example from the blue theme:</p>
<pre class="prettyprint lang-css">.tablesorter-blue .tablesorter-headerAsc {
background-color: #9fbfdf;
background-image: url(black-asc.gif);
@ -451,7 +452,7 @@
<td><a class="toggle" href="#">cssChildRow</a></td>
<td>String</td>
<td>&quot;tablesorter-childRow&quot;</td>
<td>Add this css class to a child row that should always be attached to its parent. Click on the &quot;cssChildRow&quot; link to toggle the view on the attached child row. Previous default was &quot;expand-child&quot; (Changed in v2.4).</td>
<td>Add this css class to a child row that should always be attached to its parent. Click on the &quot;cssChildRow&quot; link to toggle the view on the attached child row. Previous default was &quot;expand-child&quot; (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">
@ -505,10 +506,11 @@
<tr id="cssdesc">
<td><a href="#" class="toggle2">cssDesc</a></td>
<td>String</td>
<td>&quot;tablesorter-headerDesc&quot;</td>
<td>The CSS style used to style the header when sorting descending. Default value (changed v2.5).
<div class="collapsible">
Example from the blue theme:
<td>&quot;&quot;</td>
<td>Additional CSS class applied to style the header with a descending sort - <span class="version updated">v2.11</span>.
<div class="collapsible"><br>
Changed to empty string in v2.11, as the <code>&quot;tablesorter-headerDesc&quot;</code> class will always be added to a header cell with a descending sort; this option now contains any additional class names to add. Previous default value changed v2.5.
<p>Example from the blue theme:</p>
<pre class="prettyprint lang-css">.tablesorter-blue .tablesorter-headerDesc {
background-color: #8cb3d9;
background-image: url(black-desc.gif);
@ -520,10 +522,11 @@
<tr id="cssheader">
<td><a href="#" class="toggle2">cssHeader</a></td>
<td>String</td>
<td>&quot;tablesorter-header&quot;</td>
<td>The CSS style used to style the header in its unsorted state.
<div class="collapsible">
Example from the blue theme:
<td>&quot;&quot;</td>
<td>Additional CSS class applied to style the headers - <span class="version updated">v2.11</span>
<div class="collapsible"><br>
Changed to empty string in v2.11, as the <code>&quot;tablesorter-header&quot;</code> class will always be added to the table headers; this option now contains any additional class names to add.
<p>Example from the blue theme:</p>
<pre class="prettyprint lang-css">.tablesorter-blue .tablesorter-header {
background-color: #99bfe6;
background-repeat: no-repeat;
@ -539,10 +542,11 @@
<tr id="cssheaderrow">
<td><a href="#" class="toggle2">cssHeaderRow</a></td>
<td>String</td>
<td>&quot;tablesorter-headerRow&quot;</td>
<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.
<td>&quot;&quot;</td>
<td>Additional CSS class applied to style the header row - <span class="version updated">v2.11</span>
<div class="collapsible"><br>
Changed to empty string in v2.11, as the <code>&quot;tablesorter-headerRow&quot;</code> class will always be added to a table header row; this option now contains any additional class names to add.<br>
<p>This CSS style was added in v2.4, prior to that 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.</p>
</div>
</td>
<td></td>
@ -554,7 +558,7 @@
<td>&quot;tablesorter-icon&quot;</td>
<td>The CSS style used to style the header cell icon (modified v2.7).
<div class="collapsible"><br>
As of v2.4, an &lt;i&gt; element, with this class name, is automatically appended to the header cells. To prevent the plugin from adding an &lt;i&gt; element to the headers, set the <code>cssIcon</code> option to an empty string.<br>
As of v2.4, an <code>&lt;i&gt;</code> element, with this class name, is automatically appended to the header cells. To prevent the plugin from adding an <code>&lt;i&gt;</code> element to the headers, set the <code>cssIcon</code> option to an empty string.<br>
<br>
In v2.7, the icon will only be added to the header if <strong>both</strong> the <code>cssIcon</code> option is set AND the <code>headerTemplate</code> option includes the icon tag (<code>{icon}</code>).
</div>
@ -563,10 +567,15 @@
</tr>
<tr id="cssprocessing">
<td><span class="permalink">cssProcessing</span></td>
<td><a href="#" class="toggle2">cssProcessing</a></td>
<td>String</td>
<td>&quot;tablesorter-processing&quot;</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>&quot;&quot;</td>
<td>Additional CSS class applied to style the header cell while it is being sorted or filtered - <span class="version updated">v2.11</span>
<div class="collapsible"><br>
Changed to empty string in v2.11, as the <code>&quot;tablesorter-processing&quot;</code> class will always be added to a table cells during processing; this option now contains any additional class names to add.<br>
<p>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).</p>
</div>
</td>
<td></td>
</tr>
@ -636,10 +645,10 @@
});</pre>
Individual columns can be modified by adding the following (they all do the same thing), set in order of priority (Modified v2.3.1):
<ul>
<li>jQuery data <code>data-dateFormat="mmddyyyy"</code>.</li>
<li>metadata <code>class="{ dateFormat: 'mmddyyyy'}"</code>. This requires the metadata plugin.</li>
<li>jQuery data <code>data-dateFormat=&quot;mmddyyyy&quot;</code>.</li>
<li>metadata <code>class=&quot;{ dateFormat: 'mmddyyyy'}&quot;</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { dateFormat : 'mmddyyyy' } }</code>.</li>
<li>header class name <code>class="dateFormat-mmddyyyy"</code>.</li>
<li>header class name <code>class=&quot;dateFormat-mmddyyyy&quot;</code>.</li>
<li>Overall <code>dateFormat</code> option.</li>
</ul>
</div>
@ -681,10 +690,10 @@
</ul>
Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
<ul>
<li>jQuery data <code>data-empty="top"</code>.</li>
<li>metadata <code>class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li>
<li>jQuery data <code>data-empty=&quot;top&quot;</code>.</li>
<li>metadata <code>class=&quot;{ empty: 'top'}&quot;</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { empty : 'top' } }</code>.</li>
<li>header class name <code>class="empty-top"</code>.</li>
<li>header class name <code>class=&quot;empty-top&quot;</code>.</li>
<li>Overall <code>emptyTo</code> option.</li>
</ul>
<code>emptyToBottom</code> option was added in v2.1.11, then replaced by the <code>emptyTo</code> option in v2.1.16.
@ -864,17 +873,17 @@ From the example function above, you'll end up with something similar to this HT
<br>
<table class="info"><tbody>
<tr><th><code>sorter: false</code></th><td>disable sort for this column.</td></tr>
<tr><th><code>sorter: "text"</code></th><td>Sort alpha-numerically.</td></tr>
<tr><th><code>sorter: "digit"</code></th><td>Sort numerically.</td></tr>
<tr><th><code>sorter: "currency"</code></th><td>Sort by currency value (supports "&#163;$&#8364;&#x00a4;&#x00a5;&#x00a2;").</td></tr>
<tr><th><code>sorter: "ipAddress"</code></th><td>Sort by IP Address.</td></tr>
<tr><th><code>sorter: "url"</code></th><td>Sort by url.</td></tr>
<tr><th><code>sorter: "isoDate"</code></th><td>Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD; these formats can be followed by a time).</td></tr>
<tr><th><code>sorter: "percent"</code></th><td>Sort by percent.</td></tr>
<tr><th><code>sorter: "usLongDate"</code></th><td>Sort by date (U.S. Standard, e.g. Jan 18, 2001 9:12 AM or 18 Jan 2001 9:12 AM (new in v2.7.4)).</td></tr>
<tr><th><code>sorter: "shortDate"</code></th><td>Sort by a shortened date (see <a href="#dateformat"><code>dateFormat</code></a>; these formats can also be followed by a time).</td></tr>
<tr><th><code>sorter: "time"</code></th><td>Sort by time (23:59 or 12:59 pm).</td></tr>
<tr><th><code>sorter: "metadata"</code></th><td>Sort by the sorter value in the metadata - requires the metadata plugin.</td></tr>
<tr><th><code>sorter: &quot;text&quot;</code></th><td>Sort alpha-numerically.</td></tr>
<tr><th><code>sorter: &quot;digit&quot;</code></th><td>Sort numerically.</td></tr>
<tr><th><code>sorter: &quot;currency&quot;</code></th><td>Sort by currency value (supports "&#163;$&#8364;&#x00a4;&#x00a5;&#x00a2;").</td></tr>
<tr><th><code>sorter: &quot;ipAddress&quot;</code></th><td>Sort by IP Address.</td></tr>
<tr><th><code>sorter: &quot;url&quot;</code></th><td>Sort by url.</td></tr>
<tr><th><code>sorter: &quot;isoDate&quot;</code></th><td>Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD; these formats can be followed by a time).</td></tr>
<tr><th><code>sorter: &quot;percent&quot;</code></th><td>Sort by percent.</td></tr>
<tr><th><code>sorter: &quot;usLongDate&quot;</code></th><td>Sort by date (U.S. Standard, e.g. Jan 18, 2001 9:12 AM or 18 Jan 2001 9:12 AM (new in v2.7.4)).</td></tr>
<tr><th><code>sorter: &quot;shortDate&quot;</code></th><td>Sort by a shortened date (see <a href="#dateformat"><code>dateFormat</code></a>; these formats can also be followed by a time).</td></tr>
<tr><th><code>sorter: &quot;time&quot;</code></th><td>Sort by time (23:59 or 12:59 pm).</td></tr>
<tr><th><code>sorter: &quot;metadata&quot;</code></th><td>Sort by the sorter value in the metadata - requires the metadata plugin.</td></tr>
</tbody></table><br>
Check out the <a href="#headers"><code>headers</code></a> option to see how to use these parsers in your table (example #1).<br>Or add a header class name using "sorter-" plus the parser name (example #2), this includes custom parsers (example #3).
</div>
@ -1007,17 +1016,17 @@ From the example function above, you'll end up with something similar to this HT
<td>String</td>
<td>&quot;asc&quot;</td>
<td>
This sets the direction a column will sort when clicking on the header for the first time. Valid arguments are <code>"asc"</code> for Ascending or <code>"desc"</code> for Descending.<br>
This sets the direction a column will sort when clicking on the header for the first time. Valid arguments are <code>&quot;asc&quot;</code> for Ascending or <code>&quot;desc&quot;</code> for Descending.<br>
<div class="collapsible">
<br>
This order can also be set by desired column using the <a href="#headers"><code>headers</code></a> option (Added in v2.0.8).<br>
<br>
Individual columns can be modified by adding the following (they all do the same thing), set in order of priority (Modified v2.3.1):
<ul>
<li>jQuery data <code>data-sortInitialOrder="asc"</code>.</li>
<li>metadata <code>class="{ sortInitialOrder: 'asc'}"</code>. This requires the metadata plugin.</li>
<li>jQuery data <code>data-sortInitialOrder=&quot;asc&quot;</code>.</li>
<li>metadata <code>class=&quot;{ sortInitialOrder: 'asc'}&quot;</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { sortInitialOrder : 'asc' } }</code>.</li>
<li>header class name <code>class="sortInitialOrder-asc"</code>.</li>
<li>header class name <code>class=&quot;sortInitialOrder-asc&quot;</code>.</li>
<li>Overall <code>sortInitialOrder</code> option.</li>
</ul>
</div>
@ -1082,7 +1091,7 @@ From the example function above, you'll end up with something similar to this HT
<td>sortResetKey</td>
<td>String</td>
<td>&quot;ctrlKey&quot;</td>
<td>The key used to reset sorting on the entire table. Defaults to the control key. The other options are <code>"shiftKey"</code> or <code>"altKey"</code>. Reference: <a class="external" href="https://developer.mozilla.org/en/DOM/MouseEvent">https://developer.mozilla.org/en/DOM/MouseEvent</a></td>
<td>The key used to reset sorting on the entire table. Defaults to the control key. The other options are <code>&quot;shiftKey&quot;</code> or <code>&quot;altKey&quot;</code>. Reference: <a class="external" href="https://developer.mozilla.org/en/DOM/MouseEvent">https://developer.mozilla.org/en/DOM/MouseEvent</a></td>
<td></td>
</tr>
@ -1100,7 +1109,7 @@ From the example function above, you'll end up with something similar to this HT
<td><span class="permalink">sortMultiSortKey</span></td>
<td>String</td>
<td>&quot;shiftKey&quot;</td>
<td>The key used to select more than one column for multi-column sorting. Defaults to the shift key. The other options are <code>"ctrlKey"</code> or <code>"altKey"</code>. Reference: <a class="external" href="https://developer.mozilla.org/en/DOM/MouseEvent">https://developer.mozilla.org/en/DOM/MouseEvent</a></td>
<td>The key used to select more than one column for multi-column sorting. Defaults to the shift key. The other options are <code>&quot;ctrlKey&quot;</code> or <code>&quot;altKey&quot;</code>. Reference: <a class="external" href="https://developer.mozilla.org/en/DOM/MouseEvent">https://developer.mozilla.org/en/DOM/MouseEvent</a></td>
<td><a href="example-option-sort-key.html">Example</a></td>
</tr>
@ -1113,18 +1122,18 @@ From the example function above, you'll end up with something similar to this HT
<div class="collapsible"><br>
String options was initially set in the header options only. Overall option added and values changed in version 2.1.16; setting the value to:
<ul>
<li><code>"max"</code> will treat any text in that column as a value greater than the <em>max</em> (more positive) value. Renamed from "max+".</li>
<li><code>"min"</code> will treat any text in that column as a value greater than the <em>min</em> (more negative) value. Renamed from "max-".</li>
<li><code>"top"</code> will always sort the text to the top of the column.</li>
<li><code>"bottom"</code> will always sort the text to the bottom of the column.</li>
<li><code>"none"</code> or <code>"zero"</code> will treat the text as if it has a value of zero.</li>
<li><code>&quot;max&quot;</code> will treat any text in that column as a value greater than the <em>max</em> (more positive) value. Renamed from "max+".</li>
<li><code>&quot;min&quot;</code> will treat any text in that column as a value greater than the <em>min</em> (more negative) value. Renamed from "max-".</li>
<li><code>&quot;top&quot;</code> will always sort the text to the top of the column.</li>
<li><code>&quot;bottom&quot;</code> will always sort the text to the bottom of the column.</li>
<li><code>&quot;none&quot;</code> or <code>&quot;zero&quot;</code> will treat the text as if it has a value of zero.</li>
</ul>
Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
<ul>
<li>jQuery data <code>data-string="top"</code>.</li>
<li>metadata <code>class="{ string: 'top'}"</code>. This requires the metadata plugin.</li>
<li>jQuery data <code>data-string=&quot;top&quot;</code>.</li>
<li>metadata <code>class=&quot;{ string: 'top'}&quot;</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { string : 'top' } }</code>.</li>
<li>header class name <code>class="string-top"</code>.</li>
<li>header class name <code>class=&quot;string-top&quot;</code>.</li>
<li>Overall <code>stringTo</code> option.</li>
</ul>
</div>
@ -1135,10 +1144,12 @@ From the example function above, you'll end up with something similar to this HT
<tr id="tableClass">
<td><a href="#" class="toggle2">tableClass</a></td>
<td>String</td>
<td>&quot;tablesorter&quot;</td>
<td>This class was required in the default markup in version 2.0.5. But in version 2.0.6, it was added as an option.
<div class="collapsible">
<br>Change this option if you are not using the default css, or if you are using a completely custom stylesheet.
<td>&quot;&quot;</td>
<td>Additional CSS class applied to style the table - <span class="version updated">v2.11</span>
<div class="collapsible"><br>
Changed to empty string in v2.11, as the <code>&quot;tablesorter&quot;</code> class will always be added to the table; this option now contains any additional class names to add.
<p>This class was required in the default markup in version 2.0.5. But in version 2.0.6, it was added as an option.</p>
Modify this option if you are not using the default css, or if you are using a completely custom stylesheet.
</div>
</td>
<td></td>
@ -1148,7 +1159,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>&quot;default&quot;</td>
<td>This option will add a theme css class name to the table <code>"tablesorter-{theme}"</code> for styling (v2.4).
<td>This option will add a theme css class name to the table <code>&quot;tablesorter-{theme}&quot;</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>
@ -1163,7 +1174,7 @@ From the example function above, you'll end up with something similar to this HT
<td>String Or Function</td>
<td>&quot;simple&quot;</td>
<td>Defines which method is used to extract data from a table cell for sorting.
The built-in option is <code>"simple"</code> which is the equivalent of doing this inside of the textExtraction function: <code>$(node).text();</code>.
The built-in option is <code>&quot;simple&quot;</code> which is the equivalent of doing this inside of the textExtraction function: <code>$(node).text();</code>.
<div class="collapsible">
<br>
You can customize the text extraction by writing your own text extraction function "myTextExtraction" which you define like:
@ -1303,7 +1314,7 @@ $(function(){
// show column filters
filter_columnFilters : true,
// css class applied to the filter row inputs/select
filter_cssFilter : 'tablesorter-filter',
filter_cssFilter : '',
// data attribute in the header cell that contains the default filter value
filter_defaultAttrib : 'data-value',
// class added to filtered rows; needed by pager plugin
@ -1378,7 +1389,7 @@ $(function(){
It has been replaced by <a href="#widget-columns"><code>widgetOptions.columns</code></a>; but is still available for backwards compatibility.
<div class="collapsible">
<br>
When the column styling widget is initialized, it automatically applied the default class names of <code>"primary"</code> for the primary sort, <code>"secondary"</code> for the next sort, <code>"tertiary"</code> for the next sort, and so on (add more as needed)... (v2.0.17).
When the column styling widget is initialized, it automatically applied the default class names of <code>&quot;primary&quot;</code> for the primary sort, <code>&quot;secondary&quot;</code> for the next sort, <code>&quot;tertiary&quot;</code> for the next sort, and so on (add more as needed)... (v2.0.17).
Use the <a href="#widgetcolumns"><code>widgetColumns</code></a> option to change the css class name as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
@ -1399,7 +1410,7 @@ $(function(){
It has been replaced by <a href="#widget-uitheme"><code>widgetOptions.uitheme</code></a>; but is still available for backwards compatibility.
<div class="collapsible">
<br>
Used when the ui theme styling widget is initialized. It automatically applies the default class names of <code>"ui-icon-arrowthick-2-n-s"</code> for the unsorted column, <code>"ui-icon-arrowthick-1-s"</code> for the descending sort and <code>"ui-icon-arrowthick-1-n"</code> for the ascending sort. (v2.0.9).
Used when the ui theme styling widget is initialized. It automatically applies the default class names of <code>&quot;ui-icon-arrowthick-2-n-s&quot;</code> for the unsorted column, <code>&quot;ui-icon-arrowthick-1-s&quot;</code> for the descending sort and <code>&quot;ui-icon-arrowthick-1-n&quot;</code> for the ascending sort. (v2.0.9).
Find more jQuery UI class names by hovering over the Framework icons on this page: <a class="external" href="http://jqueryui.com/themeroller/">http://jqueryui.com/themeroller/</a><br>
<br>
Use the <a href="#widgetuitheme"><code>widgetUitheme</code></a> option to change the css class name as follows:
@ -1428,7 +1439,7 @@ $(function(){
It has been replaced by <a href="#widget-zebra"><code>widgetOptions.zebra</code></a>; but is still available for backwards compatibility.
<div class="collapsible">
<br>
When the zebra striping widget is initialized, it automatically applied the default class names of <code>"even"</code> and <code>"odd"</code>.
When the zebra striping widget is initialized, it automatically applied the default class names of <code>&quot;even&quot;</code> and <code>&quot;odd&quot;</code>.
Use the <a href="#widgetzebra"><code>widgetZebra</code></a> option to change the css class name as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
@ -1502,10 +1513,10 @@ $(function(){
<td>Array</td>
<td>[ "primary", "secondary", "tertiary" ]</td>
<td>
Columns widget: When the column styling widget is initialized, it automatically applied the default class names of <code>"primary"</code> for the primary sort, <code>"secondary"</code> for the next sort, <code>"tertiary"</code> for the next sort, and so on (add more as needed)... (Modified v2.1).
Columns widget: When the column styling widget is initialized, it automatically applied the default class names of <code>&quot;primary&quot;</code> for the primary sort, <code>&quot;secondary&quot;</code> for the next sort, <code>&quot;tertiary&quot;</code> for the next sort, and so on (add more as needed)... (Modified v2.1).
<div class="collapsible">
<br>
Use the <a href="#widget-columns"><code>"columns"</code></a> option to change the css class name as follows:
Use the <a href="#widget-columns"><code>&quot;columns&quot;</code></a> option to change the css class name as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["columns"], // initialize column styling of the table
@ -1526,7 +1537,7 @@ $(function(){
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:
Use the <a href="#widget-columns-thead"><code>&quot;columns_thead&quot;</code></a> option to add the column class names to the thead as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["columns"], // initialize column styling of the table
@ -1547,7 +1558,7 @@ $(function(){
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:
Use the <a href="#widget-columns-tfoot"><code>&quot;columns_tfoot&quot;</code></a> option to add the column class names to the tfoot as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["columns"], // initialize column styling of the table
@ -1565,7 +1576,7 @@ $(function(){
<td>Boolean</td>
<td>false</td>
<td>
Filter widget: If there are child rows in the table (rows with class name from <a href="#csschildrow"><code>"cssChildRow"</code></a> option) and this option is <code>true</code> and a match is found anywhere in the child row, then it will make that row visible.
Filter widget: If there are child rows in the table (rows with class name from <a href="#csschildrow"><code>&quot;cssChildRow&quot;</code></a> option) and this option is <code>true</code> and a match is found anywhere in the child row, then it will make that row visible.
(Modified v2.1).
<div class="collapsible">
<br>
@ -1606,13 +1617,12 @@ $(function(){
<tr id="widget-filter-cssfilter">
<td><a href="#" class="toggle2">filter_cssFilter</a></td>
<td>String</td>
<td>&quot;tablesorter-filter&quot;</td>
<td>
Filter widget: This is the class name applied to each input within the filter row (v2.1).
<div class="collapsible">
<br>
Use the <a href="#widget-filter-cssfilter"><code>"tablesorter-filter"</code></a> option to change the css class name as follows:
<pre class="prettyprint lang-javascript">$(function(){
<td>&quot;&quot;</td>
<td>Additional CSS class applied to each filter - <span class="version updated">v2.11</span>
<div class="collapsible"><br>
Changed to empty string in v2.11, as the <code>&quot;tablesorter-filter&quot;</code> class will always be added to the filter; this option now contains any additional class names to add.
<p>Use the <a href="#widget-filter-cssfilter"><code>&quot;tablesorter-filter&quot;</code></a> option to add an extra css class name as follows:</p>
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["filter"],
widgetOptions : {
@ -1620,7 +1630,7 @@ $(function(){
filter_cssFilter : "tablesorter-filter"
}
});
});</pre>If you change it from the default class name of <code>"tablesorter-filter"</code> make sure you also update the css!<br>
});</pre>
</div>
</td>
<td><a href="example-widget-filter.html">Example</a></td>
@ -1692,7 +1702,7 @@ $(function(){
<td>
Filter widget: Customize the filter widget by adding a select dropdown with content, custom options or custom filter functions (v2.3.6).
<div class="collapsible">
Use the <a href="#widget-filter-functions"><code>"filter_functions"</code></a> option in three different ways:
Use the <a href="#widget-filter-functions"><code>&quot;filter_functions&quot;</code></a> option in three different ways:
<br>
<ul>
<li>
@ -1985,10 +1995,10 @@ $('table').trigger('search', false);</pre></div>
<ul>
<li>To only use parsed data in specific columns, set this option to <code>false</code> and use any of the following (they all do the same thing), set in order of priority:
<ul>
<li>jQuery data <code>data-filter="parsed"</code>.</li>
<li>metadata <code>class="{ filter: 'parsed'}"</code>. This requires the metadata plugin.</li>
<li>jQuery data <code>data-filter=&quot;parsed&quot;</code>.</li>
<li>metadata <code>class=&quot;{ filter: 'parsed'}&quot;</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { filter : 'parsed' } }</code>.</li>
<li>header class name <code>class="filter-parsed"</code>.</li>
<li>header class name <code>class=&quot;filter-parsed&quot;</code>.</li>
</ul>
</li>
<li>Remember that parsed data most likely doesn't match the actual table cell text, <code>20%</code> becomes <code>20</code> and <code>Jan 1, 2013 12:01 AM</code> becomes <code>1357020060000</code>.</li>
@ -2022,15 +2032,13 @@ $('table').trigger('search', false);</pre></div>
<tr id="widget-sticky-headers">
<td><a href="#" class="toggle2">stickyHeaders</a></td>
<td>String</td>
<td>&quot;tablesorter-stickyHeader&quot;</td>
<td>
Sticky Headers widget: This is the class name applied to the sticky header row (tr) (v2.1).
<div class="collapsible">
<br>
If you change it from the default class name of <code>"tablesorter-stickyHeader"</code> make sure you also update the css!<br>
<br>
Use the <a href="#widget-sticky-headers"><code>"stickyHeaders"</code></a> option to change the css class name as follows:
<pre class="prettyprint lang-javascript">$(function(){
<td>&quot;&quot;</td>
<td>Sticky Headers widget: This additional CSS class applied to the sticky header row - <span class="version updated">v2.11</span>
<div class="collapsible"><br>
Changed to empty string in v2.11, as the <code>&quot;tablesorter-stickyHeader&quot;</code> class will always be added to the sticky header row; this option now contains any additional class names to add.
<p>Previously, this option contained the class name to be applied to the sticky header row (tr) (v2.1).<p>
Use the <a href="#widget-sticky-headers"><code>&quot;stickyHeaders&quot;</code></a> option to add an extra css class name as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["stickyHeaders"],
widgetOptions : {
@ -2051,9 +2059,9 @@ $('table').trigger('search', false);</pre></div>
Sticky Headers widget: If the table has an ID defined, the suffix from this option will be added to the ID in the cloned sticky table (<span class="version">v2.9</span>).
<div class="collapsible">
<br>
So if your table ID is <code>"gummy"</code>, then the cloned sticky table id becomes <code>"gummy-sticky"</code><br>
So if your table ID is <code>&quot;gummy&quot;</code>, then the cloned sticky table id becomes <code>&quot;gummy-sticky&quot;</code><br>
<br>
Use the <a href="#widget-sticky-headers-cloneid"><code>"stickyHeaders_cloneId"</code></a> option to change the cloned table id as follows:
Use the <a href="#widget-sticky-headers-cloneid"><code>&quot;stickyHeaders_cloneId&quot;</code></a> option to change the cloned table id as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["stickyHeaders"],
@ -2097,7 +2105,7 @@ $('table').trigger('search', false);</pre></div>
Sticky Headers widget: Set the sticky header offset from the top as a <em>Number</em> or jQuery selector <em>string</em> or <em>object</em> (<span class="version">v2.10</span>).
<div class="collapsible">
<br>
If the page includes a fixed navigation bar at the top, like Bootstrap, set <a href="#widget-sticky-headers-offset"><code>"stickyHeaders_offset"</code></a> option to offset the sticky table header to be below the fixed navigation by setting this option using any of the following examples:<br>
If the page includes a fixed navigation bar at the top, like Bootstrap, set <a href="#widget-sticky-headers-offset"><code>&quot;stickyHeaders_offset&quot;</code></a> option to offset the sticky table header to be below the fixed navigation by setting this option using any of the following examples:<br>
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["stickyHeaders"],
@ -2124,7 +2132,7 @@ $('table').trigger('search', false);</pre></div>
While this option is <code>true</code>, a timer is initialized to check the width of every header cell every 1/4 second. If this causes lag, or any other problems, set this option to <code>false</code>.
When this option is <code>false</code>, sticky table headers are unable to detect and match the width of the original table headers when content is added or removed.<br>
<br>
Use the <a href="#widget-sticky-headers-addresizeevent"><code>"stickyHeaders_addResizeEvent"</code></a> option as follows:
Use the <a href="#widget-sticky-headers-addresizeevent"><code>&quot;stickyHeaders_addResizeEvent&quot;</code></a> option as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["resizable"],
@ -2147,7 +2155,7 @@ $('table').trigger('search', false);</pre></div>
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 not save the resized widths:
Use the <a href="#widget-resizable"><code>&quot;resizable&quot;</code></a> option to not save the resized widths:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["resizable"],
@ -2171,7 +2179,7 @@ $('table').trigger('search', false);</pre></div>
<br>
If an anchor was included and the table is full width, the column would resize in the opposite direction which my not be intuitive to the user. So set this option as desired, but please be mindful of the user experience.<br>
<br>
Use the <a href="#widget-resizable-addlastcolumn"><code>"resizable_addLastColumn"</code></a> option to include the last column resizer as follows:
Use the <a href="#widget-resizable-addlastcolumn"><code>&quot;resizable_addLastColumn&quot;</code></a> option to include the last column resizer as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["resizable"],
@ -2193,7 +2201,7 @@ $('table').trigger('search', false);</pre></div>
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 not save the current sort:
Use the <a href="#widget-savesort"><code>&quot;saveSort&quot;</code></a> option to not save the current sort:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["saveSort"],
@ -2240,9 +2248,9 @@ $.extend($.tablesorter.themes.jui, {
The class names from the <code>$.tablesorter.themes.{name}</code> variable are applied to the table as indicated.<br>
<br>
As before the jQuery UI theme applies the default class names of <code>"ui-icon-arrowthick-2-n-s"</code> for the unsorted column, <code>"ui-icon-arrowthick-1-s"</code> for the descending sort and <code>"ui-icon-arrowthick-1-n"</code> for the ascending sort. (Modified v2.1; Updated in v2.4). Find more jQuery UI class names by hovering over the Framework icons on this page: <a class="external" href="http://jqueryui.com/themeroller/">http://jqueryui.com/themeroller/</a><br>
As before the jQuery UI theme applies the default class names of <code>&quot;ui-icon-arrowthick-2-n-s&quot;</code> for the unsorted column, <code>&quot;ui-icon-arrowthick-1-s&quot;</code> for the descending sort and <code>&quot;ui-icon-arrowthick-1-n&quot;</code> for the ascending sort. (Modified v2.1; Updated in v2.4). Find more jQuery UI class names by hovering over the Framework icons on this page: <a class="external" href="http://jqueryui.com/themeroller/">http://jqueryui.com/themeroller/</a><br>
<br>
Use the <a href="#widget-uitheme"><code>"uitheme"</code></a> option to change the css class name as follows:
Use the <a href="#widget-uitheme"><code>&quot;uitheme&quot;</code></a> option to change the css class name as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
theme : 'jui', // set theme name from $.tablesorter.themes here
@ -2278,10 +2286,10 @@ $.extend($.tablesorter.themes.jui, {
<td>Array</td>
<td>[ &quot;even&quot;, &quot;odd&quot; ]</td>
<td>
zebra widget: When the zebra striping widget is initialized, it automatically applied the default class names of <code>"even"</code> and <code>"odd"</code>. (Modified v2.1).
zebra widget: When the zebra striping widget is initialized, it automatically applied the default class names of <code>&quot;even&quot;</code> and <code>&quot;odd&quot;</code>. (Modified v2.1).
<div class="collapsible">
<br>
Use the <a href="#widget-zebra"><code>"zebra"</code></a> option to change the theme as follows:
Use the <a href="#widget-zebra"><code>&quot;zebra&quot;</code></a> option to change the theme as follows:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["zebra"], // initialize zebra striping of the table
@ -2371,13 +2379,13 @@ $.extend($.tablesorter.themes.jui, {
<tr>
<td><code>{sortList:col}</code> or <code>{sort:col}</code></td>
<td>Adds the current sort to the ajax url string into a "col" array, so your server-side code knows how to sort the data (v2.4.5).<br>
The <code>col</code> portion of the <code>{sortList:col}</code> tag can be any name string (no spaces) to indicate the name of the variable to apply. So if your current sortList is <code>[[2,0],[3,0]]</code>, it becomes <code>"&amp;sort[2]=0&amp;sort[3]=0"</code> in the url. <code>{sort:col}</code> shortened tag also works (<span class="version">v2.9</span>).
The <code>col</code> portion of the <code>{sortList:col}</code> tag can be any name string (no spaces) to indicate the name of the variable to apply. So if your current sortList is <code>[[2,0],[3,0]]</code>, it becomes <code>&quot;&amp;sort[2]=0&amp;sort[3]=0&quot;</code> in the url. <code>{sort:col}</code> shortened tag also works (<span class="version">v2.9</span>).
</td>
</tr>
<tr>
<td><code>{filterList:fcol}</code> or <code>{filter:fcol}</code></td>
<td>Adds the value of the current filters to the ajax url string into a "fcol" array, so your server-side code knows how to filter the data (v2.6).<br>
The <code>fcol</code> portion of the <code>{filterList:fcol}</code> tag can be any name string (no spaces) to indicate the name of the variable to apply. So if your current filters are <code>['','Blue',13]</code>, it becomes <code>"&amp;fcol[2]=Blue&amp;fcol[3]=13"</code> in the url. <code>{filter:col}</code> shortened tag also works (<span class="version updated">v2.9</span>).
The <code>fcol</code> portion of the <code>{filterList:fcol}</code> tag can be any name string (no spaces) to indicate the name of the variable to apply. So if your current filters are <code>['','Blue',13]</code>, it becomes <code>&quot;&amp;fcol[2]=Blue&amp;fcol[3]=13&quot;</code> in the url. <code>{filter:col}</code> shortened tag also works (<span class="version updated">v2.9</span>).
</td>
</tr>
</tbody>

61
js/jquery.tablesorter.js
View File

@ -75,16 +75,17 @@
// *** callbacks
initialized : null, // function(table){},
// *** css class names
tableClass : 'tablesorter',
cssAsc : 'tablesorter-headerAsc',
cssChildRow : 'tablesorter-childRow', // previously "expand-child"
cssDesc : 'tablesorter-headerDesc',
cssHeader : 'tablesorter-header',
cssHeaderRow : 'tablesorter-headerRow',
cssIcon : 'tablesorter-icon', // if this class exists, a <i> will be added to the header automatically
cssInfoBlock : 'tablesorter-infoOnly', // don't sort tbody with this class name
cssProcessing : 'tablesorter-processing', // processing icon applied to header during sort/filter
// *** extra css class names
tableClass : '',
cssAsc : '',
cssDesc : '',
cssHeader : '',
cssHeaderRow : '',
cssProcessing : '', // processing icon applied to header during sort/filter
cssChildRow : 'tablesorter-childRow', // class name indiciating that a row is to be attached to the its parent
cssIcon : 'tablesorter-icon', // if this class exists, a <i> will be added to the header automatically
cssInfoBlock : 'tablesorter-infoOnly', // don't sort tbody with this class name (only one class name allowed here!)
// *** selectors
selectorHeaders : '> thead th, > thead td',
@ -105,6 +106,20 @@
};
// internal css classes - these will ALWAYS be added to
// the table and MUST only contain one class name - fixes #381
ts.css = {
table : 'tablesorter',
childRow : 'tablesorter-childRow',
header : 'tablesorter-header',
headerRow : 'tablesorter-headerRow',
icon : 'tablesorter-icon',
info : 'tablesorter-infoOnly',
processing : 'tablesorter-processing',
sortAsc : 'tablesorter-headerAsc',
sortDesc : 'tablesorter-headerDesc'
};
/* debuging utils */
function log(s) {
if (typeof console !== "undefined" && typeof console.log !== "undefined") {
@ -242,7 +257,7 @@
}
for (k = 0; k < b.length; k++) {
tc.cache[k] = { row: [], normalized: [] };
// ignore tbodies with class name from css.cssInfoBlock
// ignore tbodies with class name from c.cssInfoBlock
if (!$(b[k]).hasClass(tc.cssInfoBlock)) {
totalRows = (b[k] && b[k].rows.length) || 0;
totalCells = (b[k].rows[0] && b[k].rows[0].cells.length) || 0;
@ -388,7 +403,7 @@
if (c.debug) {
time = new Date();
}
i = c.cssIcon ? '<i class="' + c.cssIcon + '"></i>' : ''; // add icon if cssIcon option exists
i = c.cssIcon ? '<i class="' + c.cssIcon + ' ' + ts.css.icon + '"></i>' : ''; // add icon if cssIcon option exists
c.$headers = $(table).find(c.selectorHeaders).each(function(index) {
$t = $(this);
ch = c.headers[index];
@ -411,11 +426,11 @@
if (typeof lock !== 'undefined' && lock !== false) {
this.order = this.lockedOrder = formatSortingOrder(lock) ? [1,1,1] : [0,0,0];
}
$t.addClass(c.cssHeader);
$t.addClass(ts.css.header + ' ' + c.cssHeader);
// add cell to headerList
c.headerList[index] = this;
// add to parent in case there are multiple rows
$t.parent().addClass(c.cssHeaderRow);
$t.parent().addClass(ts.css.headerRow + ' ' + c.cssHeaderRow);
// allow keyboard cursor to focus on element
$t.attr("tabindex", 0);
});
@ -451,7 +466,7 @@
var f, i, j, l,
c = table.config,
list = c.sortList,
css = [c.cssAsc, c.cssDesc],
css = [ts.css.sortAsc + ' ' + c.cssAsc, ts.css.sortDesc + ' ' + c.cssDesc],
// find the footer
$t = $(table).find('tfoot tr').children().removeClass(css.join(' '));
// remove all header information
@ -524,7 +539,7 @@
i = cell;
c.$headers.each(function() {
// only reset counts on columns that weren't just clicked on and if not included in a multisort
if (this !== i && (k || !$(this).is('.' + c.cssDesc + ',.' + c.cssAsc))) {
if (this !== i && (k || !$(this).is('.' + ts.css.sortDesc + ',.' + ts.css.sortAsc))) {
this.count = -1;
}
});
@ -866,7 +881,7 @@
if (!/tablesorter\-/.test($this.attr('class'))) {
k = (c.theme !== '' ? ' tablesorter-' + c.theme : '');
}
c.$table = $this.addClass(c.tableClass + k);
c.$table = $this.addClass(ts.css.table + ' ' + c.tableClass + k);
c.$tbodies = $this.children('tbody:not(.' + c.cssInfoBlock + ')');
// build headers
buildHeaders(table);
@ -922,7 +937,7 @@
table = $(table);
var c = table[0].config,
// default to all headers
$h = $ths || table.find('.' + c.cssHeader);
$h = $ths || table.find('.' + ts.css.header);
if (toggle) {
if (c.sortList.length > 0) {
// get headers from the sortList
@ -931,9 +946,9 @@
return this.sortDisabled ? false : ts.isValueInArray( parseFloat($(this).attr('data-column')), c.sortList);
});
}
$h.addClass(c.cssProcessing);
$h.addClass(ts.css.processing + ' ' + c.cssProcessing);
} else {
$h.removeClass(c.cssProcessing);
$h.removeClass(ts.css.processing + ' ' + c.cssProcessing);
}
};
@ -977,7 +992,7 @@
ts.refreshWidgets(table, true, true);
var $t = $(table), c = table.config,
$h = $t.find('thead:first'),
$r = $h.find('tr.' + c.cssHeaderRow).removeClass(c.cssHeaderRow),
$r = $h.find('tr.' + ts.css.headerRow).removeClass(ts.css.headerRow + ' ' + c.cssHeaderRow),
$f = $t.find('tfoot:first > tr').children('th, td');
// remove widget added rows, just in case
$h.find('tr').not($r).remove();
@ -986,12 +1001,12 @@
.removeData('tablesorter')
.unbind('sortReset update updateAll updateRows updateCell addRows sorton appendCache applyWidgetId applyWidgets refreshWidgets destroy mouseup mouseleave keypress sortBegin sortEnd '.split(' ').join('.tablesorter '));
c.$headers.add($f)
.removeClass(c.cssHeader + ' ' + c.cssAsc + ' ' + c.cssDesc)
.removeClass( [ts.css.header, c.cssHeader, c.cssAsc, c.cssDesc, ts.css.sortAsc, ts.css.sortDesc].join(' ') )
.removeAttr('data-column');
$r.find(c.selectorSort).unbind('mousedown.tablesorter mouseup.tablesorter keypress.tablesorter');
ts.restoreHeaders(table);
if (removeClasses !== false) {
$t.removeClass(c.tableClass + ' tablesorter-' + c.theme);
$t.removeClass(ts.css.table + ' ' + c.tableClass + ' tablesorter-' + c.theme);
}
// clear flag in case the plugin is initialized again
table.hasInitialized = false;

53
js/jquery.tablesorter.widgets.js
View File

@ -195,7 +195,7 @@ ts.addWidget({
}
if (c.cssIcon){
// if c.cssIcon is '', then no <i> is added to the header
$h.find('.' + c.cssIcon).addClass(o.icons);
$h.find('.' + ts.css.icon).addClass(o.icons);
}
if ($t.hasClass('hasFilters')){
$h.find('.tablesorter-filter-row').addClass(o.filterRow);
@ -203,14 +203,14 @@ ts.addWidget({
}
$.each($h, function(i){
$el = $(this);
$tar = (c.cssIcon) ? $el.find('.' + c.cssIcon) : $el;
$tar = (ts.css.icon) ? $el.find('.' + ts.css.icon) : $el;
if (this.sortDisabled){
// no sort arrows for disabled columns!
$el.removeClass(rmv);
$tar.removeClass(rmv + ' tablesorter-icon ' + o.icons);
} else {
t = ($t.hasClass('hasStickyHeaders')) ? $t.find(sh).find('th').eq(i).add($el) : $el;
klass = ($el.hasClass(c.cssAsc)) ? o.sortAsc : ($el.hasClass(c.cssDesc)) ? o.sortDesc : $el.hasClass(c.cssHeader) ? o.sortNone : '';
klass = ($el.hasClass(ts.css.sortAsc)) ? o.sortAsc : ($el.hasClass(ts.css.sortDesc)) ? o.sortDesc : $el.hasClass(ts.css.header) ? o.sortNone : '';
$el[klass === o.sortNone ? 'removeClass' : 'addClass'](o.active);
$tar.removeClass(rmv).addClass(klass);
}
@ -227,7 +227,7 @@ ts.addWidget({
rmv = o.sortNone + ' ' + o.sortDesc + ' ' + o.sortAsc;
$t
.removeClass('tablesorter-' + theme + ' ' + o.table)
.find(c.cssHeader).removeClass(o.header);
.find(ts.css.header).removeClass(o.header);
$h
.unbind('mouseenter.tsuitheme mouseleave.tsuitheme') // remove hover
.removeClass(o.hover + ' ' + rmv + ' ' + o.active)
@ -328,7 +328,7 @@ ts.addWidget({
options : {
filter_childRows : false, // if true, filter includes child row content in the search
filter_columnFilters : true, // if true, a filter will be added to the top of each table column
filter_cssFilter : 'tablesorter-filter', // css class name added to the filter row & each input in the row
filter_cssFilter : '', // css class name added to the filter row & each input in the row (tablesorter-filter is ALWAYS added)
filter_filteredRow : 'filtered', // class added to filtered rows; needed by pager plugin
filter_formatter : null, // add custom filter elements to the filter row
filter_functions : null, // add custom filter functions using this option
@ -361,7 +361,6 @@ ts.addWidget({
fmt = ts.formatFloat,
last = '', // save last filter search
$ths = c.$headers,
css = wo.filter_cssFilter,
$t = c.$table.addClass('hasFilters'),
b = $t.find('tbody'),
cols = c.parsers.length,
@ -399,7 +398,7 @@ ts.addWidget({
var $tb, $tr, $td, cr, r, l, ff, time, r1, r2, searchFiltered;
if (c.debug) { time = new Date(); }
for (k = 0; k < b.length; k++ ){
if (b.eq(k).hasClass(c.cssInfoBlock)) { continue; } // ignore info blocks, issue #264
if (b.eq(k).hasClass(ts.css.info)) { continue; } // ignore info blocks, issue #264
$tb = ts.processTbody(table, b.eq(k), true);
$tr = $tb.children('tr:not(.' + c.cssChildRow + ')');
l = $tr.length;
@ -574,7 +573,7 @@ ts.addWidget({
arry = (ts.sortText) ? arry.sort(function(a, b){ return ts.sortText(table, a, b, i); }) : arry.sort(true);
// Get curent filter value
currentVal = $t.find('thead').find('select.' + css + '[data-column="' + i + '"]').val();
currentVal = $t.find('thead').find('select.tablesorter-filter[data-column="' + i + '"]').val();
// build option list
for (k = 0; k < arry.length; k++){
@ -582,7 +581,7 @@ ts.addWidget({
// replace quotes - fixes #242 & ignore empty strings - see http://stackoverflow.com/q/14990971/145346
o += arry[k] !== '' ? '<option value="' + t + '"' + (currentVal === t ? ' selected="selected"' : '') +'>' + arry[k] + '</option>' : '';
}
$t.find('thead').find('select.' + css + '[data-column="' + i + '"]')[ updating ? 'html' : 'append' ](o);
$t.find('thead').find('select.tablesorter-filter[data-column="' + i + '"]')[ updating ? 'html' : 'append' ](o);
},
buildDefault = function(updating){
// build default select dropdown
@ -654,7 +653,7 @@ ts.addWidget({
}
}
if (t) {
t.addClass(css).attr('data-column', i);
t.addClass('tablesorter-filter ' + wo.filter_cssFilter).attr('data-column', i);
if (dis) {
t.addClass('disabled')[0].disabled = true; // disabled!
}
@ -668,7 +667,7 @@ ts.addWidget({
buildDefault(true);
}
if (e.type === 'filterReset') {
$t.find('.' + css).val('');
$t.find('.tablesorter-filter').val('');
}
if (e.type === 'filterEnd') {
buildDefault(true);
@ -679,7 +678,7 @@ ts.addWidget({
}
return false;
})
.find('input.' + css).bind('keyup search', function(e, filter){
.find('input.tablesorter-filter').bind('keyup search', function(e, filter){
// emulate what webkit does.... escape clears the filter
if (e.which === 27) {
this.value = '';
@ -718,7 +717,7 @@ ts.addWidget({
ff += '<option value="' + str + '">' + str + '</option>';
}
}
$t.find('thead').find('select.' + css + '[data-column="' + col + '"]').append(ff);
$t.find('thead').find('select.tablesorter-filter[data-column="' + col + '"]').append(ff);
}
}
}
@ -727,7 +726,7 @@ ts.addWidget({
// it would append the same options twice.
buildDefault(true);
$t.find('select.' + css).bind('change search', function(e, filter){
$t.find('select.tablesorter-filter').bind('change search', function(e, filter){
checkFilters(filter);
});
@ -748,8 +747,8 @@ ts.addWidget({
// $(':focus') needs jQuery 1.6+
if ($(document.activeElement).closest('tr')[0] !== ft[0]){
// get all filter values
all = $t.find('.' + wo.filter_cssFilter).map(function(){
return $(this).val() || '';
all = $t.find('.tablesorter-filter').map(function(){
return $(this).val() || '';
}).get().join('');
// don't hide row if any filter has a value
if (all === ''){
@ -764,7 +763,7 @@ ts.addWidget({
clearTimeout(st);
st = setTimeout(function(){
// don't hide row if any filter has a value
if ($t.find('.' + wo.filter_cssFilter).map(function(){ return $(this).val() || ''; }).get().join('') === ''){
if ($t.find('.tablesorter-filter').map(function(){ return $(this).val() || ''; }).get().join('') === ''){
ft2[ e.type === 'focus' ? 'removeClass' : 'addClass']('hideme');
}
}, 200);
@ -774,7 +773,7 @@ ts.addWidget({
// show processing icon
if (c.showProcessing) {
$t.bind('filterStart.tsfilter filterEnd.tsfilter', function(e, v) {
var fc = (v) ? $t.find('.' + c.cssHeader).filter('[data-column]').filter(function(){
var fc = (v) ? $t.find('.' + ts.css.header).filter('[data-column]').filter(function(){
return v[$(this).data('column')] !== '';
}) : '';
ts.isProcessing($t[0], e.type === 'filterStart', v ? fc : '');
@ -817,14 +816,14 @@ ts.addWidget({
ts.getFilters = function(table) {
var c = table ? $(table)[0].config : {};
if (c && c.widgetOptions && !c.widgetOptions.filter_columnFilters) { return $(table).data('lastSearch'); }
return c && c.$filters ? c.$filters.find('.' + c.widgetOptions.filter_cssFilter).map(function(i, el) {
return c && c.$filters ? c.$filters.find('.tablesorter-filter').map(function(i, el) {
return $(el).val();
}).get() || [] : false;
};
ts.setFilters = function(table, filter, apply) {
var $t = $(table),
c = $t.length ? $t[0].config : {},
valid = c && c.$filters ? c.$filters.find('.' + c.widgetOptions.filter_cssFilter).each(function(i, el) {
valid = c && c.$filters ? c.$filters.find('.tablesorter-filter').each(function(i, el) {
$(el).val(filter[i] || '');
}).trigger('change.tsfilter') || false : false;
if (apply) { $t.trigger('search', [filter, false]); }
@ -840,7 +839,7 @@ ts.addWidget({
id: "stickyHeaders",
priority: 60,
options: {
stickyHeaders : 'tablesorter-stickyHeader',
stickyHeaders : '', // extra class name added to the sticky header row
stickyHeaders_offset : 0, // number or jquery selector targeting the position:fixed element
stickyHeaders_cloneId : '-sticky', // added to table ID, if it exists
stickyHeaders_addResizeEvent : true, // trigger "resize" event on headers
@ -855,7 +854,7 @@ ts.addWidget({
hdrCells = header.children('tr:not(.sticky-false)').children(),
innr = '.tablesorter-header-inner',
tfoot = $t.find('tfoot'),
filterInputs = '.' + (wo.filter_cssFilter || 'tablesorter-filter'),
filterInputs = '.tablesorter-filter',
$stickyOffset = isNaN(wo.stickyHeaders_offset) ? $(wo.stickyHeaders_offset) : '',
stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0,
stickyzIndex = wo.stickyHeaders_zIndex ? wo.stickyHeaders_zIndex : 2,
@ -868,7 +867,7 @@ ts.addWidget({
visibility : 'hidden',
zIndex : stickyzIndex
}),
stkyHdr = $stickyTable.children('thead:first').addClass(wo.stickyHeaders),
stkyHdr = $stickyTable.children('thead:first').addClass('tablesorter-stickyHeader ' + wo.stickyHeaders),
stkyCells,
laststate = '',
spacing = 0,
@ -920,11 +919,11 @@ ts.addWidget({
t
.attr('class', $(this).attr('class'))
// remove processing icon
.removeClass(c.cssProcessing);
.removeClass(ts.css.processing + ' ' + c.cssProcessing);
if (c.cssIcon){
t
.find('.' + c.cssIcon)
.attr('class', $(this).find('.' + c.cssIcon).attr('class'));
.find('.' + ts.css.icon)
.attr('class', $(this).find('.' + ts.css.icon).attr('class'));
}
});
})
@ -1004,7 +1003,7 @@ ts.addWidget({
c.$table
.removeClass('hasStickyHeaders')
.unbind('sortEnd.tsSticky pagerComplete.tsSticky')
.find('.' + wo.stickyHeaders).remove();
.find('.tablesorter-stickyHeader').remove();
if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table
// don't unbind if any table on the page still has stickyheaders applied
if (!$('.hasStickyHeaders').length) {

4
js/widgets/widget-grouping.js
View File

@ -12,7 +12,7 @@ ts.grouping = {
number : function(c, $col, txt, num, group){
var t, w;
if (num > 1 && txt !== '') {
if ($col.hasClass(c.cssAsc)) {
if ($col.hasClass(ts.css.sortAsc)) {
t = Math.floor(parseFloat(txt)/num) * num;
return t > parseFloat(group || 0) ? t : parseFloat(group || 0);
} else {
@ -104,7 +104,7 @@ ts.addWidget({
group = curr;
// show range if number > 1
if (t2[1] === 'number' && t2[2] > 1 && curr !== '') {
curr += ' - ' + (parseInt(curr, 10) + ((parseInt(t2[2],10) - 1) * (c.$headers.eq(col).hasClass(c.cssAsc) ? 1 : -1)));
curr += ' - ' + (parseInt(curr, 10) + ((parseInt(t2[2],10) - 1) * (c.$headers.eq(col).hasClass(ts.css.sortAsc) ? 1 : -1)));
}
if ($.isFunction(wo.group_formatter)) {
curr = wo.group_formatter((curr || '').toString(), col, table, c, wo) || curr;

23
js/widgets/widget-scroller.js
View File

@ -39,8 +39,9 @@
$.fn.hasScrollBar = function(){
return this.get(0).scrollHeight > this.height();
};
var ts = $.tablesorter;
$.tablesorter.window_resize = function(){
ts.window_resize = function(){
if (this.resize_timer) {
clearTimeout(this.resize_timer);
}
@ -61,7 +62,7 @@ $(function(){
$(s).appendTo('body');
});
$.tablesorter.addWidget({
ts.addWidget({
id: 'scroller',
priority: 60, // run after the filter widget
options: {
@ -74,16 +75,16 @@ $.tablesorter.addWidget({
var $win = $(window);
//Setup window.resizeEnd event
$win
.bind('resize', $.tablesorter.window_resize)
.bind('resize', ts.window_resize)
.bind('resizeEnd', function(e) {
// init is run before format, so scroller_resizeWidth
// won't be defined within the "c" or "wo" parameters
if (typeof table.config.widgetOptions.scroller_resizeWidth === 'function') {
//IE calls resize when you modify content, so we have to unbind the resize event
//so we don't end up with an infinite loop. we can rebind after we're done.
$win.unbind('resize', $.tablesorter.window_resize);
$win.unbind('resize', ts.window_resize);
table.config.widgetOptions.scroller_resizeWidth();
$win.bind('resize', $.tablesorter.window_resize);
$win.bind('resize', ts.window_resize);
}
});
},
@ -108,7 +109,7 @@ $.tablesorter.addWidget({
$cells = $hdr
.wrap('<div class="tablesorter-scroller-header" style="width:' + $tbl.width() + ';" />')
.find('.' + c.cssHeader)
.find('.' + ts.css.header)
.bind('mousedown', function(){
this.onselectstart = function(){ return false; };
return false;
@ -123,17 +124,17 @@ $.tablesorter.addWidget({
t
.attr('class', $(this).attr('class'))
// remove processing icon
.removeClass(c.cssProcessing);
if (c.cssIcon){
.removeClass(ts.css.processing + ' ' + c.cssProcessing);
if (ts.css.icon){
t
.find('.' + c.cssIcon)
.attr('class', $(this).find('.' + c.cssIcon).attr('class'));
.find('.' + ts.css.icon)
.attr('class', $(this).find('.' + ts.css.icon).attr('class'));
}
});
});
// make scroller header sortable
c.$headers.find('*')[ $.fn.addBack ? 'addBack': 'andSelf' ]().filter(c.selectorSort).each(function(i){
c.$headers.find(c.selectorSort).add( c.$headers.filter(c.selectorSort) ).each(function(i){
var t = $(this);
$cells.eq(i)
// clicking on new header will trigger a sort

12
test.html
View File

@ -400,16 +400,16 @@
test( "testing header css & sortReset method", function(){
expect(7);
t = $(th0);
equal( $table1.hasClass(c1.tableClass), true, 'table class applied');
equal( t.hasClass(c1.cssHeader), true, 'Header class present' );
equal( t.parent().hasClass(c1.cssHeaderRow), true, 'Header row class present' );
equal( $table1.hasClass(ts.css.table), true, 'table class applied');
equal( t.hasClass(ts.css.header), true, 'Header class present' );
equal( t.parent().hasClass(ts.css.headerRow), true, 'Header row class present' );
equal( $table1.find('tbody:eq(1)').hasClass(c1.cssInfoBlock), true, 'Tbody info block class present' );
$table1.trigger('sorton', [[[ 0,1 ]]] );
equal( t.hasClass(c1.cssDesc), true, 'Descending class present' );
equal( t.hasClass(ts.css.sortDesc), true, 'Descending class present' );
$table1.trigger('sorton', [[[ 0,0 ]]] );
equal( t.hasClass(c1.cssAsc), true, 'Ascending class present' );
equal( t.hasClass(ts.css.sortAsc), true, 'Ascending class present' );
$table1.trigger('sortReset');
equal( t.hasClass(c1.cssAsc) || t.hasClass(c1.cssDesc), false, 'Testing sortReset' );
equal( t.hasClass(ts.css.sortAsc) || t.hasClass(ts.css.sortDesc), false, 'Testing sortReset' );
});
/************************************************