mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
Docs: fix a bunch of minor HTML problems
This commit is contained in:
parent
f0d04d8b22
commit
36e5371df7
@ -18,7 +18,7 @@ table.tablesorter table.info tbody th,table.tablesorter table.info td {border:#0
|
||||
table.tablesorter table.info tbody th {background:#eee;}
|
||||
table.options {width:100%;}
|
||||
table.options pre {width:95%;}
|
||||
table.options .property, .setWidth {width:115px;}
|
||||
table.options .property, .setwidth {width:115px;}
|
||||
table.options .type {width:100px; }
|
||||
table.options .defaults {width:160px;}
|
||||
table.options .examples {width:60px;}
|
||||
|
@ -63,7 +63,7 @@
|
||||
<li>This example could have used the "update" method to add rows, but to remove rows only the "update" method works.</li>
|
||||
<li>This method is better used for the <a href="example-pager.html">pager plugin</a> when not all of the rows are displayed.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
|
@ -108,11 +108,11 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
<div id="demo"><button type="button" class="toggle-option">Toggle Child Row Content</button> : <span class="state">true</span>
|
||||
<button type="button" class="toggle-option">Toggle Child Row Content</button> : <span class="state">true</span>
|
||||
|
||||
<ul>
|
||||
<li>If true, the child row content is included in ALL filters. Enter "cal" (california) in any column filter and the same rows show up.</li>
|
||||
|
@ -86,7 +86,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -36,7 +36,7 @@
|
||||
<li>Clicking on any of the sortable header cells will cause all columns below it to sort.</li>
|
||||
<li>This demo will only work in tablesorter version 2.3+.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -75,7 +75,7 @@
|
||||
<li>In the javascript code block below you can see the default <code>$.tablesorter.characterEquivalents</code> table and an example of how to extend it to include other equivalents.</li>
|
||||
<li>If you have a specific language requirement, please refer to the <a href="https://github.com/Mottie/tablesorter/wiki/Language">Language</a> wiki pages to see if it is there. If not, please consider sharing the code or even just share the character equivalents themselves.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -47,7 +47,7 @@
|
||||
<li>Reset the table by triggering a <code>sortReset</code> event on the table (see the javascript code below).</li>
|
||||
<li>This method was added in version 2.4.7.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button">Reset</button>
|
||||
|
@ -75,7 +75,8 @@
|
||||
<li>One custom sort used here is from the original tablesorter plugin v2.0.3. Sort the <del>first</del> "Plain Text Sort" column to see how it sorts alphanumeric data.</li>
|
||||
<li>This option is not part of the original plugin (v2.2).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -49,7 +49,7 @@
|
||||
<li>The dateFormat option was modified in version 2.0.23 (not part of the original plugin).</li>
|
||||
<li>The dateFormat option will ONLY work with the <code>shortDate</code> parser.</li>
|
||||
<li>The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).</li>
|
||||
<li>This date format parser will only work with a four digit year. You can <a href="example-parsers.html">write your own</a> if you need a two digit year parser.</a>
|
||||
<li>This date format parser will only work with a four digit year. You can <a href="example-parsers.html">write your own</a> if you need a two digit year parser.</li>
|
||||
<li>In versions 2.3+, columns can be disabled using any of the following methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-date-format="mmddyyyy"</code> (see the Javascript block below on how to set it directly; <code>data-dateFormat</code> is equivalent to <code>data-date-format</code>).</li>
|
||||
@ -60,7 +60,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -40,7 +40,7 @@
|
||||
<li>This example demonstrates that common table values are auto-detected (including plain text, currency, percentages, and positive & negative numbers), so there is no need to set a specific parser unless you notice an issue with how a column is sorting.</li>
|
||||
<li>Issues may arise if a column contains mixed data, e.g. "N/A" is located at the top of a numeric column; in this case the column will be detected as a text column and not a numeric column. If issues occur, add a <code>sorter-digit</code> class name to that header cell.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><!-- the data-sortlist won't apply because it is supported by jQuery v1.4+; and this demo is using jQuery v1.2.6 -->
|
||||
|
@ -71,7 +71,7 @@
|
||||
<li>As of <span class="version">v2.16.3</span>, there is a built-in 500 millisecond delay before the processing icon will show. If the sort has completed within that time, the icon will not appear.</li>
|
||||
<li>There is an issue with the processing icon not appearing at all, or the animation appears frozen when processing data in very large tables. This is due to javascript only being able to process one thread at-a-time; If you know of a solution or work-around please <a href="https://github.com/Mottie/tablesorter/issues/158">add a comment</a> or contribute a fix!</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
|
@ -47,7 +47,7 @@
|
||||
<li>Click to sort any column header to see the the first column sort is appended to the selected sort order.</li>
|
||||
<li>This option is part of the original plugin</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -65,7 +65,7 @@ $(function(){
|
||||
</li>
|
||||
<li><code>emptyToBottom</code> option was added in v2.1.11, then replaced by the <code>emptyTo</code> option in v2.1.16.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
|
@ -49,7 +49,7 @@
|
||||
<li>Click to sort any column header to see the forcing of the first column sort.</li>
|
||||
<li>This option is part of the original plugin</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -40,7 +40,7 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Click to sort any column header, then hold down the alt key and select a second column. Continue selecting columns as desired.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -58,7 +58,7 @@
|
||||
<li>Test the <code>sortReset</code> option by clicking on any column at least three times. It should sort in the <code>sortInitialOrder</code> direction on the first click, the opposite direction on the second click, then reset to the original sort order on the third click. This cycle repeats on subsequent sorts.</li>
|
||||
<li>Test the <code>sortRestart</code> option by clicking on any unsorted column to see that it will always restart from the <code>sortInitialOrder</code>.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -63,7 +63,7 @@
|
||||
<li>The "First Name" column is sorting by the contents of the <strong> tag (in red).</li>
|
||||
<li>Added "table" and "cellIndex" variables to the textExtraction function (v2.1.2).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -81,7 +81,7 @@
|
||||
<li>Semver example order, from semver.org:<br>1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1 < 1.0.0</li>
|
||||
<!-- http://jsfiddle.net/Mottie/abkNM/1626/ -->
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -67,7 +67,7 @@
|
||||
</li>
|
||||
<li>For alternate <code>thead</code> & <code>tfoot</code> row colors, add the class name <code>dark-row</code>. See the HTML below.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
|
@ -73,7 +73,7 @@
|
||||
<li>Sort columns three through eight to see how the sort has changed. Note that the text is sorted separately from the numeric values.</li>
|
||||
<li>The <code>emptyTo</code> option defaults to bottom, so all empty cells will sort at the bottom of the table, except for the second column.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table>
|
||||
|
@ -53,7 +53,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -56,7 +56,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -68,7 +68,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -58,7 +58,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -139,7 +139,7 @@
|
||||
<li>This combination was not possible in tablesorter versions prior to version 2.4.</li>
|
||||
<li>This combination can not be applied to the original tablesorter.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
|
@ -201,7 +201,7 @@
|
||||
<li>There have been lots of changes made in version 2.1, please check out the <a href="https://github.com/Mottie/tablesorter/wiki/Changes">change log</a>.</li>
|
||||
<li>In <span class="version">v2.11</span>, the <code>savePages</code> option was added to saves the current page size and number (requires storage script).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Triggered Events</h1>
|
||||
<ul id="display">
|
||||
|
@ -88,7 +88,7 @@ $(function(){
|
||||
</li>
|
||||
<li>This method of writing custom parsers will NOT work with the original tablesorter 2.0.5b plugin because the format function does not consistently provide the <code>cell</code> and <code>cellIndex</code> parameters.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table>
|
||||
|
@ -44,7 +44,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -61,8 +61,8 @@
|
||||
<ul>
|
||||
<li>Formats for "mmddyy", "ddmmyy" and "yymmdd" are available</li>
|
||||
<li>Within the parser code is a <code>range</code> variable which is set to <code>50</code> years range, which sets the date be within +/- range of the listed two digit year.</li>
|
||||
<li>So if the current year is <code>2020</code>, and the listed two digit year is <code>80</code> (<code>2080 - 2020 > 50</code>), it becomes <code>1980</code>.</li>
|
||||
<li>If the listed two digit year is <code>50</code> (<code>2050 - 2020 < 50</code>), then it becomes <code>2050</code>. I hope that makes it clearer.</li>
|
||||
<li>So if the current year is <code>2020</code>, and the listed two digit year is <code>80</code> (<code>2080 - 2020 > 50</code>), it becomes <code>1980</code>.</li>
|
||||
<li>If the listed two digit year is <code>50</code> (<code>2050 - 2020 < 50</code>), then it becomes <code>2050</code>. I hope that makes it clearer.</li>
|
||||
<li>Try out the two digit year calculator below the table.</li>
|
||||
<li>In <span class="version">v2.14.0</span>, the range can be set using the <code>dateRange</code> option (see the initialization code below).</li>
|
||||
</ul>
|
||||
@ -71,7 +71,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -91,7 +91,7 @@ $('table').tablesorter({
|
||||
"hu" : "a, az, egy"
|
||||
};</pre></li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
|
@ -68,7 +68,7 @@
|
||||
});</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
|
@ -32,7 +32,7 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> This functionality was added in version 2.2.3 (it is not part of the original plugin).
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -57,7 +57,7 @@
|
||||
<li>Supported prefixes include: Yotta (10<sup>24</sup>), Zetta (10<sup>21</sup>), Exa (10<sup>18</sup>), Peta (10<sup>15</sup>), Tera (10<sup>12</sup>), Giga (10<sup>9</sup>), Mega (10<sup>6</sup>), kilo (10<sup>3</sup>), hecto (10<sup>2</sup>), deka (10<sup>1</sup>), deci (10<sup>-1</sup>), centi (10<sup>-2</sup>), milli (10<sup>-3</sup>), micro (10<sup>-6</sup>), nano (10<sup>-9</sup>), pico (10<sup>-12</sup>), femto (10<sup>-15</sup>), atto (10<sup>-18</sup>), zepto (10<sup>-21</sup>) and yocto (10<sup>-24</sup>).</li>
|
||||
<li>This demo includes the stored metric values within the table cells, toggle the view using the button below.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
@ -91,7 +91,7 @@
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load metric parser -->
|
||||
<script src="../js/parsers/parser-metric.js"></script>
|
||||
<script src="../js/parsers/parser-metric.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
|
@ -213,7 +213,7 @@
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
|
||||
<!-- load roman numeral parser -->
|
||||
<script src="../js/parsers/parser-roman.js"></script>
|
||||
<script src="../js/parsers/parser-roman.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
|
@ -153,7 +153,7 @@ $(function() {
|
||||
<h1>HTML</h1>
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Assigning the parser using a class name was added in version 2.0.11 (it is not part of the original plugin; use the <code>headers</code> option in older versions).
|
||||
</p>
|
||||
<p>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
@ -102,7 +102,7 @@
|
||||
<li>In <span class="version">v2.17.0</span>, added sorton values (a)scending, (d)escending, (n)ext, (s)ame & (o)pposite. Use the demo below help understand how to use these settings.</li>
|
||||
<li>In v2.9, a "sort" event can be triggered on the header cell to toggle the sort.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<div id="demo">
|
||||
|
||||
|
@ -68,7 +68,7 @@
|
||||
<li>This method allows you to update the cache with data from both the <code>thead</code> and <code>tbody</code> of the table.</li>
|
||||
<li>The <code>update</code> method only updates the cache from the <code>tbody</code>.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -60,7 +60,7 @@
|
||||
<li>This option is part of the original plugin.</li>
|
||||
<li>Automatic resorting after "updateCell" is triggered was added in version 2.0.14.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -122,13 +122,13 @@ td:nth-child(3) .ts-align-right i {
|
||||
</span>
|
||||
</td></pre>
|
||||
When this option is set with some HTML:
|
||||
<br><pre class="prettyprint lang-js">alignChar_wrap : '<i/>'</pre>
|
||||
<br><pre class="prettyprint lang-js">alignChar_wrap : '<i/>'</pre>
|
||||
it results in this layout:
|
||||
<pre class="prettyprint lang-html"><td>
|
||||
<span class="ts-align-wrap">
|
||||
<span class="ts-align-left" style="min-width:37%">Ox&nbsp;</span>
|
||||
<span class="ts-align-right" style="min-width:63%">
|
||||
<i>=</i>&nbsp;stinky
|
||||
<i>=</i>&nbsp;stinky
|
||||
</span>
|
||||
</span>
|
||||
</td></pre>
|
||||
|
@ -177,7 +177,7 @@
|
||||
</li>
|
||||
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
|
@ -401,7 +401,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
|
@ -88,7 +88,7 @@ $(function() {
|
||||
<li>The original "widgetColumns" option has been replaced by "widgetOptions.columns". See the javascript block below for more details (v2.1).</li>
|
||||
<li>Table header and footer rows now get updated with the columns widget classes. Check out the "grey" theme to see (v2.4).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
|
@ -150,7 +150,7 @@ td.no-edit, span.no-edit {
|
||||
|
||||
<tr id="editable-no-edit">
|
||||
<td><a href="#" class="permalink">editable_noEdit</a></td>
|
||||
<td>Class name on table cells to search for that are not to become editable. .</li>
|
||||
<td>Class name on table cells to search for that are not to become editable.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
The search is only done within the columns set by the <code>editable_columns</code> option.<br>
|
||||
@ -176,7 +176,7 @@ td.no-edit, span.no-edit {
|
||||
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
|
@ -133,25 +133,26 @@ $(function() {
|
||||
<h3><a href="#">How to add Custom filter types</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>The first step is to decide what you want your filter to do.
|
||||
<li>The first step is to decide what you want your filter to do.</li>
|
||||
<li>Should it look for a symbol at the beginning, middle or end of the filter?</li>
|
||||
<li>Does the designator need spaces around it (e.g. " and " or " or ") to prevent problems? You wouldn't be able to find the country of "Andorra" if the "and" or "or" designators didn't require spaces.</li>
|
||||
<li>Make sure to name your filter so that it doesn't interfere with already existing ones, unless your filter is meant to replace an existing one. See the "Built-in Filters" section for a full list of filter function names.</li>
|
||||
<li>Within your filter, first test for your designator symbol.
|
||||
<ul>
|
||||
<li>Should it look for a symbol at the beginning, middle or end of the filter?</li>
|
||||
<li>Does the designator need spaces around it (e.g. " and " or " or ") to prevent problems? You wouldn't be able to find the country of "Andorra" if the "and" or "or" designators didn't require spaces.</li>
|
||||
<li>Make sure to name your filter so that it doesn't interfere with already existing ones, unless your filter is meant to replace an existing one. See the "Built-in Filters" section for a full list of filter function names.</li>
|
||||
<li>Within your filter, first test for your designator symbol.
|
||||
<li>If it exists within the filter, then do your comparison and return a boolean of <code>true</code> or <code>false</code>.</li>
|
||||
<li>Four arguments are passed to the filter function:
|
||||
<ul>
|
||||
<li>If it exists within the filter, then do your comparison and return a boolean of <code>true</code> or <code>false</code>.</li>
|
||||
<li>Four arguments are passed to the filter function:
|
||||
<ul>
|
||||
<li><code>filter</code> - The exact text from the filter input (e.g. <code>^h</code>).</li>
|
||||
<li><code>iFilter</code> - The text from the filter in all lower case for case insensitive searches.</li>
|
||||
<li><code>exact</code> - The exact (or parsed) text from the current table cell; the parsed text is passed when the column has a <code>"filter-parsed"</code> class name set.</li>
|
||||
<li><code>iExact</code> - The exact (or parsed) text in all lower case for case insensitive searches.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>If your designator doesn't exist, you *must* return <code>null</code> to allow comparisons with other filter types.</li>
|
||||
<li>Here is a basic example with extensive comments:
|
||||
<pre class="prettyprint lang-js">// search for a match from the beginning of a string
|
||||
<li><code>filter</code> - The exact text from the filter input (e.g. <code>^h</code>).</li>
|
||||
<li><code>iFilter</code> - The text from the filter in all lower case for case insensitive searches.</li>
|
||||
<li><code>exact</code> - The exact (or parsed) text from the current table cell; the parsed text is passed when the column has a <code>"filter-parsed"</code> class name set.</li>
|
||||
<li><code>iExact</code> - The exact (or parsed) text in all lower case for case insensitive searches.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>If your designator doesn't exist, you *must* return <code>null</code> to allow comparisons with other filter types.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Here is a basic example with extensive comments:
|
||||
<pre class="prettyprint lang-js">// search for a match from the beginning of a string
|
||||
// "^l" matches "lion" but not "koala"
|
||||
$.tablesorter.filter.types.start = function( filter, iFilter, exact, iExact ) {
|
||||
// test for filter type designator. In this example, "^" must be at the beginning of the filter
|
||||
@ -167,7 +168,8 @@ $.tablesorter.filter.types.start = function( filter, iFilter, exact, iExact ) {
|
||||
}
|
||||
// ALWAYS return null if your custom filter type doesn't match
|
||||
return null;
|
||||
};</pre></li>
|
||||
};</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
@ -237,9 +237,9 @@
|
||||
// Note that only the normalized (n) value will contain numerical data
|
||||
// If you use the exact text, you'll need to parse it (parseFloat or parseInt)
|
||||
4 : {
|
||||
"< $10" : function(e, n, f, i, $r) { return n < 10; },
|
||||
"$10 - $100" : function(e, n, f, i, $r) { return n >= 10 && n <=100; },
|
||||
"> $100" : function(e, n, f, i, $r) { return n > 100; }
|
||||
"< $10" : function(e, n, f, i, $r) { return n < 10; },
|
||||
"$10 - $100" : function(e, n, f, i, $r) { return n >= 10 && n <=100; },
|
||||
"> $100" : function(e, n, f, i, $r) { return n > 100; }
|
||||
}
|
||||
}</pre></li>
|
||||
<li>See the "Filter function information" section below.</li>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget External Inputs</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
@ -81,7 +81,7 @@
|
||||
<li>As of <span class="version">v2.15</span>,
|
||||
<ul>
|
||||
<li>A new filter widget <a href="index.html#widget-filter-external"><code>filter_external</code> option</a> has been added that essentially does the same thing as the <a href="index.html#function-bindsearch"><code>$.tablesorter.bindSearch</code></a> function.</li>
|
||||
</li>Use either to bind external search inputs.</li>
|
||||
<li>Use either to bind external search inputs.</li>
|
||||
<li>To change an input from searching one column (or all columns) to search any other column, call the <code>$.tablesorter.bindSearch</code> function to update the external inputs, even if the inputs are set using the <code>filter_external</code> option. Pass an additional <code>false</code> flag as the last parameter to force the inputs to update.
|
||||
<pre class="prettyprint lang-js">$.tablesorter.bindSearch( $('table'), $('.search'), false );</pre>
|
||||
</li>
|
||||
|
@ -162,7 +162,7 @@
|
||||
max: 100,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
compare : [ '=', '>=', '<=' ],
|
||||
selected: 1
|
||||
});
|
||||
},
|
||||
@ -175,7 +175,7 @@
|
||||
max: 150,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : '>='
|
||||
compare : '>='
|
||||
});
|
||||
}
|
||||
|
||||
@ -274,7 +274,7 @@
|
||||
max: 44,
|
||||
delayed: true,
|
||||
addToggle: false,
|
||||
compare: [ '<=', '=', '>=' ],
|
||||
compare: [ '<=', '=', '>=' ],
|
||||
selected: 2
|
||||
});
|
||||
}
|
||||
|
@ -169,7 +169,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button class="reset">Reset Search</button>
|
||||
|
@ -123,7 +123,7 @@ tr.group-header.collapsed td i {
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
@ -139,7 +139,7 @@ tr.group-header.collapsed td i {
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Good Toys<a></td><td>USA</td><td>80%</td><td></td><td></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Good Toys</a></td><td>USA</td><td>80%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>1561651</td><td>finish</td><td>0</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>558815</td><td>finish</td><td>0</td><td>$55</td></tr>
|
||||
|
||||
@ -147,25 +147,25 @@ tr.group-header.collapsed td i {
|
||||
<tr class="tablesorter-childRow"><td>21485213</td><td>in progress</td><td>2</td><td>$7</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>12547854</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Cycle Initial Bike Company<a></td><td>USA</td><td>36%</td><td></td><td></td></tr>
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Cycle Initial Bike Company</a></td><td>USA</td><td>36%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>12574521</td><td>in progress</td><td>1</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>7895452</td><td>in progress</td><td>2</td><td>$78</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>1542021</td><td>finish</td><td>0</td><td>$28</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>4489885</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Sports Store<a></td><td>USA</td><td>90%</td><td></td><td></td></tr>
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Sports Store</a></td><td>USA</td><td>90%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>18915</td><td>in progress</td><td>2</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>5402574</td><td>in progress</td><td>2</td><td>$78</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>26478</td><td>finish</td><td>0</td><td>$28</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>25682</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Locks Company<a></td><td>UK</td><td>24%</td><td></td><td></td></tr>
|
||||
<tr><td rowspan="5"><a href="#" class="toggle">Locks Company</a></td><td>UK</td><td>24%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>18915</td><td>in progress</td><td>2</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>5402574</td><td>in progress</td><td>1</td><td>$78</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>26478</td><td>finish</td><td>0</td><td>$28</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>25682</td><td>finish</td><td>0</td><td>$18</td></tr>
|
||||
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Famous Bike Shop<a></td><td>UK</td><td>12%</td><td></td><td></td></tr>
|
||||
<tr><td rowspan="3"><a href="#" class="toggle">Famous Bike Shop</a></td><td>UK</td><td>12%</td><td></td><td></td></tr>
|
||||
<tr class="tablesorter-childRow"><td>185406</td><td>in progress</td><td>2</td><td>$5</td></tr>
|
||||
<tr class="tablesorter-childRow"><td>541265</td><td>in progress</td><td>2</td><td>$78</td></tr>
|
||||
|
||||
@ -188,5 +188,7 @@ tr.group-header.collapsed td i {
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -395,7 +395,7 @@ group_dateString : function(date) {
|
||||
<td>Group the rows by year.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>"group-date-month"</code><span class="remark">*</span></code></td>
|
||||
<td><code>"group-date-month"</code><span class="remark">*</span></td>
|
||||
<td>Group the rows by month.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
@ -145,7 +145,7 @@
|
||||
<li>This widget adds a title to the table headers when they are sorted.</li>
|
||||
<li>Click on any header. You may have to move the mouse off, then back on the header to see the title appear.</li>
|
||||
<li>This widget will not work with the original tablesorter plugin (v2.0.5).</li>
|
||||
<li>The examples uses the <a href='http://onehackoranother.com/projects/jquery/tipsy/'>tipsy jQuery plugin </a></li>
|
||||
<li>The examples uses the <a href="http://onehackoranother.com/projects/jquery/tipsy/">tipsy jQuery plugin </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
@ -178,8 +178,7 @@
|
||||
</li>
|
||||
<li>The "ID" column has a default filter setting of ">30" and a descending sort, but neither is applied as this demo is not connected a server (just a basic JSON file).</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Original Ajax url: <span id="origurl"></span><br>
|
||||
|
@ -226,7 +226,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Triggered Events</h1>
|
||||
<ul id="display">
|
||||
|
@ -264,7 +264,7 @@ print_callback : function( config, $table, printStyle ) {
|
||||
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button type="button" class="print">Print</button>
|
||||
|
@ -493,7 +493,7 @@ table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
|
||||
|
||||
</div>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo <small>(Pick a table width or resize the browser window)</small></h1>
|
||||
<div id="demo"><h3>Reflow widget only</h3>
|
||||
|
@ -91,7 +91,7 @@
|
||||
<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>
|
||||
<li>Setting the <code>resizable_addLastColumn</code> widget option to <code>true</code> will add the resizable handle to the last column, see the "non-full" width table below (<span class="version">v2.9.0</span>).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo">
|
||||
|
@ -57,7 +57,7 @@
|
||||
<li>Because this widget uses jQuery's <code>parseJson()</code> function, it requires jQuery version 1.4.1+.</li>
|
||||
<li>Added a <code>saveSortReset</code> method which only clears the stored information (v2.7.11).</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button type="button">Reset Sort</button>
|
||||
|
@ -135,7 +135,7 @@ $(function() {
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
|
@ -184,7 +184,7 @@ $(table).trigger('staticRowsRefresh');</pre>
|
||||
<h1>Demo</h1>
|
||||
<span class="label label-info">Note</span> Make any row static or normal by toggling the <code>static</code> class name using <kbd>Ctrl</kbd> + left click (<kbd>⌘</kbd> + click on Mac)<br>
|
||||
<div id="demo"><h3>Single tbody</h3>
|
||||
<p><button class="addrow">Add Row</button> Move "Iguana" row: <button class="move up">up</button> <button class="move">down</button></p>
|
||||
<p><button class="addrow">Add Row</button> Move "Iguana" row: <button class="move up">up</button> <button class="move">down</button><p>
|
||||
<table id="alphimals" class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
|
||||
@ -272,5 +272,7 @@ $(table).trigger('staticRowsRefresh');</pre>
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -148,7 +148,7 @@ $(function() {
|
||||
<li>Add the class name <code>sticky-false</code> to any header rows you don't want to become sticky (v2.1.18).</li>
|
||||
<li>Because of the limitations of Internet Explorer version 7 and older, this widget will not work.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
|
@ -112,7 +112,7 @@
|
||||
</li>
|
||||
<li>Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4+ requires jQuery 1.2.6+.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
|
@ -63,7 +63,7 @@ table.tablesorter tbody tr.alt-row td {
|
||||
<li>The original "widgetZebra" option has been replaced by "widgetOptions.zebra". See the javascript block below for more details (v2.1).</li>
|
||||
<li>If the "widgetZebra" option exists, it will over-ride this newer "widgetOptions.zebra" option in order to maintain backwards compatibility.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
@ -118,7 +118,7 @@
|
||||
<strong>Licence:</strong>
|
||||
Dual licensed under <a class="external" href="http://www.opensource.org/licenses/mit-license.php">MIT</a>
|
||||
or <a class="external" href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses.<br>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<a id="Contents"></a>
|
||||
<h1>Contents</h1>
|
||||
@ -145,7 +145,7 @@
|
||||
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.
|
||||
It has many useful features including:
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<ul>
|
||||
<li>Multi-column sorting</li>
|
||||
@ -162,7 +162,7 @@
|
||||
<a id="Demo"></a>
|
||||
<h1>Demo</h1>
|
||||
|
||||
<table id="tablesorter-demo" class="tablesorter" data-sortList="[[0,0],[2,1]]">
|
||||
<table id="tablesorter-demo" class="tablesorter" data-sortlist="[[0,0],[2,1]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
@ -241,7 +241,7 @@
|
||||
|
||||
<p class="tip">
|
||||
<span class="label label-info">TIP!</span> Sort multiple columns simultaneously by holding down the <kbd>Shift</kbd> key and clicking a second, third or even fourth column header!
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<a id="Getting-Started"></a>
|
||||
<h1>Getting started</h1>
|
||||
@ -249,7 +249,7 @@
|
||||
To use the tablesorter plugin, include the <a class="external" href="http://jquery.com">jQuery</a>
|
||||
library and the tablesorter plugin inside the <code><head></code> tag
|
||||
of your HTML document:
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<pre class="prettyprint lang-html"><!-- choose a theme file -->
|
||||
<link rel="stylesheet" href="/path/to/theme.default.css">
|
||||
@ -261,7 +261,7 @@
|
||||
<script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>
|
||||
</pre>
|
||||
|
||||
<p>tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:</p>
|
||||
<p>tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:<p>
|
||||
|
||||
<pre class="prettyprint lang-html"><table id="myTable" class="tablesorter">
|
||||
<thead>
|
||||
@ -305,7 +305,7 @@
|
||||
</tbody>
|
||||
</table></pre>
|
||||
|
||||
<p>Start by telling tablesorter to sort your table when the document is loaded:</p>
|
||||
<p>Start by telling tablesorter to sort your table when the document is loaded:<p>
|
||||
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
$("#myTable").tablesorter();
|
||||
@ -315,7 +315,7 @@
|
||||
Click on the headers and you'll see that your table is now sortable! You can
|
||||
also pass in configuration options when you initialize the table. This tells
|
||||
tablesorter to sort on the first and second column in ascending order.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
$("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
|
||||
@ -323,14 +323,14 @@
|
||||
|
||||
<p class="tip">
|
||||
<span class="label label-info">NOTE!</span> tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see <a href="#Examples">Examples</a>
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<a id="Examples"></a>
|
||||
<h1>Examples</h1>
|
||||
<p>
|
||||
These examples will show what's possible with tablesorter. You need Javascript enabled to
|
||||
run these samples, just like you and your users will need Javascript enabled to use tablesorter.
|
||||
</p>
|
||||
<p>
|
||||
|
||||
<div class="box">
|
||||
<h3>Basic</h3>
|
||||
@ -391,7 +391,7 @@
|
||||
<ul>
|
||||
<li><a href="example-parsers.html">Parser, writing your own</a> (<a href="#function-addparser"><code>addParser</code></a>; <span class="updated version">v2.15.0</span>)</li>
|
||||
<li><a href="example-parsers-advanced.html">Parser, writing your own, advanced use</a> (v2.1; <span class="updated version">v2.15.0</span>)</li>
|
||||
<li><a href="example-option-text-extraction.html">Dealing with markup inside cells (<a href="#textextraction"><code>textExtraction</code></a> function)</a></li>
|
||||
<li><a href="example-option-text-extraction.html">Dealing with markup inside cells</a> (<a href="#textextraction"><code>textExtraction</code></a> function)</li>
|
||||
<li><a href="example-options-headers-parser.html">Skip the parsing of column content</a> (<span class="version">v2.17.1</span>)</li>
|
||||
</ul>
|
||||
|
||||
@ -460,7 +460,6 @@
|
||||
</ul>
|
||||
|
||||
<h4 id="extras">Plugins / Widgets<br>
|
||||
<h4>
|
||||
<span class="xsmall"><span class="results">†</span> these widgets are included in the <code>jquery.tablesorter.widgets.js</code> file (except for extra filter formatter functions)</span>
|
||||
<br>
|
||||
<span class="xsmall"><span class="results">‡</span> this widget is included with the plugin core.</span>
|
||||
@ -521,7 +520,7 @@
|
||||
<li><span class="results">‡</span> <a href="example-widget-zebra.html">Zebra stripe widget</a></li>
|
||||
</ul>
|
||||
|
||||
<h4 id="extras">Custom Parsers</h4>
|
||||
<h4 id="custom-parsers">Custom Parsers</h4>
|
||||
<ul>
|
||||
<li><a href="example-parsers-dates.html">Date parsers</a> (<span class="version">v2.8</span>; <span class="version updated">v2.14</span>; includes weekday, month, two-digit year & <a href="http://sugarjs.com/dates">sugar.js</a> date parsers).</li>
|
||||
<li><a href="example-parsers-file-type.html">File type parser</a> (<span class="version">v2.13</span>).</li>
|
||||
@ -552,7 +551,7 @@
|
||||
<span class="label label-info">TIP!</span> Click on the link in the property column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table id="options" class="tablesorter options" data-sortList="[[0,0]]">
|
||||
<table id="options" class="tablesorter options" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="property">Property</th>
|
||||
@ -1520,7 +1519,7 @@ $(function(){
|
||||
// direction: true = ascending; false = descending
|
||||
// columnIndex: zero-based index of the current table column being sorted
|
||||
// table: table DOM element (access options by using table.config)
|
||||
return a > b ? 1 : (a < b ? -1 : 0);
|
||||
return a > b ? 1 : (a < b ? -1 : 0);
|
||||
},
|
||||
1 : $.tablesorter.sortText, // same as the function in column 0 above (modified in v2.12)
|
||||
2 : $.tablesorter.sortNatural, // renamed v2.12 from $.tablesorter.sortText - performs natural sort
|
||||
@ -1858,7 +1857,7 @@ $(function(){
|
||||
<a id="Widget-options"></a>
|
||||
<h1>Widget & Pager Options</h1>
|
||||
|
||||
<table class="tablesorter compatibility" data-sortList="[[0,0]]">
|
||||
<table class="tablesorter compatibility" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr><th>Widget Priority</th><th>Name</th><th>Requires jQuery</th><th>Limiting function</th></tr>
|
||||
</thead>
|
||||
@ -1888,7 +1887,7 @@ $(function(){
|
||||
<span class="label label-info">TIP!</span> Click on the link in the property column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table id="widget-options" class="tablesorter options" data-sortList="[[0,0]]">
|
||||
<table id="widget-options" class="tablesorter options" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="property">Property</th>
|
||||
@ -2153,8 +2152,8 @@ $(function(){
|
||||
In <span class="version updated">v2.17.0</span>, the <code>filter_functions</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).<br>
|
||||
<pre class="prettyprint lang-js">filter_functions : {
|
||||
".col-date" : {
|
||||
"< 2004" : function (e, n, f, i) {
|
||||
return n < Date.UTC(2004, 0, 1); // < Jan 1 2004
|
||||
"< 2004" : function (e, n, f, i) {
|
||||
return n < Date.UTC(2004, 0, 1); // < Jan 1 2004
|
||||
},
|
||||
...
|
||||
}
|
||||
@ -2668,7 +2667,7 @@ $('table').trigger('search', false);</pre></div>
|
||||
<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>"tablesorter-stickyHeader"</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>
|
||||
<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>"stickyHeaders"</code></a> option to add an extra css class name as follows:
|
||||
<pre class="prettyprint lang-js">$(function(){
|
||||
$("table").tablesorter({
|
||||
@ -2926,7 +2925,7 @@ $('table').trigger('search', false);</pre></div>
|
||||
widgets: ["resizable"],
|
||||
widgetOptions : {
|
||||
// set to true for a default 5ms throttling delay
|
||||
// or set to a number < 10 (more than that makes the resizing adjustment unusable
|
||||
// or set to a number < 10 (more than that makes the resizing adjustment unusable
|
||||
resizable_throttle : true
|
||||
}
|
||||
});
|
||||
@ -3867,7 +3866,7 @@ $.extend($.tablesorter.themes.jui, {
|
||||
<span class="label label-info">TIP!</span> Click on the link in the method column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table id="method" class="tablesorter options" data-sortList="[[0,0]]">
|
||||
<table id="method" class="tablesorter options" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Method</th>
|
||||
@ -4315,7 +4314,7 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
|
||||
<span class="label label-info">TIP!</span> Click on the link in the event column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table id="event" class="tablesorter options" data-sortList="[[0,0]]">
|
||||
<table id="event" class="tablesorter options" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
@ -4680,12 +4679,14 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
|
||||
<span class="label label-info">TIP!</span> Click on the link in the variable column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
|
||||
<table class="api" data-sortList="[[0,0]]">
|
||||
<table class="api" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<th class="setWidth">Variable</th>
|
||||
<th>Type</th>
|
||||
<th class="sorter-false">Description</th>
|
||||
<th class="sorter-false">Link</th>
|
||||
<tr>
|
||||
<th class="setwidth">Variable</th>
|
||||
<th>Type</th>
|
||||
<th class="sorter-false">Description</th>
|
||||
<th class="sorter-false">Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@ -4767,6 +4768,7 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
|
||||
});</pre>
|
||||
</div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -5165,16 +5167,16 @@ var wo = $('#mytable').data('tablesorter').widgetOptions;
|
||||
<h4>Functions</h4>
|
||||
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
||||
</div>
|
||||
<table id="functions" class="api" data-sortList="[[0,0]]">
|
||||
<table id="functions" class="api" data-sortlist="[[0,0]]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="setWidth">Function</th>
|
||||
<th class="setwidth">Function</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- non-sorting tbody -->
|
||||
<tbody id="functions-core" class="tablesorter-infoOnly">
|
||||
<tbody id="functions-core2" class="tablesorter-infoOnly">
|
||||
<tr><th colspan="2">Core Functions</th></tr>
|
||||
</tbody>
|
||||
|
||||
@ -5198,7 +5200,7 @@ var wo = $('#mytable').data('tablesorter').widgetOptions;
|
||||
<pre class="prettyprint lang-js">var tbodyIndex, _tbody,
|
||||
table = $('#my-table')[0],
|
||||
tbodies = table.tBodies, // use table.config.$tbodies for all tbodies EXcluding information only tbodies
|
||||
for (tbodyIndex = 0; tbodyIndex < tbodies.length; tbodyIndex++) {
|
||||
for (tbodyIndex = 0; tbodyIndex < tbodies.length; tbodyIndex++) {
|
||||
// detach tbody from table
|
||||
_tbody = $.tablesorter.processTbody( table, tbodies[tbodyIndex], true );
|
||||
// do something magical to the tbody
|
||||
@ -5363,7 +5365,7 @@ myArray.sort(function(a,b) { return $.tablesorter.sortText(a, b); });</pre>
|
||||
</ul>
|
||||
Here is a basic example of how this function is used:
|
||||
<pre class="prettyprint lang-js">$.tablesorter.replaceAccents("áàâãä"); // result: "aaaaa"</pre>
|
||||
This function is used when the <a href="#sortlocalecompare">sortLocaleCompare</code></a> option is set to <code>true</code>. Please refer to the option and <a href="example-locale-sort.html">the demo</a> for more details on the defaults values and how to add more accented characters.
|
||||
This function is used when the <a href="#sortlocalecompare"><code>sortLocaleCompare</code></a> option is set to <code>true</code>. Please refer to the option and <a href="example-locale-sort.html">the demo</a> for more details on the defaults values and how to add more accented characters.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -5496,7 +5498,7 @@ widget.format( table, table.config, table.config.widgetOptions );</pre>
|
||||
<li><code>doAll</code> - optional, boolean flag.</li>
|
||||
<li><code>dontapply</code> - optional, boolean flag.</li>
|
||||
</ul>
|
||||
The <code>doAll</code> flag is set to <code>true</code> if all widgets contained with the global <a href="#variable-widgets">$.tablesorter.widgets</code></a> array are to be removed.<br>
|
||||
The <code>doAll</code> flag is set to <code>true</code> if all widgets contained with the global <a href="#variable-widgets"><code>$.tablesorter.widgets</code></a> array are to be removed.<br>
|
||||
<br>
|
||||
This function is called when the <a href="#refreshwidgets">refreshWidgets</a> method is triggered.
|
||||
</div>
|
||||
@ -5507,7 +5509,7 @@ widget.format( table, table.config, table.config.widgetOptions );</pre>
|
||||
<td><a href="#" class="permalink">getData</a></td>
|
||||
<td>This functions gets the sorter, string, empty, etc options for each column from jQuery data, metadata, header option or header class name ("sorter-false") (v2.1.16).
|
||||
<div class="collapsible"><br>
|
||||
priority = jQuery data > meta > headers option > header class name<br>
|
||||
priority = jQuery data > meta > headers option > header class name<br>
|
||||
<br>
|
||||
Use it as follows:
|
||||
<pre class="prettyprint lang-js">$.tablesorter.getData(headerCell, configHeaders, key);</pre>
|
||||
@ -5542,7 +5544,7 @@ $.tablesorter.getData( headerCell, config.headers[column], "sorter" );
|
||||
<br>
|
||||
This function uses the <a href="#usnumberformat"><code>usNumberFormat</code></a> option to determine if either commas or decimals are removed before converting the value within the <code>string</code> parameter into a number type variable. This function does not use the <a href="#function-isdigit"><code>$.tablesorter.isDigit</code></a> function.<br>
|
||||
<br>
|
||||
Any numbers wrapped within parenthesis are converted into negative numbers; but any other symbols (e.g. currency) are not removed and will cause this function to determine the string as a non-number (e.g. "$1.25" will be returned as a string).<br>
|
||||
Any numbers wrapped within parentheses are converted into negative numbers; but any other symbols (e.g. currency) are not removed and will cause this function to determine the string as a non-number (e.g. "$1.25" will be returned as a string).<br>
|
||||
<br>
|
||||
Use this function as follows:
|
||||
<pre class="prettyprint lang-js">// result: -2345.67 if usNumberFormat option is true
|
||||
@ -5609,8 +5611,8 @@ $.tablesorter.isDigit( "(2,345.67)" );</pre>
|
||||
<ol>
|
||||
<li>Plain string - <code>"table refuses to cooperate"</code></li>
|
||||
<li>HTML row string - <code>'<tr><td colspan="' + table.config.columns + '">yeah, instead of showing your data... I am taking a nap</td></tr>'</code> (the <a href="#variable-columns"><code>table.config.columns</code> variable</a> contains the number of table columns; use as needed)</li>
|
||||
<li>undefined - completely leave out a message parameter <code>$.tablesorter.showError( table );</code> to remove all error rows from the table thead.</li>
|
||||
</ul>
|
||||
<li>undefined - completely leave out a message parameter <code>$.tablesorter.showError( table );</code> to remove all error rows from the table thead.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -5665,7 +5667,7 @@ $.tablesorter.isDigit( "(2,345.67)" );</pre>
|
||||
$.tablesorter.getFilters( $('table') );</pre>
|
||||
This function returns an array of filter values (e.g. <code>[ '', '', '', '', '', '2?%' ]</code>), or <code>false</code> if the selected table does not have a filter row. It will also return an additional parameter if an external input with <code>data-column="all"</code> containing the value used when matching any table column.<br>
|
||||
<br>
|
||||
In <span class="version updated">v2.15</span>, this function will also return values from any external filters (set either by the <a href=#filter-external"><code>filter_external</code> option</a> or using the <a href="#function-bindsearch"><code>bindSearch</code> function</a>) - with or without an internal filter row.<br>
|
||||
In <span class="version updated">v2.15</span>, this function will also return values from any external filters (set either by the <a href="#filter-external"><code>filter_external</code> option</a> or using the <a href="#function-bindsearch"><code>bindSearch</code> function</a>) - with or without an internal filter row.<br>
|
||||
<br>
|
||||
If the second parameter is set to <code>true</code>, it forces the function to get all of the current filter values directly from the inputs. Otherwise, by default, the function returns the last search as found in this stored data <code>$('table').data('lastSearch');</code>.
|
||||
</div>
|
||||
@ -5691,7 +5693,7 @@ $.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ] );
|
||||
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true ); // this will now use the search method</pre>
|
||||
This function returns <code>true</code> if the filters were sucessfully applied, or <code>false</code> if the table does not have a filter row.<br>
|
||||
<br>
|
||||
As of <span class="version updated">v2.15</span>, this function will also set values in any external filters (set either by the <a href=#filter-external"><code>filter_external</code> option</a> or using the <a href="#function-bindsearch"><code>bindSearch</code> function</a>). An additional search parameter can be included to match any column, but please include an external input with <code>data-column="all"</code> using the <code>bindSearch</code> function so your users will know that a search has been applied.<br>
|
||||
As of <span class="version updated">v2.15</span>, this function will also set values in any external filters (set either by the <a href="#filter-external"><code>filter_external</code> option</a> or using the <a href="#function-bindsearch"><code>bindSearch</code> function</a>). An additional search parameter can be included to match any column, but please include an external input with <code>data-column="all"</code> using the <code>bindSearch</code> function so your users will know that a search has been applied.<br>
|
||||
<br>
|
||||
Also, changed is that when a <code>true</code> value is passed as a third parameter, the search is forced to refresh on the table; otherwise, if the filters set in the search exactly match the previous search, it would be ignored - this was added to prevent numerous ajax calls with exactly the same search or sort parameters (when using the pager).
|
||||
</div>
|
||||
@ -5876,7 +5878,7 @@ $.tablesorter.addHeaderResizeEvent( table, true );</pre>
|
||||
<li><a href="https://github.com/NickCraver">NickCraver</a></li>
|
||||
<li>and <a href="https://github.com/Mottie/tablesorter/graphs/contributors">all the contributors</a>!</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
<p>
|
||||
<a class="external" href="http://ejohn.org">John Resig</a> for the fantastic <a class="external" href="http://jquery.com">jQuery</a>
|
||||
</p>
|
||||
|
Loading…
Reference in New Issue
Block a user