library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Docs: add html hint & fix issues

Browse Source
This commit is contained in:
Rob Garrison 2016-01-10 16:24:57 -06:00
parent 70269e9315
commit 5992cb6649
116 changed files with 912 additions and 959 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Gruntfile.js
View File

@ -261,6 +261,15 @@ module.exports = function( grunt ) {
} }
}, },
htmlhint: {
html1: {
options: {
'tag-pair': true
},
src: ['docs/*.html', 'beta-testing/*.html']
}
},
uglify: { uglify: {
options: { options: {
preserveComments: function( node, comment ){ preserveComments: function( node, comment ){
@ -338,6 +347,7 @@ module.exports = function( grunt ) {
grunt.loadNpmTasks( 'grunt-contrib-clean' ); grunt.loadNpmTasks( 'grunt-contrib-clean' );
grunt.loadNpmTasks( 'grunt-contrib-jshint' ); grunt.loadNpmTasks( 'grunt-contrib-jshint' );
grunt.loadNpmTasks( 'grunt-htmlhint' );
grunt.loadNpmTasks( 'grunt-contrib-qunit' ); grunt.loadNpmTasks( 'grunt-contrib-qunit' );
grunt.loadNpmTasks( 'grunt-contrib-concat' ); grunt.loadNpmTasks( 'grunt-contrib-concat' );
grunt.loadNpmTasks( 'grunt-contrib-uglify' ); grunt.loadNpmTasks( 'grunt-contrib-uglify' );
@ -346,7 +356,7 @@ module.exports = function( grunt ) {
grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
grunt.loadNpmTasks( 'grunt-jscs' ); grunt.loadNpmTasks( 'grunt-jscs' );
grunt.registerTask( 'test', [ 'jscs', 'jshint', 'qunit' ] ); grunt.registerTask( 'test', [ 'jscs', 'jshint', 'htmlhint', 'qunit' ] );
tasks = [ tasks = [
'clean:build', 'clean:build',

3
beta-testing/example-pager-custom-controls.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin, Custom Pagination</title> <title>jQuery tablesorter 2.0 - Pager plugin, Custom Pagination</title>
<!-- jQuery --> <!-- jQuery -->
<script src="../docs/js/jquery-latest.min.js"></script> <script src="../docs/js/jquery-latest.min.js"></script>
@ -1197,4 +1197,3 @@
</body> </body>
</html> </html>

5
beta-testing/example-widget-column-reorder.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Column reorder Widget</title> <title>jQuery tablesorter 2.0 - Column reorder Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="../docs/js/jquery-latest.min.js"></script> <script src="../docs/js/jquery-latest.min.js"></script>
@ -189,4 +189,3 @@
</body> </body>
</html> </html>

22
docs/example-add-rows.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Adding a table row</title> <title>jQuery tablesorter 2.0 - Adding a table row</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -33,8 +33,8 @@
var row = '<tr><td>Frank</td><td>Smith</td><td>53</td><td>$39.95</td><td>22%</td><td>Mar 22, 2011 9:33 AM</td></tr>' + var row = '<tr><td>Frank</td><td>Smith</td><td>53</td><td>$39.95</td><td>22%</td><td>Mar 22, 2011 9:33 AM</td></tr>' +
'<tr><td>Inigo</td><td>Montoya</td><td>34</td><td>$19.99</td><td>15%</td><td>Sep 25, 1987 12:00PM</td></tr>', '<tr><td>Inigo</td><td>Montoya</td><td>34</td><td>$19.99</td><td>15%</td><td>Sep 25, 1987 12:00PM</td></tr>',
$row = $(row), $row = $(row),
// resort table using the current sort; set to false to prevent resort, otherwise // resort table using the current sort; set to false to prevent resort, otherwise
// any other value in resort will automatically trigger the table resort. // any other value in resort will automatically trigger the table resort.
resort = true; resort = true;
$('table') $('table')
.find('tbody').append($row) .find('tbody').append($row)
@ -57,13 +57,13 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Click on the [ Add Rows ] button to add two new rows.</li> <ul>
<li>The "addRows" method was added in version 2.0.16, and is not part of the original plugin.</li> <li>Click on the [ Add Rows ] button to add two new rows.</li>
<li>This example could have used the "update" method to add rows, but to remove rows only the "update" method works.</li> <li>The "addRows" method was added in version 2.0.16, and is not part of the original plugin.</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> <li>This example could have used the "update" method to add rows, but to remove rows only the "update" method works.</li>
</ul> <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>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<br> <br>

4
docs/example-ajax.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Appending table data with ajax</title> <title>jQuery tablesorter 2.0 - Appending table data with ajax</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

4
docs/example-apply-widget.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - applyWidgetId vs. applyWidgets</title> <title>jQuery tablesorter 2.0 - applyWidgetId vs. applyWidgets</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

4
docs/example-child-rows-filtered.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Child Rows with Filter Widget</title> <title>jQuery tablesorter 2.0 - Child Rows with Filter Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

34
docs/example-child-rows.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Child Rows</title> <title>jQuery tablesorter 2.0 - Child Rows</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -72,21 +72,21 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Click the link in the Order # column to reveal the hidden child row cells <ul>
(<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>).</li> <li>Click the link in the Order # column to reveal the hidden child row cells
<li>This option is available in the original plugin.</li> (<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>).</li>
<li>This demo had the default child row class name changed from "expand-child" to "tablesorter-childRow" in v2.4.</li> <li>This option is available in the original plugin.</li>
<li>As of <span class="version updated">v2.15.12</span>, <li>This demo had the default child row class name changed from "expand-child" to "tablesorter-childRow" in v2.4.</li>
<ul> <li>As of <span class="version updated">v2.15.12</span>,
<li>Parents of child rows now have a <code>tablesorter-hasChildRow</code> class name added.</li> <ul>
<li>The last row of each page now includes any child rows. For example, on page 1, click on the "SO71783" row link and the associated child row will now show, as it should</li> <li>Parents of child rows now have a <code>tablesorter-hasChildRow</code> class name added.</li>
<li><span class="label label-info">NOTE!</span> A new css definition was added to every default theme; the "filtered" class name (set by the <code>filter_filteredRow</code> widgetOption) has been added to properly hide/show child rows when filtered. Please see the <a href="example-child-rows-filtered.html">Child Rows with Filter Widget</a> demo.</li> <li>The last row of each page now includes any child rows. For example, on page 1, click on the "SO71783" row link and the associated child row will now show, as it should</li>
<li>The additional code to always hide child row cells on <code>pagerChange</code> is no longer needed.</li> <li><span class="label label-info">NOTE!</span> A new css definition was added to every default theme; the "filtered" class name (set by the <code>filter_filteredRow</code> widgetOption) has been added to properly hide/show child rows when filtered. Please see the <a href="example-child-rows-filtered.html">Child Rows with Filter Widget</a> demo.</li>
</ul> <li>The additional code to always hide child row cells on <code>pagerChange</code> is no longer needed.</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">

25
docs/example-colspan.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Sorting &amp; Filtering with Colspans</title> <title>jQuery tablesorter 2.0 - Sorting &amp; Filtering with Colspans</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -78,17 +78,17 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Having a <code>colspan</code> in the tbody is not fully supported by all widgets, and there are still some minor issues to work out.</li> <ul>
<li><span class="label alert">Alert</span> Cells with a <code>rowspan</code> are <em>not</em> currently supported.</li> <li>Having a <code>colspan</code> in the tbody is not fully supported by all widgets, and there are still some minor issues to work out.</li>
<li><span class="label warning">Warning</span> Cells with a <code>colspan</code> will attempt to use the parser set for that column and <em>will not</em> use the parser for another column while sorting or filtering - try this <button class="search" data-column="3" type="button">&gt;10</button> - the "17 Koala" cell is not parsed as a numeric value and is thus considered a string.</li> <li><span class="label alert">Alert</span> Cells with a <code>rowspan</code> are <em>not</em> currently supported.</li>
<li>The <code>duplicateSpan</code> option (storing of cache data) is a preliminary step in providing <code>colspan</code> support, it is by no means complete.</li> <li><span class="label warning">Warning</span> Cells with a <code>colspan</code> will attempt to use the parser set for that column and <em>will not</em> use the parser for another column while sorting or filtering - try this <button class="search" data-column="3" type="button">&gt;10</button> - the "17 Koala" cell is not parsed as a numeric value and is thus considered a string.</li>
<li>This demo requires tablesorter v2.25.0+, as well the corresponding version of the filter widget.<br><br></li> <li>The <code>duplicateSpan</code> option (storing of cache data) is a preliminary step in providing <code>colspan</code> support, it is by no means complete.</li>
<li>This demo requires tablesorter v2.25.0+, as well the corresponding version of the filter widget.<br><br></li>
<li>Follow the demo steps to hopefully get the full understanding of how to use <code>colspan</code>s in the tbody.</li> <li>Follow the demo steps to hopefully get the full understanding of how to use <code>colspan</code>s in the tbody.</li>
<li>Ultimately, with the issues noted below, I would not recommend including an entire column in the tbody that does not have a corresponding header cell - <em>don't do what I did in this demo for the first two colums</em>.</li> <li>Ultimately, with the issues noted below, I would not recommend including an entire column in the tbody that does not have a corresponding header cell - <em>don't do what I did in this demo for the first two colums</em>.</li>
</ul> </ul>
<p>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><ul> <div id="demo"><ul>
@ -180,4 +180,3 @@ Search:
</body> </body>
</html> </html>

58
docs/example-css-highlighting.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - CSS Column &amp; Row Highlights</title> <title>jQuery tablesorter 2.0 - CSS Column &amp; Row Highlights</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -171,33 +171,33 @@ table.focus-highlight td:before {
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>The css in this demo only works with <a href="http://caniuse.com/#feat=css-gencontent">modern browsers</a> (IE9+).</li> <ul>
<li>This css is originally from this <a href="http://css-tricks.com/simple-css-row-column-highlighting/">CSS-Tricks</a> article; it has been modified to work with tablesorter themes.</li> <li>The css in this demo only works with <a href="http://caniuse.com/#feat=css-gencontent">modern browsers</a> (IE9+).</li>
<li> <li>This css is originally from this <a href="http://css-tricks.com/simple-css-row-column-highlighting/">CSS-Tricks</a> article; it has been modified to work with tablesorter themes.</li>
It does not work properly on cells with <code>rowspan</code> or <code>colspan</code> within the <code>tbody</code> (I am referring to info-only tbodies, since tablesorter does not yet support sorting with these spans); if you do need a script to highlight spanned columns &amp; rows, then take a look at the <a href="https://github.com/gajus/wholly">wholly</a> plugin. <li>
<p></p> It does not work properly on cells with <code>rowspan</code> or <code>colspan</code> within the <code>tbody</code> (I am referring to info-only tbodies, since tablesorter does not yet support sorting with these spans); if you do need a script to highlight spanned columns &amp; rows, then take a look at the <a href="https://github.com/gajus/wholly">wholly</a> plugin.
</li> <p></p>
<li>To add <strong class="hover-hl">Hover</strong> Highlighting: </li>
<ul> <li>To add <strong class="hover-hl">Hover</strong> Highlighting:
<li>Add a class name of <code>&quot;<span class="hover-hl">hover-highlight</span>&quot;</code> to enable hover row and column highlighting.</li> <ul>
<li>Include the CSS shown on this page.</li> <li>Add a class name of <code>&quot;<span class="hover-hl">hover-highlight</span>&quot;</code> to enable hover row and column highlighting.</li>
<li>If needed, modify the table background color &amp; zebra striping row colors.</li> <li>Include the CSS shown on this page.</li>
<li>Modify the hover highlight row and/or column color definitions as desired (they can be different colors).</li> <li>If needed, modify the table background color &amp; zebra striping row colors.</li>
</ul> <li>Modify the hover highlight row and/or column color definitions as desired (they can be different colors).</li>
<p></p> </ul>
</li> <p></p>
<li>To add <strong class="focus-hl">Focus</strong> Highlighting: </li>
<ul> <li>To add <strong class="focus-hl">Focus</strong> Highlighting:
<li>Add a class name of <code>&quot;<span class="focus-hl">focus-highlight</span>&quot;</code> to enable focused cell with row and column highlighting.</li> <ul>
<li>Click on a table cell in the demo below to see the highlight; only <em>one element</em>, per page, can be active at a time.</li> <li>Add a class name of <code>&quot;<span class="focus-hl">focus-highlight</span>&quot;</code> to enable focused cell with row and column highlighting.</li>
<li>Include the CSS and the extra javascript shown on this page to make table cells focusable.</li> <li>Click on a table cell in the demo below to see the highlight; only <em>one element</em>, per page, can be active at a time.</li>
<li>If needed, modify the table background color &amp; zebra striping row colors.</li> <li>Include the CSS and the extra javascript shown on this page to make table cells focusable.</li>
<li>Modify the focus highlight row and/or column color definitions as desired (they can be different colors).</li> <li>If needed, modify the table background color &amp; zebra striping row colors.</li>
</ul> <li>Modify the focus highlight row and/or column color definitions as desired (they can be different colors).</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"> <div id="demo">

2
docs/example-dragtable.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Dragtable Mod (beta)</title> <title>jQuery tablesorter 2.0 - Dragtable Mod (beta)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

4
docs/example-empty-table.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Initializing tablesorter on an empty table</title> <title>jQuery tablesorter 2.0 - Initializing tablesorter on an empty table</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

5
docs/example-extending-defaults.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Extending default options</title> <title>jQuery tablesorter 2.0 - Extending default options</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -114,4 +114,3 @@
</body> </body>
</html> </html>

43
docs/example-extractors-parsers.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Using extractors with parsers</title> <title>jQuery tablesorter 2.0 - Using extractors with parsers</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -58,25 +58,25 @@ $(function() {
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>The extractor type was added in <span class="version">v2.17.6</span> and allows you to apply two parsers to a column: <ul>
<ul> <li>The extractor type was added in <span class="version">v2.17.6</span> and allows you to apply two parsers to a column:
<li>In this demo, the last column contains select dropdowns that have "good", "medium" and "bad" options.</li> <ul>
<li>So there is a need to use a parser to extract content from the selected option within the select and then use the grades parser to give each grade a sortable value.</li> <li>In this demo, the last column contains select dropdowns that have "good", "medium" and "bad" options.</li>
<li>Thanks to <a href="https://github.com/TheSin-">TheSin-</a> for adding this functionality!</li> <li>So there is a need to use a parser to extract content from the selected option within the select and then use the grades parser to give each grade a sortable value.</li>
</ul> <li>Thanks to <a href="https://github.com/TheSin-">TheSin-</a> for adding this functionality!</li>
</li> </ul>
<li>The extractor <em>is always</em> used before the parser.</li> </li>
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority: <li>The extractor <em>is always</em> used before the parser.</li>
<ul> <li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
<li>jQuery data <code>data-extractor="select"</code>.</li> <ul>
<li>metadata <code>class="{ extractor: 'select'}"</code>. This requires the metadata plugin.</li> <li>jQuery data <code>data-extractor="select"</code>.</li>
<li>headers option <code>headers : { 0 : { extractor : 'select' } }</code>.</li> <li>metadata <code>class="{ extractor: 'select'}"</code>. This requires the metadata plugin.</li>
<li>header class name <code>class="extractor-select"</code>.</li> <li>headers option <code>headers : { 0 : { extractor : 'select' } }</code>.</li>
</ul> <li>header class name <code>class="extractor-select"</code>.</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -122,4 +122,3 @@ $(function() {
</body> </body>
</html> </html>

15
docs/example-header-column-span.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Sorting Across Multiple Columns</title> <title>jQuery tablesorter 2.0 - Sorting Across Multiple Columns</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -32,11 +32,11 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Clicking on any of the sortable header cells will cause all columns below it to sort.</li> <ul>
<li>This demo will only work in tablesorter version 2.3+.</li> <li>Clicking on any of the sortable header cells will cause all columns below it to sort.</li>
</ul> <li>This demo will only work in tablesorter version 2.3+.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -97,4 +97,3 @@
</body> </body>
</html> </html>

17
docs/example-locale-sort.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Sorting Accented Characters</title> <title>jQuery tablesorter 2.0 - Sorting Accented Characters</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -71,12 +71,12 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Accented characters will get replaced by their character equivalent when the <code>sortLocaleCompare</code> option is <code>true</code>.</li> <ul>
<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>Accented characters will get replaced by their character equivalent when the <code>sortLocaleCompare</code> option is <code>true</code>.</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> <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>
</ul> <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>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -167,4 +167,3 @@
</body> </body>
</html> </html>

5
docs/example-meta-headers.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Disable headers using metadata</title> <title>jQuery tablesorter 2.0 - Disable headers using metadata</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -126,4 +126,3 @@
</body> </body>
</html> </html>

4
docs/example-meta-parsers.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Setting column parser using metadata</title> <title>jQuery tablesorter 2.0 - Setting column parser using metadata</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

4
docs/example-meta-sort-list.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Setting initial sorting order with metadata</title> <title>jQuery tablesorter 2.0 - Setting initial sorting order with metadata</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

17
docs/example-method-sortreset.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - resetting the entire table sort</title> <title>jQuery tablesorter 2.0 - resetting the entire table sort</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-1.4.4.min.js"></script> <script src="js/jquery-1.4.4.min.js"></script>
@ -42,12 +42,12 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Click on the reset button to reset the sort. The button can be used at any time.</li> <ul>
<li>Reset the table by triggering a <code>sortReset</code> event on the table (see the javascript code below).</li> <li>Click on the reset button to reset the sort. The button can be used at any time.</li>
<li>This method was added in version 2.4.7.</li> <li>Reset the table by triggering a <code>sortReset</code> event on the table (see the javascript code below).</li>
</ul> <li>This method was added in version 2.4.7.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<button type="button">Reset</button> <button type="button">Reset</button>
@ -153,4 +153,3 @@
</body> </body>
</html> </html>

5
docs/example-multiple-tbodies.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Sorting with Multiple Tbodies</title> <title>jQuery tablesorter 2.0 - Sorting with Multiple Tbodies</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -106,4 +106,3 @@
</body> </body>
</html> </html>

43
docs/example-option-custom-sort.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Using a Custom Sort Script</title> <title>jQuery tablesorter 2.0 - Using a Custom Sort Script</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -26,7 +26,7 @@
Array.AlphanumericSortIgnoreCase = true; Array.AlphanumericSortIgnoreCase = true;
// see https://github.com/andrewplummer/Sugar/issues/382#issuecomment-41526957 // see https://github.com/andrewplummer/Sugar/issues/382#issuecomment-41526957
Array.AlphanumericSortEquivalents = {}; Array.AlphanumericSortEquivalents = {};
$("table").tablesorter({ $("table").tablesorter({
theme : 'blue', theme : 'blue',
// table = table object; get config options from table.config // table = table object; get config options from table.config
@ -58,24 +58,24 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Modified the <code>textSorter</code> option to allow setting the sorter per column <span class="version">v2.12</span>: <ul>
<ul> <li>Modified the <code>textSorter</code> option to allow setting the sorter per column <span class="version">v2.12</span>:
<li><span class="alert">*NOTE*</span> The <code>textSorter</code> function parameters have changed! It is now <code>function(a, b, direction, column, table)</code> (previously <code>function(a, b, table, column)</code>).</li> <ul>
<li>The &quot;Icelandic Alphabet&quot; column is using the <a href="http://sugarjs.com/arrays#sorting">Sugar</a> library to sort: <li><span class="alert">*NOTE*</span> The <code>textSorter</code> function parameters have changed! It is now <code>function(a, b, direction, column, table)</code> (previously <code>function(a, b, table, column)</code>).</li>
<ul> <li>The &quot;Icelandic Alphabet&quot; column is using the <a href="http://sugarjs.com/arrays#sorting">Sugar</a> library to sort:
<li>Solved (4/28/2014)! <del>please note that at the time of this writing, there is an issue with it not sorting properly (<a href="https://github.com/andrewplummer/Sugar/issues/382">ref</a>)</del></li> <ul>
<li>You can tell it is working properly when you sort the Icelandic Alphabet column and the numeric column numbers are sequential (<span class="lookhere">see row #37</span>).</li> <li>Solved (4/28/2014)! <del>please note that at the time of this writing, there is an issue with it not sorting properly (<a href="https://github.com/andrewplummer/Sugar/issues/382">ref</a>)</del></li>
</ul> <li>You can tell it is working properly when you sort the Icelandic Alphabet column and the numeric column numbers are sequential (<span class="lookhere">see row #37</span>).</li>
</li> </ul>
<li>The &quot;Plain Text Sort&quot; column is using a basic alphabetical sort (with localeCompare if set). Sort that column, then the last column to see how it differs from an alphanumeric sort.</li> </li>
<li>The sorting of empty cells still occurs regardless of the custom <code>textSorter</code> setting.</li> <li>The &quot;Plain Text Sort&quot; column is using a basic alphabetical sort (with localeCompare if set). Sort that column, then the last column to see how it differs from an alphanumeric sort.</li>
</ul> <li>The sorting of empty cells still occurs regardless of the custom <code>textSorter</code> setting.</li>
</li> </ul>
<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>
<li>This option is not part of the original plugin (v2.2).</li> <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>
</ul> <li>This option is not part of the original plugin (v2.2).</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
@ -147,4 +147,3 @@
</body> </body>
</html> </html>

38
docs/example-option-date-format.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Changing the date format</title> <title>jQuery tablesorter 2.0 - Changing the date format</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -45,22 +45,23 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>The dateFormat option was modified in version 2.0.23 (not part of the original plugin).</li> <ul>
<li>The dateFormat option will ONLY work with the <code>shortDate</code> parser.</li> <li>The dateFormat option was modified in version 2.0.23 (not part of the original plugin).</li>
<li>The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).</li> <li>The dateFormat option will ONLY work with the <code>shortDate</code> parser.</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.</li> <li>The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).</li>
<li>In versions 2.3+, date formats can be set by column using any of the following methods (they all do the same thing), in order of priority: <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>
<ul> <li>In versions 2.3+, date formats can be set by column using any of the following methods (they all do the same thing), in order of priority:
<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> <ul>
<li>metadata <code>class="{ dateFormat: "mmddyyyy" }"</code>. This requires the metadata plugin.</li> <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>
<li>headers option <code>headers : { 0 : { dateFormat: "mmddyyyy" } }</code>.</li> <li>metadata <code>class="{ dateFormat: "mmddyyyy" }"</code>. This requires the metadata plugin.</li>
<li>header class name <code>class="dateFormat-mmddyyyy"</code>.</li> <li>headers option <code>headers : { 0 : { dateFormat: "mmddyyyy" } }</code>.</li>
<li>Global (all columns) <code>dateFormat</code> option setting.</li> <li>header class name <code>class="dateFormat-mmddyyyy"</code>.</li>
</ul> <li>Global (all columns) <code>dateFormat</code> option setting.</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -173,4 +174,3 @@
</body> </body>
</html> </html>

7
docs/example-option-debug.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Enabling debug mode</title> <title>jQuery tablesorter 2.0 - Enabling debug mode</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -41,7 +41,7 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> If firebug is installed the debuging information will be displayed in the firebug console. <em>NOTE!</em> If firebug is installed the debuging information will be displayed in the firebug console.
</p> </p>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
<thead> <thead>
@ -116,4 +116,3 @@
</body> </body>
</html> </html>

2
docs/example-option-delay-init.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Demonstration of delayInit option</title> <title>jQuery tablesorter 2.0 - Demonstration of delayInit option</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

21
docs/example-option-digits.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Dealing with Digits</title> <title>jQuery tablesorter 2.0 - Dealing with Digits</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -33,14 +33,14 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Click on any column header to sort that column.</li> <ul>
<li>The alphanumeric sort working in the first column was added in version 2.0.6 (not part of the original plugin).</li> <li>Click on any column header to sort that column.</li>
<li>The above sort was replaced with a natural sort in version 2.2.</li> <li>The alphanumeric sort working in the first column was added in version 2.0.6 (not part of the original plugin).</li>
<li>This example demonstrates that common table values are auto-detected (including plain text, currency, percentages, and positive &amp; 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>The above sort was replaced with a natural sort in version 2.2.</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> <li>This example demonstrates that common table values are auto-detected (including plain text, currency, percentages, and positive &amp; negative numbers), so there is no need to set a specific parser unless you notice an issue with how a column is sorting.</li>
</ul> <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>
<p> </ul>
<h1>Demo</h1> <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 --> <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 -->
@ -150,4 +150,3 @@
</body> </body>
</html> </html>

5
docs/example-option-render-header.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Render Header</title> <title>jQuery tablesorter 2.0 - Render Header</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -158,4 +158,3 @@
</body> </body>
</html> </html>

5
docs/example-option-render-template.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Header Template &amp; Rendering</title> <title>jQuery tablesorter 2.0 - Header Template &amp; Rendering</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -146,4 +146,3 @@
</body> </body>
</html> </html>

3
docs/example-option-selectorsort.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Using selectorSort</title> <title>jQuery tablesorter 2.0 - Using selectorSort</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -148,4 +148,3 @@
</body> </body>
</html> </html>

15
docs/example-option-show-processing.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - showProcessing & Filter events</title> <title>jQuery tablesorter 2.0 - showProcessing & Filter events</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-1.4.4.min.js"></script> <script src="js/jquery-1.4.4.min.js"></script>
@ -67,11 +67,11 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<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> <ul>
<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> <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>
</ul> <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>
<p> </ul>
<h1>Javascript</h1> <h1>Javascript</h1>
<div id="javascript"> <div id="javascript">
@ -1135,4 +1135,3 @@
</body> </body>
</html> </html>

17
docs/example-option-sort-append.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Append a default sorting order</title> <title>jQuery tablesorter 2.0 - Append a default sorting order</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -75,12 +75,12 @@ $(function() {
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In <span class="version">v2.24.0</span>, <code>sortAppend</code> can now be applied based on the primary column sort.</li> <ul>
<li>Click to sort any column header to see the the first column sort is appended to the selected sort order.</li> <li>In <span class="version">v2.24.0</span>, <code>sortAppend</code> can now be applied based on the primary column sort.</li>
<li>This option is part of the original plugin</li> <li>Click to sort any column header to see the the first column sort is appended to the selected sort order.</li>
</ul> <li>This option is part of the original plugin</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><h4>"First Name" column ascending sort appended to any other sort: <small id="result1"></small></h4> <div id="demo"><h4>"First Name" column ascending sort appended to any other sort: <small id="result1"></small></h4>
@ -129,4 +129,3 @@ $(function() {
</body> </body>
</html> </html>

62
docs/example-option-sort-empty.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Sorting empty cells</title> <title>jQuery tablesorter 2.0 - Sorting empty cells</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -49,35 +49,34 @@ $(function(){
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<p></p> </p>
<ul> <ul>
<li>Set the <code>emptyTo</code> selector below: <li>Set the <code>emptyTo</code> selector below:
<ul> <ul>
<li><code>top</code> - sort empty table cells to the top.</li> <li><code>top</code> - sort empty table cells to the top.</li>
<li><code>bottom</code> - sort empty table cells to the bottom.</li> <li><code>bottom</code> - sort empty table cells to the bottom.</li>
<li><code>none</code> or <code>zero</code> <li><code>none</code> or <code>zero</code>
<ul> <ul>
<li>Sort empty table cells as if the cell has the value equal to zero</li> <li>Sort empty table cells as if the cell has the value equal to zero</li>
<li>None/zero has a value less than A through Z (in javascript, <code>0 &lt; 'A' && 0 &lt; 'Z'</code>); so in an alphabetical column, empty cells will sort at the top in an ascending sort &amp; at the bottom in a descending sort.</li> <li>None/zero has a value less than A through Z (in javascript, <code>0 &lt; 'A' && 0 &lt; 'Z'</code>); so in an alphabetical column, empty cells will sort at the top in an ascending sort &amp; at the bottom in a descending sort.</li>
<li>In numerical columns, empty cells will sort as if their value was zero.</li> <li>In numerical columns, empty cells will sort as if their value was zero.</li>
</ul> </ul>
</li> </li>
</ul> </ul>
<br> <br>
</li> </li>
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority: <li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
<ul> <ul>
<li>jQuery data <code>data-empty="top"</code>.</li> <li>jQuery data <code>data-empty="top"</code>.</li>
<li>metadata <code>class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li> <li>metadata <code>class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li>
<li>headers option <code>headers : { 0 : { empty : 'top' } }</code>.</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="empty-top"</code>.</li>
<li>Overall <code>emptyTo</code> option.</li> <li>Overall <code>emptyTo</code> option.</li>
</ul> </ul>
<br> <br>
</li> </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> <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> </ul>
<p>
<h1>Demo</h1> <h1>Demo</h1>
@ -195,4 +194,3 @@ Set <code>emptyTo</code> option: <select>
</body> </body>
</html> </html>

15
docs/example-option-sort-force.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Force a default sorting order</title> <title>jQuery tablesorter 2.0 - Force a default sorting order</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -45,11 +45,11 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Click to sort any column header to see the forcing of the first column sort.</li> <ul>
<li>This option is part of the original plugin</li> <li>Click to sort any column header to see the forcing of the first column sort.</li>
</ul> <li>This option is part of the original plugin</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -125,4 +125,3 @@
</body> </body>
</html> </html>

7
docs/example-option-sort-key.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Change multi-column sorting key</title> <title>jQuery tablesorter 2.0 - Change multi-column sorting key</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -40,7 +40,7 @@
<p class="tip"> <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. <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> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -116,4 +116,3 @@
</body> </body>
</html> </html>

5
docs/example-option-sort-list.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Set an initial table sort</title> <title>jQuery tablesorter 2.0 - Set an initial table sort</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -173,4 +173,3 @@
</body> </body>
</html> </html>

5
docs/example-option-sort-order.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Set an initial sort order direction</title> <title>jQuery tablesorter 2.0 - Set an initial sort order direction</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -110,4 +110,3 @@
</body> </body>
</html> </html>

17
docs/example-option-sortreset-sortrestart.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Reset/Restart the sort</title> <title>jQuery tablesorter 2.0 - Reset/Restart the sort</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -52,13 +52,13 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>The default <code>sortInitialOrder</code> for the entire table is set to <code>desc</code> (descending sort).</li> <ul>
<li>The last three columns have the initial sort order set in the ascending direction, using the headers option.</li> <li>The default <code>sortInitialOrder</code> for the entire table is set to <code>desc</code> (descending sort).</li>
<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>The last three columns have the initial sort order set in the ascending direction, using the headers option.</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> <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>
</ul> <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>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -134,4 +134,3 @@
</body> </body>
</html> </html>

19
docs/example-option-text-extraction.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Dealing with markup inside cells</title> <title>jQuery tablesorter 2.0 - Dealing with markup inside cells</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -57,13 +57,13 @@
<div id="main"> <div id="main">
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In <span class="version updated">v2.17.0</span>, the <code>textExtraction</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).</li> <ul>
<li>The textExtraction function setting for each column was added in version 2.0.12 (not part of the original plugin).</li> <li>In <span class="version updated">v2.17.0</span>, the <code>textExtraction</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).</li>
<li>The "First Name" column is sorting by the contents of the &lt;strong&gt; tag (in red).</li> <li>The textExtraction function setting for each column was added in version 2.0.12 (not part of the original plugin).</li>
<li>Added "table" and "cellIndex" variables to the textExtraction function (v2.1.2).</li> <li>The "First Name" column is sorting by the contents of the &lt;strong&gt; tag (in red).</li>
</ul> <li>Added "table" and "cellIndex" variables to the textExtraction function (v2.1.2).</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -139,4 +139,3 @@
</body> </body>
</html> </html>

24
docs/example-option-textsorter-semver.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Semver Sorting</title> <title>jQuery tablesorter 2.0 - Semver Sorting</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -72,16 +72,16 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>This method does not use a parser nor a widget, it uses <code>semver.js</code> to allow the sorting of <a href="http://semver.org/">semantic version numbers</a>.</li> <ul>
<li>But this method requires a slightly modified version of <a href="https://github.com/isaacs/node-semver">semver.js for node</a>. All modifications are signified within the file to ease updating.</li> <li>This method does not use a parser nor a widget, it uses <code>semver.js</code> to allow the sorting of <a href="http://semver.org/">semantic version numbers</a>.</li>
<li>The modified semver.js (<a href="../js/extras/semver-mod.js">semver-mod.js</a>) is contained in the new "extras" subfolder. Please include it if you need this specific type of sort.</li> <li>But this method requires a slightly modified version of <a href="https://github.com/isaacs/node-semver">semver.js for node</a>. All modifications are signified within the file to ease updating.</li>
<li>Invalid version numbers be sorted using a basic text sort, so they will be grouped with their similar version numbers, but not sorted properly; this demo has some extra code to highlight invalid version numbers.</li> <li>The modified semver.js (<a href="../js/extras/semver-mod.js">semver-mod.js</a>) is contained in the new "extras" subfolder. Please include it if you need this specific type of sort.</li>
<li>In this demo, when the semver 2.0.0 compliant version column is sorted, the order column will be in sequential order.</li> <li>Invalid version numbers be sorted using a basic text sort, so they will be grouped with their similar version numbers, but not sorted properly; this demo has some extra code to highlight invalid version numbers.</li>
<li>Semver example order, from semver.org:<br>1.0.0-alpha &lt; 1.0.0-alpha.1 &lt; 1.0.0-alpha.beta &lt; 1.0.0-beta &lt; 1.0.0-beta.2 &lt; 1.0.0-beta.11 &lt; 1.0.0-rc.1 &lt; 1.0.0</li> <li>In this demo, when the semver 2.0.0 compliant version column is sorted, the order column will be in sequential order.</li>
<!-- http://jsfiddle.net/Mottie/abkNM/1626/ --> <li>Semver example order, from semver.org:<br>1.0.0-alpha &lt; 1.0.0-alpha.1 &lt; 1.0.0-alpha.beta &lt; 1.0.0-beta &lt; 1.0.0-beta.2 &lt; 1.0.0-beta.11 &lt; 1.0.0-rc.1 &lt; 1.0.0</li>
</ul> <!-- http://jsfiddle.net/Mottie/abkNM/1626/ -->
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">

27
docs/example-option-theme-metro-style.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title> <title>jQuery tablesorter 2.0 - Pager plugin</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -57,17 +57,17 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Only the Windows Metro Dark theme has been included; for other colors: <ul>
<ul> <li>Only the Windows Metro Dark theme has been included; for other colors:
<li>Create your own dynamically by modifying <a href="http://codepen.io/Mottie/pen/gCslk">this demo</a>.</li> <ul>
<li>Change the <code>@headerBackground</code> to any valid color (some styles inspired by <a href="http://www.jtable.org/">JTable</a> have been listed in the comments).</li> <li>Create your own dynamically by modifying <a href="http://codepen.io/Mottie/pen/gCslk">this demo</a>.</li>
<li>If you don't like the look of the style, you might also want to check out <a href="http://jquit.com/builder/">this jQuery UI theme builder</a> which creates metro style themes.</li> <li>Change the <code>@headerBackground</code> to any valid color (some styles inspired by <a href="http://www.jtable.org/">JTable</a> have been listed in the comments).</li>
</ul> <li>If you don't like the look of the style, you might also want to check out <a href="http://jquit.com/builder/">this jQuery UI theme builder</a> which creates metro style themes.</li>
</li> </ul>
<li>For alternate <code>thead</code> &amp; <code>tfoot</code> row colors, add the class name <code>dark-row</code>. See the HTML below.</li> </li>
</ul> <li>For alternate <code>thead</code> &amp; <code>tfoot</code> row colors, add the class name <code>dark-row</code>. See the HTML below.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
@ -191,4 +191,3 @@
</body> </body>
</html> </html>

57
docs/example-options-headers-digits-strings.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Dealing with text strings in numerical sorts</title> <title>jQuery tablesorter 2.0 - Dealing with text strings in numerical sorts</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -48,32 +48,32 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>This functionality is new as of version 2.0.10 (not part of the original plugin).</li> <ul>
<li>When a column is sorted numerically ( <code>sorter:"digit"</code> ) any text in that column will, by default, be given a <em>zero</em> value. Sort the last column (#9) to see the problem with this method.</li> <li>This functionality is new as of version 2.0.10 (not part of the original plugin).</li>
<li>Overall <code>stringTo</code> option added in version 2.1.16.</li> <li>When a column is sorted numerically ( <code>sorter:"digit"</code> ) any text in that column will, by default, be given a <em>zero</em> value. Sort the last column (#9) to see the problem with this method.</li>
<li>String options changed in version 2.1.16; setting the value to: <li>Overall <code>stringTo</code> option added in version 2.1.16.</li>
<ul> <li>String options changed in version 2.1.16; setting the value to:
<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> <ul>
<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>"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>"top"</code> will always sort the text to the top of the column.</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>"bottom"</code> will always sort the text to the bottom of the column.</li> <li><code>"top"</code> will always sort the text to the top 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>"bottom"</code> will always sort the text to the bottom of the column.</li>
</ul> <li><code>"none"</code> or <code>"zero"</code> will treat the text as if it has a value of zero.</li>
</li> </ul>
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority: </li>
<ul> <li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
<li>jQuery data <code>data-string="top"</code>.</li> <ul>
<li>metadata <code>class="{ string: 'top'}"</code>. This requires the metadata plugin.</li> <li>jQuery data <code>data-string="top"</code>.</li>
<li>headers option <code>headers : { 0 : { string : 'top' } }</code>.</li> <li>metadata <code>class="{ string: 'top'}"</code>. This requires the metadata plugin.</li>
<li>header class name <code>class="string-top"</code>.</li> <li>headers option <code>headers : { 0 : { string : 'top' } }</code>.</li>
<li>Overall <code>stringTo</code> option.</li> <li>header class name <code>class="string-top"</code>.</li>
</ul> <li>Overall <code>stringTo</code> option.</li>
</li> </ul>
<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>
<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> <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>
</ul> <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>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table> <div id="demo"><table>
@ -222,4 +222,3 @@
</body> </body>
</html> </html>

31
docs/example-options-headers-locked.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Lock sort order</title> <title>jQuery tablesorter 2.0 - Lock sort order</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -41,19 +41,19 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>This option was part of the original plugin, but it was broken.</li> <ul>
<li>Sort the first, third and fifth columns to see how the sort is locked.</li> <li>This option was part of the original plugin, but it was broken.</li>
<li>Columns can be locked using any of the following methods (they all do the same thing), in order of priority (v2.3+): <li>Sort the first, third and fifth columns to see how the sort is locked.</li>
<ul> <li>Columns can be locked using any of the following methods (they all do the same thing), in order of priority (v2.3+):
<li>jQuery data <code>data-lockedorder="asc"</code>. (equivalent to <code>data-locked-order="asc"</code>).</li> <ul>
<li>metadata <code>class="{ lockedOrder: 'asc'}"</code>. This requires the metadata plugin.</li> <li>jQuery data <code>data-lockedorder="asc"</code>. (equivalent to <code>data-locked-order="asc"</code>).</li>
<li>headers option <code>headers : { 0 : { lockedOrder: 'asc' } }</code>.</li> <li>metadata <code>class="{ lockedOrder: 'asc'}"</code>. This requires the metadata plugin.</li>
<li>header class name <code>class="lockedOrder-asc"</code>.</li> <li>headers option <code>headers : { 0 : { lockedOrder: 'asc' } }</code>.</li>
</ul> <li>header class name <code>class="lockedOrder-asc"</code>.</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -129,4 +129,3 @@
</body> </body>
</html> </html>

31
docs/example-options-headers-order.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Set initial sort order</title> <title>jQuery tablesorter 2.0 - Set initial sort order</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -44,19 +44,19 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Adding "sortInitialOrder" inside of the "headers" option was added in version 2.0.8 (not part of the original plugin).</li> <ul>
<li>In versions 2.3+, the initial sort order of the columns can be set using any of the following methods (they all do the same thing), in order of priority: <li>Adding "sortInitialOrder" inside of the "headers" option was added in version 2.0.8 (not part of the original plugin).</li>
<ul> <li>In versions 2.3+, the initial sort order of the columns can be set using any of the following methods (they all do the same thing), in order of priority:
<li>jQuery data <code>data-sort-initial-order="desc"</code> (equivalent to <code>data-sortinitialorder="desc"</code>).</li> <ul>
<li>metadata <code>class="{ sortInitialOrder: "desc" }"</code>. This requires the metadata plugin.</li> <li>jQuery data <code>data-sort-initial-order="desc"</code> (equivalent to <code>data-sortinitialorder="desc"</code>).</li>
<li>headers option <code>headers : { 0 : { sortInitialOrder: "desc" } }</code>.</li> <li>metadata <code>class="{ sortInitialOrder: "desc" }"</code>. This requires the metadata plugin.</li>
<li>header class name <code>class="sortInitialOrder-desc"</code>.</li> <li>headers option <code>headers : { 0 : { sortInitialOrder: "desc" } }</code>.</li>
<li>overall <code>sortInitialOrder</code> option setting.</li> <li>header class name <code>class="sortInitialOrder-desc"</code>.</li>
</ul> <li>overall <code>sortInitialOrder</code> option setting.</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -132,4 +132,3 @@
</body> </body>
</html> </html>

33
docs/example-options-headers-parser.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Skip parsing of content</title> <title>jQuery tablesorter 2.0 - Skip parsing of content</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -55,20 +55,20 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In <span class="version">v2.17.1</span>, this parser setting was added to reduce the time needed to process the table content during initialization and updating.</li> <ul>
<li><em>Disabling of the sorting</em> of the same column should be observed as sorting will not work without the parsed data.</li> <li>In <span class="version">v2.17.1</span>, this parser setting was added to reduce the time needed to process the table content during initialization and updating.</li>
<li><em>Disabling of filtering</em> of the same column may be necessary, especially if the data requires parsing when comparisons of data is required (e.g. looking for dates <code>&lt;</code>, <code>&lt;=</code>, <code>&gt;</code> or <code>&gt;=</code> a certain time).</li> <li><em>Disabling of the sorting</em> of the same column should be observed as sorting will not work without the parsed data.</li>
<li>Use this setting by following any of these methods (they all do the same thing), in order of priority: <li><em>Disabling of filtering</em> of the same column may be necessary, especially if the data requires parsing when comparisons of data is required (e.g. looking for dates <code>&lt;</code>, <code>&lt;=</code>, <code>&gt;</code> or <code>&gt;=</code> a certain time).</li>
<ul> <li>Use this setting by following any of these methods (they all do the same thing), in order of priority:
<li>jQuery data <code>data-parser="false"</code>.</li> <ul>
<li>metadata <code>class="{ parser: "false" }"</code>. This requires the metadata plugin.</li> <li>jQuery data <code>data-parser="false"</code>.</li>
<li>headers option <code>headers : { 0 : { parser: false } }</code>.</li> <li>metadata <code>class="{ parser: "false" }"</code>. This requires the metadata plugin.</li>
<li>header class name <code>class="parser-false"</code>.</li> <li>headers option <code>headers : { 0 : { parser: false } }</code>.</li>
</ul> <li>header class name <code>class="parser-false"</code>.</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -106,4 +106,3 @@
</body> </body>
</html> </html>

31
docs/example-options-headers.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Disable sort</title> <title>jQuery tablesorter 2.0 - Disable sort</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -49,19 +49,19 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In tablesorter <span class="version">v2.18.1</span>, you can now target a column by the class name of an element inside of a header; note that the span has the targeted class name in the first name column.</li> <ul>
<li>In tablesorter v2.0.5 and older, only the metadata and headers options methods were available.</li> <li>In tablesorter <span class="version">v2.18.1</span>, you can now target a column by the class name of an element inside of a header; note that the span has the targeted class name in the first name column.</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: <li>In tablesorter v2.0.5 and older, only the metadata and headers options methods were available.</li>
<ul> <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:
<li>jQuery data <code>data-sorter="false"</code> (see the Javascript block below on how to set it directly).</li> <ul>
<li>metadata <code>class="{ sorter: false }"</code>. This requires the metadata plugin.</li> <li>jQuery data <code>data-sorter="false"</code> (see the Javascript block below on how to set it directly).</li>
<li>headers option <code>headers : { 0 : { sorter: false } }</code>.</li> <li>metadata <code>class="{ sorter: false }"</code>. This requires the metadata plugin.</li>
<li>header class name <code>class="sorter-false"</code>.</li> <li>headers option <code>headers : { 0 : { sorter: false } }</code>.</li>
</ul> <li>header class name <code>class="sorter-false"</code>.</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -137,4 +137,3 @@
</body> </body>
</html> </html>

4
docs/example-pager-ajax.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin - Ajax</title> <title>jQuery tablesorter 2.0 - Pager plugin - Ajax</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

31
docs/example-pager-filtered.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin + Filter widget</title> <title>jQuery tablesorter 2.0 - Pager plugin + Filter widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -138,19 +138,19 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> The following are not part of the original plugin: <em>NOTE!</em> The following are not part of the original plugin:
<ul> </p>
<li>In <span class="version updated">v2.23.0</span>, the following methods were changed due to issues with unique namespacing. <ul>
<ul> <li>In <span class="version updated">v2.23.0</span>, the following methods were changed due to issues with unique namespacing.
<li><code>destroy.pager</code> is now <code>destroyPager</code></li> <ul>
<li><code>disable.pager</code> is now <code>disablePager</code></li> <li><code>destroy.pager</code> is now <code>destroyPager</code></li>
<li><code>enable.pager</code> is now <code>enablePager</code></li> <li><code>disable.pager</code> is now <code>disablePager</code></li>
</ul> <li><code>enable.pager</code> is now <code>enablePager</code></li>
</li> </ul>
<li>When using this pager plugin with the filter widget, make sure that the <code>removeRows</code> option is set to <code>false</code> or it won't work.</li> </li>
<li>This combination was not possible in tablesorter versions prior to version 2.4.</li> <li>When using this pager plugin with the filter widget, make sure that the <code>removeRows</code> option is set to <code>false</code> or it won't work.</li>
<li>This combination can not be applied to the original tablesorter.</li> <li>This combination was not possible in tablesorter versions prior to version 2.4.</li>
</ul> <li>This combination can not be applied to the original tablesorter.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<br> <br>
@ -476,4 +476,3 @@
</body> </body>
</html> </html>

37
docs/example-pager.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title> <title>jQuery tablesorter 2.0 - Pager plugin</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -235,22 +235,22 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> The following are not part of the original plugin: <em>NOTE!</em> The following are not part of the original plugin:
<ul> </p>
<li>In <span class="version updated">v2.24.0</span>, a page size select option with a value of "all" will display all rows - not recommended for ajax interactions!</li> <ul>
<li>In <span class="version updated">v2.23.0</span>, the following methods were changed due to issues with unique namespacing. <li>In <span class="version updated">v2.24.0</span>, a page size select option with a value of "all" will display all rows - not recommended for ajax interactions!</li>
<ul> <li>In <span class="version updated">v2.23.0</span>, the following methods were changed due to issues with unique namespacing.
<li><code>destroy.pager</code> is now <code>destroyPager</code></li> <ul>
<li><code>disable.pager</code> is now <code>disablePager</code></li> <li><code>destroy.pager</code> is now <code>destroyPager</code></li>
<li><code>enable.pager</code> is now <code>enablePager</code></li> <li><code>disable.pager</code> is now <code>disablePager</code></li>
</ul> <li><code>enable.pager</code> is now <code>enablePager</code></li>
</li> </ul>
<li>In <span class="version">v2.19.0</span>, added <code>pageAndSize</code> method which allows setting both the pager page &amp; size.</li> </li>
<li>In <span class="version">v2.17.6</span>, added <code>{startRow:input}</code> and <code>{page:input}</code> variables to the <code>output</code> option.</li> <li>In <span class="version">v2.19.0</span>, added <code>pageAndSize</code> method which allows setting both the pager page &amp; size.</li>
<li>This pager plugin can be applied to the original tablesorter, but there is one exception - setting the <code>removeRows</code> option to false will break the sort.</li> <li>In <span class="version">v2.17.6</span>, added <code>{startRow:input}</code> and <code>{page:input}</code> variables to the <code>output</code> option.</li>
<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>This pager plugin can be applied to the original tablesorter, but there is one exception - setting the <code>removeRows</code> option to false will break the sort.</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> <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>
</ul> <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>
<p> </ul>
<h1>Triggered Events &nbsp; <button class="clear">Clear</button></h1> <h1>Triggered Events &nbsp; <button class="clear">Clear</button></h1>
<ul id="display"> <ul id="display">
@ -467,4 +467,3 @@ td.tablesorter-pager {
</body> </body>
</html> </html>

27
docs/example-parsers-advanced.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Writing custom parsers, advanced use</title> <title>jQuery tablesorter 2.0 - Writing custom parsers, advanced use</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -78,17 +78,17 @@ $(function(){
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In <span class="version">v2.15.0</span>, the <code>parsed</code> parameter <ul>
<ul> <li>In <span class="version">v2.15.0</span>, the <code>parsed</code> parameter
<li>This parameter is a flag used by the filter widget.</li> <ul>
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li> <li>This parameter is a flag used by the filter widget.</li>
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li> <li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
</ul> <li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
</li> </ul>
<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> </li>
</ul> <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>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table> <div id="demo"><table>
@ -151,4 +151,3 @@ $(function(){
</body> </body>
</html> </html>

31
docs/example-parsers-class-name.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Disable or set the column parser using class names</title> <title>jQuery tablesorter 2.0 - Disable or set the column parser using class names</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -32,19 +32,19 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In tablesorter version 2.0.5 and older, only the metadata and headers options methods were available to set the parsers.</li> <ul>
<li>In versions 2.0.11+, parsers could be set using class names.</li> <li>In tablesorter version 2.0.5 and older, only the metadata and headers options methods were available to set the parsers.</li>
<li>Currently (versions 2.3+), parsers can be set using any of the following methods (they all do the same thing), in order of priority: <li>In versions 2.0.11+, parsers could be set using class names.</li>
<ul> <li>Currently (versions 2.3+), parsers can be set using any of the following methods (they all do the same thing), in order of priority:
<li>jQuery data <code>data-sorter="text"</code> (see the Javascript block below on how to set it directly).</li> <ul>
<li>metadata <code>class="{ sorter: "text" }"</code>. This requires the metadata plugin.</li> <li>jQuery data <code>data-sorter="text"</code> (see the Javascript block below on how to set it directly).</li>
<li>headers option <code>headers : { 0 : { sorter: "text" } }</code>.</li> <li>metadata <code>class="{ sorter: "text" }"</code>. This requires the metadata plugin.</li>
<li>header class name <code>class="sorter-text"</code>.</li> <li>headers option <code>headers : { 0 : { sorter: "text" } }</code>.</li>
</ul> <li>header class name <code>class="sorter-text"</code>.</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -128,4 +128,3 @@
</body> </body>
</html> </html>

4
docs/example-parsers-date-range.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter - Date range parsers</title> <title>jQuery tablesorter - Date range parsers</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

59
docs/example-parsers-dates.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter - Assorted date parsers</title> <title>jQuery tablesorter - Assorted date parsers</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -95,33 +95,33 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In <span class="version">v2.24.1</span>, <ul>
<ul> <li>In <span class="version">v2.24.1</span>,
<li>Updated weekday &amp; month parsers to better integrate with <a href="https://github.com/jquery/globalize">jQuery Globalize</a>.</li> <ul>
<li>This demo now includes a column for French named weekdays &amp; months.</li> <li>Updated weekday &amp; month parsers to better integrate with <a href="https://github.com/jquery/globalize">jQuery Globalize</a>.</li>
</ul> <li>This demo now includes a column for French named weekdays &amp; months.</li>
</li> </ul>
<li>Parse Dates with these parsers </li>
<ul> <li>Parse Dates with these parsers
<li>The "Date" column is using the <a href="http://sugarjs.com/dates#comparing_dates">sugar</a> library to parse dates. Make sure to include the sugar library and the sugar-date-parser.</li> <ul>
<li>The "Weekday" column uses the included "weekday" parser. You can modify parser to match whatever language you are using.</li> <li>The "Date" column is using the <a href="http://sugarjs.com/dates#comparing_dates">sugar</a> library to parse dates. Make sure to include the sugar library and the sugar-date-parser.</li>
<li>The "Month" column uses the included "month" parser. You can also modify the month names within the parser to match whatever language you are using.</li> <li>The "Weekday" column uses the included "weekday" parser. You can modify parser to match whatever language you are using.</li>
<li>The "Year" column is just using the included two digit year parser: <li>The "Month" column uses the included "month" parser. You can also modify the month names within the parser to match whatever language you are using.</li>
<ul> <li>The "Year" column is just using the included two digit year parser:
<li>Formats for "mmddyy", "ddmmyy" and "yymmdd" are available</li> <ul>
<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>Formats for "mmddyy", "ddmmyy" and "yymmdd" are available</li>
<li>So if the current year is <code>2020</code>, and the listed two digit year is <code>80</code> (<code>2080 - 2020 &gt; 50</code>), it becomes <code>1980</code>.</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>If the listed two digit year is <code>50</code> (<code>2050 - 2020 &lt; 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 &gt; 50</code>), it becomes <code>1980</code>.</li>
<li>Try out the two digit year calculator below the table.</li> <li>If the listed two digit year is <code>50</code> (<code>2050 - 2020 &lt; 50</code>), then it becomes <code>2050</code>. I hope that makes it clearer.</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> <li>Try out the two digit year calculator below the table.</li>
</ul> <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>
</li> </ul>
<li>The "Time" column is using the built-in time parser which has been always been included with tablesorter .</li> </li>
</ul> <li>The "Time" column is using the built-in time parser which has been always been included with tablesorter .</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -224,4 +224,3 @@ $(function(){
</body> </body>
</html> </html>

3
docs/example-parsers-duration.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter - Duration &amp; countdown parsers</title> <title>jQuery tablesorter - Duration &amp; countdown parsers</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -160,5 +160,6 @@
}); });
</script> </script>
</div>
</body> </body>
</html> </html>

15
docs/example-parsers-feet-inch-fraction.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Feet-inch-fraction parser</title> <title>jQuery tablesorter 2.0 - Feet-inch-fraction parser</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -62,7 +62,7 @@
<tr><td>5'</td><td>3&frac14;</td></tr> <tr><td>5'</td><td>3&frac14;</td></tr>
<tr><td>3"</td><td>5 &frac12;</td></tr> <tr><td>3"</td><td>5 &frac12;</td></tr>
<tr><td>&frac12;"</td><td>2&frac34;</td></tr> <tr><td>&frac12;"</td><td>2&frac34;</td></tr>
<tr><td>5' 11"</td><td>&frac34;</td></tr> <tr><td>5' 11"</td><td>&frac34;</td></tr>
<tr><td>10' 11"</td><td>&#x215b;</td></tr> <tr><td>10' 11"</td><td>&#x215b;</td></tr>
<tr><td>10' 1"</td><td>5/6</td></tr> <tr><td>10' 1"</td><td>5/6</td></tr>
@ -73,21 +73,21 @@
<tr><td>5' 3/4"</td><td>2&#x215e;</td></tr> <tr><td>5' 3/4"</td><td>2&#x215e;</td></tr>
<tr><td>5' 5/8"</td><td>3 &frac34;</td></tr> <tr><td>5' 5/8"</td><td>3 &frac34;</td></tr>
<tr><td>5' 3 1/2"</td><td>3 &#x215b;</td></tr> <tr><td>5' 3 1/2"</td><td>3 &#x215b;</td></tr>
<tr><td>10' 3&#8539;"</td><td>3/7</td></tr> <tr><td>10' 3&#8539;"</td><td>3/7</td></tr>
<tr><td>10' 2&#8540;"</td><td>3&#x215c;</td></tr> <tr><td>10' 2&#8540;"</td><td>3&#x215c;</td></tr>
<tr><td>10' 3&#8541;"</td><td>3 &frac12;</td></tr> <tr><td>10' 3&#8541;"</td><td>3 &frac12;</td></tr>
<tr><td>10' 2&#8542;"</td><td>3 &#x215d;</td></tr> <tr><td>10' 2&#8542;"</td><td>3 &#x215d;</td></tr>
<tr><td>5' 3&frac14;"</td><td>2&#x215d;</td></tr> <tr><td>5' 3&frac14;"</td><td>2&#x215d;</td></tr>
<tr><td>5 ' 2 &frac12; "</td><td>2/3</td></tr> <tr><td>5 ' 2 &frac12; "</td><td>2/3</td></tr>
<tr><td>10' 2&frac34;"</td><td>5 &#x215d;</td></tr> <tr><td>10' 2&frac34;"</td><td>5 &#x215d;</td></tr>
<tr><td>5' 2 &frac12;"</td><td>5 &#x215c;</td></tr> <tr><td>5' 2 &frac12;"</td><td>5 &#x215c;</td></tr>
<tr><td>5' 2.5"</td><td>5/16</td></tr> <tr><td>5' 2.5"</td><td>5/16</td></tr>
<tr><td>5' 2 1/2"</td><td>2 3/5</td></tr> <tr><td>5' 2 1/2"</td><td>2 3/5</td></tr>
<tr><td> 10 ' 1 "</td><td>3</td></tr> <tr><td> 10 ' 1 "</td><td>3</td></tr>
</tbody> </tbody>
</table> </table>
@ -125,4 +125,3 @@ $(function(){
</body> </body>
</html> </html>

4
docs/example-parsers-file-type.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - File Type Parser</title> <title>jQuery tablesorter 2.0 - File Type Parser</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

28
docs/example-parsers-globalize.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Parsers Globalize</title> <title>jQuery tablesorter 2.0 - Parsers Globalize</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -255,18 +255,18 @@ var data = {
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In <span class="version updated">v2.24.1</span>, <ul>
<ul> <li>In <span class="version updated">v2.24.1</span>,
<li>An internal change made it necessary to change the <code>lang</code> option to only hold a string of the set language.</li> <ul>
<li>To cache the Globalize object, save it as a <code>Globalize</code> option (see code example below).</li> <li>An internal change made it necessary to change the <code>lang</code> option to only hold a string of the set language.</li>
</ul> <li>To cache the Globalize object, save it as a <code>Globalize</code> option (see code example below).</li>
</li> </ul>
<li><a href="https://github.com/jquery/globalize">jQuery Globalize</a> supports the parsing of locale specific data, including <a href="https://github.com/jquery/globalize/blob/master/doc/api/number/number-parser.md">numerous number formats</a> (including Arabic, Chinese &amp; Japanese) and <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-parser.md">custom date formats</a>.</li> </li>
<li>This is a very basic example using English only. For another example, see the <a href="example-parsers-dates.html">weekday &amp; month parsers</a>.</li> <li><a href="https://github.com/jquery/globalize">jQuery Globalize</a> supports the parsing of locale specific data, including <a href="https://github.com/jquery/globalize/blob/master/doc/api/number/number-parser.md">numerous number formats</a> (including Arabic, Chinese &amp; Japanese) and <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-parser.md">custom date formats</a>.</li>
<li>For more details on how to set up Globalize, see the <a href="example-widget-grouping.html#globalization">Grouping widget documentation about Globalization</a>.</li> <li>This is a very basic example using English only. For another example, see the <a href="example-parsers-dates.html">weekday &amp; month parsers</a>.</li>
</ul> <li>For more details on how to set up Globalize, see the <a href="example-widget-grouping.html#globalization">Grouping widget documentation about Globalization</a>.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column <div id="demo"><button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column

2
docs/example-parsers-ignore-articles.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Ignore leading articles parser</title> <title>jQuery tablesorter 2.0 - Ignore leading articles parser</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

47
docs/example-parsers-ip-address.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - IP address parsers</title> <title>jQuery tablesorter 2.0 - IP address parsers</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -46,29 +46,30 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>This parser can be applied to the original plugin.</li> <ul>
<li>The default "ipAdress" parser (IPv4) is included with the original tablesorter; it was moved to the <code>parser-network.js</code> file in <span class="version">v2.18.0</span>.</li> <li>This parser can be applied to the original plugin.</li>
<li>A parser for IPv6 was added in <span class="version">v2.12</span> and named "ipv6Address": <li>The default "ipAdress" parser (IPv4) is included with the original tablesorter; it was moved to the <code>parser-network.js</code> file in <span class="version">v2.18.0</span>.</li>
<ul> <li>A parser for IPv6 was added in <span class="version">v2.12</span> and named "ipv6Address":
<li>Unlike some other custom parsers, this one will auto-detect &amp; check for a valid IPv6 address since the same address can be represented in many different ways. Some examples are shown in the demo table below.</li> <ul>
<li>IPv6 addresses are stored in the cache in their canonical decimal form, without the colons, for faster &amp; easier numerical sorting.</li> <li>Unlike some other custom parsers, this one will auto-detect &amp; check for a valid IPv6 address since the same address can be represented in many different ways. Some examples are shown in the demo table below.</li>
<li><a href="../test.html">Extensive unit tests</a> are included with this parser.</li> <li>IPv6 addresses are stored in the cache in their canonical decimal form, without the colons, for faster &amp; easier numerical sorting.</li>
</ul> <li><a href="../test.html">Extensive unit tests</a> are included with this parser.</li>
</li> </ul>
<li>If the parser doesn't auto-detect which column has IPv6 addresses, use the headers sorter option to set it: </li>
<pre class="prettyprint lang-javascript">$(function(){ <li>If the parser doesn't auto-detect which column has IPv6 addresses, use the headers sorter option to set it:
$('table').tablesorter({ <pre class="prettyprint lang-javascript">$(function(){
headers: { $('table').tablesorter({
1: { sorter: 'MAC' }, headers: {
// 2: { sorter: 'ipAddress' }, this parser is auto-detected 1: { sorter: 'MAC' },
3: { sorter: 'ipv6Address' } // 2: { sorter: 'ipAddress' }, this parser is auto-detected
} 3: { sorter: 'ipv6Address' }
}); }
});
});</pre> });</pre>
</li> </li>
</ul> </ul>
<p>
<h1>Demo</h1> <h1>Demo</h1>
<button type="button" class="toggleparsedvalue">Toggle parsed values</button> <button type="button" class="toggleparsedvalue">Toggle parsed values</button>

7
docs/example-parsers-jquery-data.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Disable or set the column parser using data</title> <title>jQuery tablesorter 2.0 - Disable or set the column parser using data</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -38,7 +38,7 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> This functionality was added in version 2.2.3 (it is not part of the original plugin). <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> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
@ -122,4 +122,3 @@
</body> </body>
</html> </html>

55
docs/example-parsers-metric.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter - Metric Parser</title> <title>jQuery tablesorter - Metric Parser</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -42,31 +42,31 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In <span class="version update">v2.22.2</span>, <ul>
<ul> <li>In <span class="version update">v2.22.2</span>,
<li>Added header data-attribute <code>data-metric-name-full</code> which will contain the full base unit name, e.g. <code>"byte|Byte|BYTE"</code>. This change should allow for different capitalizations of the base unit name.</li> <ul>
<li>Added header data-attribute <code>data-metric-name-abbr</code> which will contain the abbreviated base unit name, e.g. <code>"b|B"</code>. This change also should allow for different capitalizations of the base unit name.</li> <li>Added header data-attribute <code>data-metric-name-full</code> which will contain the full base unit name, e.g. <code>"byte|Byte|BYTE"</code>. This change should allow for different capitalizations of the base unit name.</li>
<li>Each name is separated by a pipe, or vertical bar, ("<code>|</code>") without spaces, because it will eventually be used in a regular expression - the vertical bar signifies an "OR" operator.</li> <li>Added header data-attribute <code>data-metric-name-abbr</code> which will contain the abbreviated base unit name, e.g. <code>"b|B"</code>. This change also should allow for different capitalizations of the base unit name.</li>
<li>When using these new data-attributes, the value in <code>data-metric-name</code> (now deprecated) will be ignored; eventually <code>data-metric-name</code> support will be removed.</li> <li>Each name is separated by a pipe, or vertical bar, ("<code>|</code>") without spaces, because it will eventually be used in a regular expression - the vertical bar signifies an "OR" operator.</li>
<li>These additions were made because of <em>common misuse</em> of abbreviated capitalization in the metric units, i.e. "kB" versus "kb". The lower case "b" is for "bit", and upper case "B" is for "byte". I am guilty of this too!</li> <li>When using these new data-attributes, the value in <code>data-metric-name</code> (now deprecated) will be ignored; eventually <code>data-metric-name</code> support will be removed.</li>
</ul> <li>These additions were made because of <em>common misuse</em> of abbreviated capitalization in the metric units, i.e. "kB" versus "kb". The lower case "b" is for "bit", and upper case "B" is for "byte". I am guilty of this too!</li>
</li> </ul>
<li>This parser will convert numbers with metric prefixes ("Mega", "Giga", etc) into appropriate values so they are sorted correctly.</li> </li>
<li>The base name must be included in the header: <li>This parser will convert numbers with metric prefixes ("Mega", "Giga", etc) into appropriate values so they are sorted correctly.</li>
<ul> <li>The base name must be included in the header:
<li>The base is the unit of measure, such as "byte", "meter", "liter", etc.</li> <ul>
<li><span class="label alert">deprecated</span> When saving the base, include both the abbreviation and full name of the base separated by a vertical bar (shift-\) <code>b|byte</code>.</li> <li>The base is the unit of measure, such as "byte", "meter", "liter", etc.</li>
<li><span class="label alert">deprecated</span> Store this information within the header's data-attribute (<code>data-metric-name="b|byte"</code>) - this data-attribute should be considered deprecated as of v2.22.2, use <code>data-metric-name-full</code> &amp; <code>data-metric-name-abbr</code> instead.</li> <li><span class="label alert">deprecated</span> When saving the base, include both the abbreviation and full name of the base separated by a vertical bar (shift-\) <code>b|byte</code>.</li>
<li>If no base information is found, it will default to <code>m|meter</code>.</li> <li><span class="label alert">deprecated</span> Store this information within the header's data-attribute (<code>data-metric-name="b|byte"</code>) - this data-attribute should be considered deprecated as of v2.22.2, use <code>data-metric-name-full</code> &amp; <code>data-metric-name-abbr</code> instead.</li>
</ul> <li>If no base information is found, it will default to <code>m|meter</code>.</li>
</li> </ul>
<li>Because metric prefixes can be applied to binary values, the parser will calculate the cached value based on the binary multiple, i.e. <code>"1 kB"</code> is actually <code>"1024 bytes"</code>. See <a href="http://en.wikipedia.org/wiki/Unit_prefix#Binary_prefixes">this article</a> for more details.</li> </li>
<li>This parser does not (yet) support the IEC recommendations for binary prefixes (i.e. "kibibyte (KiB)", "mebibyte (MiB)", etc).</li> <li>Because metric prefixes can be applied to binary values, the parser will calculate the cached value based on the binary multiple, i.e. <code>"1 kB"</code> is actually <code>"1024 bytes"</code>. See <a href="http://en.wikipedia.org/wiki/Unit_prefix#Binary_prefixes">this article</a> for more details.</li>
<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 parser does not (yet) support the IEC recommendations for binary prefixes (i.e. "kibibyte (KiB)", "mebibyte (MiB)", etc).</li>
<li>This demo includes the stored metric values within the table cells, toggle the view using the button below.</li> <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>
</ul> <li>This demo includes the stored metric values within the table cells, toggle the view using the button below.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<button type="button" class="toggleparsedvalue">Toggle parsed values</button> <button type="button" class="toggleparsedvalue">Toggle parsed values</button>
@ -132,4 +132,3 @@ $(function(){
</body> </body>
</html> </html>

33
docs/example-parsers-named-numbers.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter - Named Numbers Parser</title> <title>jQuery tablesorter - Named Numbers Parser</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -42,20 +42,20 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In <span class="version updated">v2.22.0</span>, this parser will now ignore commas, periods and quotes adjacent to the named number word (e.g. "10 million, three...").</li> <ul>
<li>This parser will convert named numbers into appropriate values so they are sorted correctly.</li> <li>In <span class="version updated">v2.22.0</span>, this parser will now ignore commas, periods and quotes adjacent to the named number word (e.g. "10 million, three...").</li>
<li>Named numbers include values: <li>This parser will convert named numbers into appropriate values so they are sorted correctly.</li>
<ul> <li>Named numbers include values:
<li>zero to twenty; by one ("one", "two", "three", ..., "nineteen", "twenty")</li> <ul>
<li>twenty to hundred; by ten ("twenty", "thirty", "forty", ... "ninety", "hundred")</li> <li>zero to twenty; by one ("one", "two", "three", ..., "nineteen", "twenty")</li>
<li>thousand (1e3) to duotrigintillion (1e99); by 10^(3n+3) value ("thousand", "million", "billion", ... "untrigintillion", "duotrigintillion")</li> <li>twenty to hundred; by ten ("twenty", "thirty", "forty", ... "ninety", "hundred")</li>
<li>googl (1e100)</li> <li>thousand (1e3) to duotrigintillion (1e99); by 10^(3n+3) value ("thousand", "million", "billion", ... "untrigintillion", "duotrigintillion")</li>
</ul> <li>googl (1e100)</li>
</li> </ul>
<li>Even bigger named values will need to be manually added to the parser code; see <a href="http://en.wikipedia.org/wiki/Names_of_large_numbers">this wikipedia page</a> for more names.</li> </li>
</ul> <li>Even bigger named values will need to be manually added to the parser code; see <a href="http://en.wikipedia.org/wiki/Names_of_large_numbers">this wikipedia page</a> for more names.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<button type="button" class="toggleparsedvalue">Toggle parsed values</button> <button type="button" class="toggleparsedvalue">Toggle parsed values</button>
@ -154,4 +154,3 @@ $(function(){
</body> </body>
</html> </html>

10
docs/example-parsers-roman.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Roman Numeral Parser</title> <title>jQuery tablesorter 2.0 - Roman Numeral Parser</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -203,7 +203,8 @@
<tr><td>IX</td><td>DCCLVII</td><td>lig</td><td>Mod L</td><td>2008 XXIX Beijing</td></tr> <tr><td>IX</td><td>DCCLVII</td><td>lig</td><td>Mod L</td><td>2008 XXIX Beijing</td></tr>
</tbody> </tbody>
</table></div> </table></div>
<small>* Ignoring the last letter (set number to ignore in <code>roman_ignore</code> option array; notice that "vi b" sorts before "via" - <strong>spaces do matter</strong>!)</small><p> <small>* Ignoring the last letter (set number to ignore in <code>roman_ignore</code> option array; notice that "vi b" sorts before "via" - <strong>spaces do matter</strong>!)</small>
<p></p>
<h1>Page Header</h1> <h1>Page Header</h1>
<div> <div>
@ -226,8 +227,6 @@
<pre class="prettyprint lang-html"></pre> <pre class="prettyprint lang-html"></pre>
</div> </div>
</div>
<script> <script>
$(function(){ $(function(){
// add parsed values to order & value column // add parsed values to order & value column
@ -235,5 +234,6 @@ $(function(){
}); });
</script> </script>
</div>
</body> </body>
</html> </html>

77
docs/example-parsers.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Writing custom parsers</title> <title>jQuery tablesorter 2.0 - Writing custom parsers</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -58,42 +58,42 @@ $(function() {
<div id="main"> <div id="main">
<div class="tip"> <p class="tip">
Notes about the <code>addParser</code> template: Notes about the <code>addParser</code> template:
<ul> </p>
<li>The <code>id</code> block is required and must be unique.</li> <ul>
<li>The <code>is</code> block will allow the parser to be used for autodetecting the parser <li>The <code>id</code> block is required and must be unique.</li>
<ul> <li>The <code>is</code> block will allow the parser to be used for autodetecting the parser
<li>Most custom parsers are made for a specific set of data/column, so the <code>is</code> block usually just returns false telling the plugin that the parser doesn't match any columns.</li> <ul>
<li>If so desired, the function provides four parameters: <code>s</code> contains the text from the cell, <code>table</code> is the table DOM element, <code>cell</code> is the current cell DOM element and <code>$cell</code> is the current cell as a jQuery object (added <span class="version">v2.18.0</span>).</li> <li>Most custom parsers are made for a specific set of data/column, so the <code>is</code> block usually just returns false telling the plugin that the parser doesn't match any columns.</li>
<li>This function must <code>return true</code> before the plugin will use the custom parser's format block to process the column content.</li> <li>If so desired, the function provides four parameters: <code>s</code> contains the text from the cell, <code>table</code> is the table DOM element, <code>cell</code> is the current cell DOM element and <code>$cell</code> is the current cell as a jQuery object (added <span class="version">v2.18.0</span>).</li>
<li>In version 2.7.4, the <code>is</code> block became optional because most parsers just return false.</li> <li>This function must <code>return true</code> before the plugin will use the custom parser's format block to process the column content.</li>
</ul> <li>In version 2.7.4, the <code>is</code> block became optional because most parsers just return false.</li>
</li> </ul>
<li>The <code>format</code> block is used to normalize your data and return it to the plugin for sorting </li>
<ul> <li>The <code>format</code> block is used to normalize your data and return it to the plugin for sorting
<li>Within this function, modify the given text from the cell (<code>s</code>) or obtain parameters and/or other data from the cell (<code>cell</code>) then return this data to the plugin.</li> <ul>
<li>As an example, the date parser takes the date string (e.g. <code>"12/25/2013"</code>) and converts it into a numeric value (<code>1387951200000</code>; <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/getTime">ref</a>) to make sorting and comparing dates easier.</li> <li>Within this function, modify the given text from the cell (<code>s</code>) or obtain parameters and/or other data from the cell (<code>cell</code>) then return this data to the plugin.</li>
<li>Use the <code>cellIndex</code> if the cells within columns contain different data - see this <a href="example-parsers-advanced.html">demo</a> for an example.</li> <li>As an example, the date parser takes the date string (e.g. <code>"12/25/2013"</code>) and converts it into a numeric value (<code>1387951200000</code>; <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/getTime">ref</a>) to make sorting and comparing dates easier.</li>
</ul> <li>Use the <code>cellIndex</code> if the cells within columns contain different data - see this <a href="example-parsers-advanced.html">demo</a> for an example.</li>
</li> </ul>
<li>The <code>parsed</code> block (added <span class="version">v2.15.0</span>) </li>
<ul> <li>The <code>parsed</code> block (added <span class="version">v2.15.0</span>)
<li>This parameter is a flag used by the filter widget.</li> <ul>
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li> <li>This parameter is a flag used by the filter widget.</li>
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li> <li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
<li>Currently, only the parsers for inputs, checkboxes and selects have this parameter set to <code>true</code>.</li> <li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
</ul> <li>Currently, only the parsers for inputs, checkboxes and selects have this parameter set to <code>true</code>.</li>
</li> </ul>
<li>The <code>type</code> block sets the type of sort to use: </li>
<ul> <li>The <code>type</code> block sets the type of sort to use:
<li>Set it to either <code>"text"</code> or <code>"numeric"</code>.</li> <ul>
<li>This tells the plugin the type of sorter to use.</li> <li>Set it to either <code>"text"</code> or <code>"numeric"</code>.</li>
<li>Text type sorting uses a natural sort and is a tiny bit slower than a pure numeric sort.</li> <li>This tells the plugin the type of sorter to use.</li>
</ul> <li>Text type sorting uses a natural sort and is a tiny bit slower than a pure numeric sort.</li>
</li> </ul>
</ul> </li>
</div> </ul>
<h3>Add Parser Template</h3> <h3>Add Parser Template</h3>
<pre class="prettyprint lang-javascript">$.tablesorter.addParser({ <pre class="prettyprint lang-javascript">$.tablesorter.addParser({
@ -154,7 +154,7 @@ $(function() {
<h1>HTML</h1> <h1>HTML</h1>
<p class="tip"> <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). <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"> <div id="html">
<pre class="prettyprint lang-html"></pre> <pre class="prettyprint lang-html"></pre>
</div> </div>
@ -168,4 +168,3 @@ $(function() {
</body> </body>
</html> </html>

16
docs/example-trigger-sort.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Sort table using a link outside the table</title> <title>jQuery tablesorter 2.0 - Sort table using a link outside the table</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -100,12 +100,12 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In <span class="version">v2.22.0</span>, a "click" event can be triggered on the header cell to toggle the sort.</li> <ul>
<li>In <span class="version">v2.17.0</span>, added sorton values (a)scending, (d)escending, (n)ext, (s)ame &amp; (o)pposite. Use the demo below help understand how to use these settings.</li> <li>In <span class="version">v2.22.0</span>, a "click" event can be triggered on the header cell to toggle the sort.</li>
<li>In v2.9, a "sort" event can be triggered on the header cell to toggle the sort.</li> <li>In <span class="version">v2.17.0</span>, added sorton values (a)scending, (d)escending, (n)ext, (s)ame &amp; (o)pposite. Use the demo below help understand how to use these settings.</li>
</ul> <li>In v2.9, a "sort" event can be triggered on the header cell to toggle the sort.</li>
<p> </ul>
<div id="demo"> <div id="demo">

5
docs/example-triggers.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Triggers sortStart and sortEnd</title> <title>jQuery tablesorter 2.0 - Triggers sortStart and sortEnd</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -1108,4 +1108,3 @@
</body> </body>
</html> </html>

16
docs/example-update-all.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Update headers &amp; table body (updateAll)</title> <title>jQuery tablesorter 2.0 - Update headers &amp; table body (updateAll)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -63,12 +63,12 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>This demo uses the <code>updateAll</code> method (<span class="version">v2.8</span>).</li> <ul>
<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>This demo uses the <code>updateAll</code> method (<span class="version">v2.8</span>).</li>
<li>The <code>update</code> method only updates the cache from the <code>tbody</code>.</li> <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>
</ul> <li>The <code>update</code> method only updates the cache from the <code>tbody</code>.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">

16
docs/example-update-cell.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Updating a table cell</title> <title>jQuery tablesorter 2.0 - Updating a table cell</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -55,12 +55,12 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Click on any value in the Total column to change it to a random amount.</li> <ul>
<li>This option is part of the original plugin.</li> <li>Click on any value in the Total column to change it to a random amount.</li>
<li>Automatic resorting after "updateCell" is triggered was added in version 2.0.14.</li> <li>This option is part of the original plugin.</li>
</ul> <li>Automatic resorting after "updateCell" is triggered was added in version 2.0.14.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">

5
docs/example-widget-align-character.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Align Character Widget</title> <title>jQuery tablesorter 2.0 - Align Character Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -452,4 +452,3 @@ $(function(){
</body> </body>
</html> </html>

15
docs/example-widget-bootstrap-theme-v2.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (Bootstrap v2.x)</title> <title>jQuery tablesorter 2.0 - jQuery UITheme Widget (Bootstrap v2.x)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-1.4.4.min.js"></script> <script src="js/jquery-1.4.4.min.js"></script>
@ -148,12 +148,12 @@
<p class="tip"> <p class="tip">
<span class="label label-info">NOTE!</span> <span class="label label-info">NOTE!</span>
<ul> </p>
<li>This demo uses <a href="http://getbootstrap.com/2.3.2/">Bootstrap v2.x</a> (v2.3.2 specifically).</li> <ul>
<li>Hover over the thick grey bar under the header to reveal the filter row.</li> <li>This demo uses <a href="http://getbootstrap.com/2.3.2/">Bootstrap v2.x</a> (v2.3.2 specifically).</li>
<li>For more information like revision history of this theme &amp; why there is a button to enable/disable the zebra widget, please see the <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x demo</a>.</li> <li>Hover over the thick grey bar under the header to reveal the filter row.</li>
</ul> <li>For more information like revision history of this theme &amp; why there is a button to enable/disable the zebra widget, please see the <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x demo</a>.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters --> <!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
@ -292,4 +292,3 @@
</body> </body>
</html> </html>

77
docs/example-widget-bootstrap-theme.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (Bootstrap v3.x)</title> <title>jQuery tablesorter 2.0 - jQuery UITheme Widget (Bootstrap v3.x)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-1.4.4.min.js"></script> <script src="js/jquery-1.4.4.min.js"></script>
@ -151,43 +151,43 @@
<p class="tip"> <p class="tip">
<span class="label label-info">NOTE!</span> <span class="label label-info">NOTE!</span>
<ul> </p>
<li><span class="label label-success">New!</span>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions. <ul>
<ul> <li><span class="label label-success">New!</span>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
<li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</li> <ul>
<li>Just use the appropriate icon class name (<code>icon-{name}</code> for Bootstrap v2, and <code>glyphicon glyphicon-{name}</code> for Bootstrap v3.</li> <li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</li>
<li>And of course include the necessary Bootstrap image or font).</li> <li>Just use the appropriate icon class name (<code>icon-{name}</code> for Bootstrap v2, and <code>glyphicon glyphicon-{name}</code> for Bootstrap v3.</li>
<li>Wrapped all of the <code>pager</code> controls in the tfoot within a div (don't use the class name <code>pager</code> as it adds a lot of padding) to keep the controls from being centered.</li> <li>And of course include the necessary Bootstrap image or font).</li>
<li>Pager control buttons in the tfoot have class names needed for both Bootstrap v2+ and v3, so there's no need for you to use both, just use the ones you need.</li> <li>Wrapped all of the <code>pager</code> controls in the tfoot within a div (don't use the class name <code>pager</code> as it adds a lot of padding) to keep the controls from being centered.</li>
</ul> <li>Pager control buttons in the tfoot have class names needed for both Bootstrap v2+ and v3, so there's no need for you to use both, just use the ones you need.</li>
</li> </ul>
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li> </li>
<li>Make sure to include the <code>{icon}</code> in the <code>headerTemplate</code> to add a sorting arrow to the headers.</li> <li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
<li>Added in v2.7! <li>Make sure to include the <code>{icon}</code> in the <code>headerTemplate</code> to add a sorting arrow to the headers.</li>
<ul> <li>Added in v2.7!
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code.</li> <ul>
<li>Setting <code>theme</code> option to <code>"Bootstrap"</code> will now override/ignore the <code>uitheme</code> value in the <code>widgetOptions</code>.</li> <li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code.</li>
</ul> <li>Setting <code>theme</code> option to <code>"Bootstrap"</code> will now override/ignore the <code>uitheme</code> value in the <code>widgetOptions</code>.</li>
</li> </ul>
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use: </li>
<ul> <li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the Bootstrap theme saved to <code>$.tablesorter.themes.bootstrap</code>.</li> <ul>
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li> <li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the Bootstrap theme saved to <code>$.tablesorter.themes.bootstrap</code>.</li>
<li>Set the <del><code>uitheme</code> widget</del> <code>theme</code> option (changed in v2.7) to <code>"bootstrap"</code> to set the widget to use the Bootstrap theme. See the <a href="example-widget-ui-theme.html">jQuery UI demo</a> for another example.</li> <li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
</ul> <li>Set the <del><code>uitheme</code> widget</del> <code>theme</code> option (changed in v2.7) to <code>"bootstrap"</code> to set the widget to use the Bootstrap theme. See the <a href="example-widget-ui-theme.html">jQuery UI demo</a> for another example.</li>
</li> </ul>
<li>This demo shows how to get around an issue with the filter widget: </li>
<ul> <li>This demo shows how to get around an issue with the filter widget:
<li>The <span class="label label-info">zebra widget button</span> below was added to show that when bootstrap's "table-striped" class is applied, the css defined zebra striping will not apply correctly because table rows are hidden but still accounted for by the css <code>nth-child()</code> selector.</li> <ul>
<li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="button" class="filter btn btn-small btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li> <li>The <span class="label label-info">zebra widget button</span> below was added to show that when bootstrap's "table-striped" class is applied, the css defined zebra striping will not apply correctly because table rows are hidden but still accounted for by the css <code>nth-child()</code> selector.</li>
<li>Try other filter searches with the zebra widget disabled, like <button type="button" class="filter btn btn-small btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter "male"</button> in the "Sex" column.</li> <li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="button" class="filter btn btn-small btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
<li>To solve this issue, just enable the zebra widget and the "even" and "odd" row class names <del>will</del> should over-ride the <code>nth-child()</code> styling.<br><span class="label label-warning">NOTE!</span> This doesn't seem to work in the latest Bootstrap version, so you'll have to remove the "table-striped" class completely from the table.</li> <li>Try other filter searches with the zebra widget disabled, like <button type="button" class="filter btn btn-small btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter "male"</button> in the "Sex" column.</li>
<li>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li> <li>To solve this issue, just enable the zebra widget and the "even" and "odd" row class names <del>will</del> should over-ride the <code>nth-child()</code> styling.<br><span class="label label-warning">NOTE!</span> This doesn't seem to work in the latest Bootstrap version, so you'll have to remove the "table-striped" class completely from the table.</li>
</ul> <li>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li>
</li> </ul>
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li> </li>
</ul> <li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters --> <!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
@ -326,4 +326,3 @@
</body> </body>
</html> </html>

2
docs/example-widget-build-table.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>jQuery plugin: Tablesorter 2.0 - Build Table Widget</title> <title>jQuery tablesorter 2.0 - Build Table Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

5
docs/example-widget-chart.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Chart Widget</title> <title>jQuery tablesorter 2.0 - Chart Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -701,4 +701,3 @@ $(function(){
</body> </body>
</html> </html>

7
docs/example-widget-column-selector.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Column Selector Widget</title> <title>jQuery tablesorter 2.0 - Column Selector Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -512,7 +512,7 @@ $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );<
</div> </div>
</div> </div>
<p> <p></p>
<h1>Demo</h1> <h1>Demo</h1>
@ -692,4 +692,3 @@ $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );<
</body> </body>
</html> </html>

21
docs/example-widget-columns.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Columns Style Widget</title> <title>jQuery tablesorter 2.0 - Columns Style Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-1.2.6.min.js"></script> <script src="js/jquery-1.2.6.min.js"></script>
@ -82,14 +82,14 @@ $(function() {
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li> <ul>
<li>Older versions of this widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li> <li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
<li>The original "widgetColumns" option has been replaced by "widgetOptions.columns". See the javascript block below for more details (v2.1).</li> <li>Older versions of this widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</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> <li>The original "widgetColumns" option has been replaced by "widgetOptions.columns". See the javascript block below for more details (v2.1).</li>
<li>This demo page is running jQuery v1.2.6.</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> <li>This demo page is running jQuery v1.2.6.</li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
Choose Theme: Choose Theme:
@ -224,4 +224,3 @@ table.tablesorter-blue tr.even td.tertiary {
</body> </body>
</html> </html>

5
docs/example-widget-css-sticky-header.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - CSS Sticky Header Widget</title> <title>jQuery tablesorter 2.0 - CSS Sticky Header Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -217,7 +217,7 @@ $(function() {
</div> </div>
</div> </div>
<p> <p></p>
<h1>CSS</h1> <h1>CSS</h1>
<div id="css"> <div id="css">
@ -534,4 +534,3 @@ $(function() {
</body> </body>
</html> </html>

5
docs/example-widget-editable.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Content Editable</title> <title>jQuery tablesorter 2.0 - Content Editable</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -597,4 +597,3 @@ $(function() {
</body> </body>
</html> </html>

2
docs/example-widget-filter-any-match.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget External Search</title> <title>jQuery tablesorter 2.0 - Filter Widget External Search</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

26
docs/example-widget-filter-childrows.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Filter widget with child rows (+ Grouping)</title> <title>jQuery tablesorter 2.0 - Filter widget with child rows (+ Grouping)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -129,18 +129,18 @@ tr.group-header.collapsed td i {
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>Added <code>filter_childWithSibs</code> in <span class="version">v2.23.4</span>, to see what it does: <ul>
<ul> <li>Added <code>filter_childWithSibs</code> in <span class="version">v2.23.4</span>, to see what it does:
<li>Search the "Stock" (<button class="search" type="button" data-column="2">11%</button>) or "Price" (<button class="search" type="button" data-column="3">&lt;$10</button>) column.</li> <ul>
<li>Use the "Toggle" button to change the setting.</li> <li>Search the "Stock" (<button class="search" type="button" data-column="2">11%</button>) or "Price" (<button class="search" type="button" data-column="3">&lt;$10</button>) column.</li>
<li>When <code>filter_childWithSibs</code> is <code>false</code>, only the child rows that match the filter are visible.</li> <li>Use the "Toggle" button to change the setting.</li>
<li>When it is <code>true</code>, all sibling child rows will be visible.</li> <li>When <code>filter_childWithSibs</code> is <code>false</code>, only the child rows that match the filter are visible.</li>
<li>The parent row will always be visible.</li> <li>When it is <code>true</code>, all sibling child rows will be visible.</li>
</ul> <li>The parent row will always be visible.</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>
<p></p> <p></p>

3
docs/example-widget-filter-custom-search.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Search Types</title> <title>jQuery tablesorter 2.0 - Custom Filter Widget Search Types</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -295,4 +295,3 @@ $.extend($.tablesorter.language, {
</body> </body>
</html> </html>

2
docs/example-widget-filter-custom-search2.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Search Type (example 2)</title> <title>jQuery tablesorter 2.0 - Custom Filter Widget Search Type (example 2)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

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

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Functions</title> <title>jQuery tablesorter 2.0 - Custom Filter Widget Functions</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -483,4 +483,3 @@
</body> </body>
</html> </html>

2
docs/example-widget-filter-external-inputs.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget External Inputs</title> <title>jQuery tablesorter 2.0 - Filter Widget External Inputs</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

3
docs/example-widget-filter-formatter-1.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (jQuery UI widgets)</title> <title>jQuery tablesorter 2.0 - Custom Filter Widget Formatter (jQuery UI widgets)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -635,4 +635,3 @@
</body> </body>
</html> </html>

2
docs/example-widget-filter-formatter-2.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (HTML5 Elements)</title> <title>jQuery tablesorter 2.0 - Custom Filter Widget Formatter (HTML5 Elements)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

4
docs/example-widget-filter-formatter-select2.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Filter Formatter: select2 (beta)</title> <title>jQuery tablesorter 2.0 - Filter Formatter: select2 (beta)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -170,7 +170,7 @@
</div> </div>
</div> </div>
<p> <p></p>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><button class="reset">Reset Search</button> <div id="demo"><button class="reset">Reset Search</button>

23
docs/example-widget-filter-selectmenu.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget + jQuery UI Selectmenu</title> <title>jQuery tablesorter 2.0 - Filter Widget + jQuery UI Selectmenu</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -95,16 +95,17 @@
<div id="main"> <div id="main">
<p class="tip"> <p class="tip">
<ul> <em>NOTE!</em>
<li>Demo added <span class="version">v2.24.4</span>, to demonstrate how to use <a href="http://jqueryui.com/selectmenu/#custom_render">jQuery UI Selectmenu widget</a> on a filter row select.</li> </p>
<li><span class="label warning">*NOTE*</span> - Selectmenu will not work properly in all circumstances: <ul>
<ul> <li>Demo added <span class="version">v2.24.4</span>, to demonstrate how to use <a href="http://jqueryui.com/selectmenu/#custom_render">jQuery UI Selectmenu widget</a> on a filter row select.</li>
<li>When an "updateAll" method is triggered on the table, the filter row is removed &amp; replaced due to the possibility of a column being added or removed. Selectmenu initialization will need to be performed again.</li> <li><span class="label warning">*NOTE*</span> - Selectmenu will not work properly in all circumstances:
<li>If using selectmenu along with a widget that constantly removes & rebuilds extra table headers &amp; filter rows (e.g. the scroller widget), the selectmenu initialization will need to be performed again, or just avoid using those widgets.</li> <ul>
</ul> <li>When an "updateAll" method is triggered on the table, the filter row is removed &amp; replaced due to the possibility of a column being added or removed. Selectmenu initialization will need to be performed again.</li>
</li> <li>If using selectmenu along with a widget that constantly removes & rebuilds extra table headers &amp; filter rows (e.g. the scroller widget), the selectmenu initialization will need to be performed again, or just avoid using those widgets.</li>
</ul> </ul>
<p> </li>
</ul>
<h1>Demo</h1> <h1>Demo</h1>

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

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget</title> <title>jQuery tablesorter 2.0 - Filter Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -303,7 +303,7 @@ $(function(){
<tr><td class="center">10</td><td class="center">text</td><td>Any text entered in the filter will <strong>match</strong> text found within the column</td><td><code>abc</code> (finds &quot;abc&quot;, &quot;abcd&quot;, &quot;abcde&quot;, etc);<button data-filter-column="1">Aaron</button> (finds &quot;Aaron&quot; and &quot;Philip Aaron Wong&quot;)</td></tr> <tr><td class="center">10</td><td class="center">text</td><td>Any text entered in the filter will <strong>match</strong> text found within the column</td><td><code>abc</code> (finds &quot;abc&quot;, &quot;abcd&quot;, &quot;abcde&quot;, etc);<button data-filter-column="1">Aaron</button> (finds &quot;Aaron&quot; and &quot;Philip Aaron Wong&quot;)</td></tr>
</tbody> </tbody>
</table> </table>
<span class="bright">(1)</span> The filter order (or precendence) of how searches are checked in "priority" (first column) order; so an exact match will override "range" searches </span> (*NOTE* order changed in <span class="version updated">v2.15</span>, operators prioritized before exact; see <a href="https://github.com/Mottie/tablesorter/issues/465">issue #465</a>; order changed again in <span class="version updated">v2.17.1</span> to move "not match" before "exact" and allow for exact not matches; see <a href="https://github.com/Mottie/tablesorter/issues/628">issue #628</a>). In <span class="version updated">v2.22.2</span>, the "or" and "and" types can combine any of the other filter types together.<br> <span class="bright">(1)</span> The filter order (or precendence) of how searches are checked in "priority" (first column) order; so an exact match will override "range" searches (*NOTE* order changed in <span class="version updated">v2.15</span>, operators prioritized before exact; see <a href="https://github.com/Mottie/tablesorter/issues/465">issue #465</a>; order changed again in <span class="version updated">v2.17.1</span> to move "not match" before "exact" and allow for exact not matches; see <a href="https://github.com/Mottie/tablesorter/issues/628">issue #628</a>). In <span class="version updated">v2.22.2</span>, the "or" and "and" types can combine any of the other filter types together.<br>
<span class="bright">(2)</span> Logical "or" comparisons can now show exact matches (by default; <span class="version">v2.10.1</span>) or just match cell contents.<br> <span class="bright">(2)</span> Logical "or" comparisons can now show exact matches (by default; <span class="version">v2.10.1</span>) or just match cell contents.<br>
<span class="bright">(3)</span> In tablesorter <span class="version">v2.10</span>, comparisons can be made in date columns (if properly parsed). <span class="bright">(3)</span> In tablesorter <span class="version">v2.10</span>, comparisons can be made in date columns (if properly parsed).
</li> </li>
@ -381,6 +381,7 @@ $(function(){
<div class="collapsible"> <div class="collapsible">
<br> <br>
The filter cell (<code>&lt;td&gt;</code>) is not to be confused with the <code>filter_cssFilter</code> option which adds an extra class name to the filter inputs (<code>&lt;input&gt;</code>). The filter cell (<code>&lt;td&gt;</code>) is not to be confused with the <code>filter_cssFilter</code> option which adds an extra class name to the filter inputs (<code>&lt;input&gt;</code>).
</div>
</td> </td>
</tr> </tr>
@ -734,11 +735,12 @@ $.extend($.tablesorter.language, {
<li> <li>
<span class="label warning">Warning</span> These language values are added to a regular expression using <code>new RegExp()</code>: <span class="label warning">Warning</span> These language values are added to a regular expression using <code>new RegExp()</code>:
<ul> <ul>
<li>So you will need to escape any special characters contained in these values (e.g. <code>. \ + * ? [ ^ ] $ ( ) { } = ! < > | : -</code>).</li> <li>So you will need to escape any special characters contained in these values (e.g. <code>. \ + * ? [ ^ ] $ ( ) { } = ! &lt; &gt; | : -</code>).</li>
<li>This function might help (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Using_special_characters">ref</a>): <li>This function might help (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Using_special_characters">ref</a>):
<pre class="prettyprint lang-js">function escapeRegExp( string ) { <pre class="prettyprint lang-js">function escapeRegExp( string ) {
return string.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' ); return string.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' );
}</pre></li> }</pre>
</li>
</ul> </ul>
</li> </li>
</ul> </ul>

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

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Formatter Widget</title> <title>jQuery tablesorter 2.0 - Formatter Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -214,7 +214,7 @@ function prettyDate(date){
<tbody> <tbody>
<!-- Added column dates are dynamically updated for this demo --> <!-- Added column dates are dynamically updated for this demo -->
<tr><td>Superman</td><td>Bugatti Veyron</td><td>Duckie</td><td>1/1/2015</td></tr> <tr><td>Superman</td><td>Bugatti Veyron</td><td>Duckie</td><td>1/1/2015</td></tr>
<tr><td>Flash</td><td>Hennessey Venom</td><td>Horse</td><td>12/22/2014</td></td></tr> <tr><td>Flash</td><td>Hennessey Venom</td><td>Horse</td><td>12/22/2014</td></tr>
<tr><td>Batman</td><td>Koenigsegg Agera</td><td>Elephant</td><td>3/10/2010</td></tr> <tr><td>Batman</td><td>Koenigsegg Agera</td><td>Elephant</td><td>3/10/2010</td></tr>
<tr><td>Green Lantern</td><td>SSC Ultimate Aero</td><td>Cow</td><td>5/5/2012</td></tr> <tr><td>Green Lantern</td><td>SSC Ultimate Aero</td><td>Cow</td><td>5/5/2012</td></tr>
<tr><td>Howard the Duck</td><td>Koenigsegg CCX</td><td>Pizza</td><td>1/1/2005</td></tr> <tr><td>Howard the Duck</td><td>Koenigsegg CCX</td><td>Pizza</td><td>1/1/2005</td></tr>

20
docs/example-widget-grouping-filter-childrows.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Grouping + Filter widget with child rows</title> <title>jQuery tablesorter 2.0 - Grouping + Filter widget with child rows</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -115,15 +115,15 @@ tr.group-header.collapsed td i {
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>As of <span class="version updated">v2.15.12</span>, <ul>
<ul> <li>As of <span class="version updated">v2.15.12</span>,
<li>Parents of child rows now have a <code>tablesorter-hasChildRow</code> class name added.</li> <ul>
<li><span class="label label-info">NOTE!</span> A new css definition was added to every default theme; the "filtered" class name (set by the <code>filter_filteredRow</code> widgetOption) has been added to properly hide/show child rows when filtered.</li> <li>Parents of child rows now have a <code>tablesorter-hasChildRow</code> class name added.</li>
</ul> <li><span class="label label-info">NOTE!</span> A new css definition was added to every default theme; the "filtered" class name (set by the <code>filter_filteredRow</code> widgetOption) has been added to properly hide/show child rows when filtered.</li>
</li> </ul>
</ul> </li>
<p> </ul>
<h1>Demo</h1> <h1>Demo</h1>

2
docs/example-widget-grouping.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget</title> <title>jQuery tablesorter 2.0 - Grouping Rows Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

5
docs/example-widget-header-titles.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - headerTitles widget</title> <title>jQuery tablesorter 2.0 - headerTitles widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -318,4 +318,3 @@ headerTitle_output_nosort : 'No sort available'</pre>
</body> </body>
</html> </html>

5
docs/example-widget-lazyload.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Lazyload widget</title> <title>jQuery tablesorter 2.0 - Lazyload widget</title>
<!-- Demo stuff --> <!-- Demo stuff -->
<link rel="stylesheet" href="css/jq.css"> <link rel="stylesheet" href="css/jq.css">
@ -125,6 +125,7 @@
</div> </div>
</td> </td>
</tr> </tr>
</tbody>
<tbody class="tablesorter-infoOnly"> <tbody class="tablesorter-infoOnly">
<tr><th colspan="3">jQuery scrollstop plugin option</th></tr> <tr><th colspan="3">jQuery scrollstop plugin option</th></tr>

2
docs/example-widget-math.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Math Widget</title> <title>jQuery tablesorter 2.0 - Math Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

2
docs/example-widget-output.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Output Widget</title> <title>jQuery tablesorter 2.0 - Output Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

34
docs/example-widget-pager-ajax.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Pager Widget - Ajax</title> <title>jQuery tablesorter 2.0 - Pager Widget - Ajax</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -177,23 +177,23 @@
<div id="main"> <div id="main">
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
</p>
<ul>
<li>This pager WIDGET <em>can not</em> be applied to the original tablesorter.</li>
<li>Do not use this widget along with the pager plugin.</li>
<li>The pager.css file also works with this pager widget.</li>
<li>This widget is still in <span class="beta">development</span> as it has not been throughly tested.</li>
<li>Extensive documentation has not been included, as all functioning is essentially identical to the pager addon, but here are some important differences:
<ul> <ul>
<li>This pager WIDGET <em>can not</em> be applied to the original tablesorter.</li> <li>All of the options are now set within the <code>widgetOptions</code>.</li>
<li>Do not use this widget along with the pager plugin.</li> <li>Most option names have only been modified by adding <code>pager_</code> as a prefix.</li>
<li>The pager.css file also works with this pager widget.</li> <li>Exceptions include moving all applied css class names into a <code>pager_css</code> option and all selectors into <code>pager_selectors</code>, including the original <code>container</code> option.</li>
<li>This widget is still in <span class="beta">development</span> as it has not been throughly tested.</li> <li>See the Javascript code below for a full example of how to use this widget with <strong>ajax</strong>.</li>
<li>Extensive documentation has not been included, as all functioning is essentially identical to the pager addon, but here are some important differences:
<ul>
<li>All of the options are now set within the <code>widgetOptions</code>.</li>
<li>Most option names have only been modified by adding <code>pager_</code> as a prefix.</li>
<li>Exceptions include moving all applied css class names into a <code>pager_css</code> option and all selectors into <code>pager_selectors</code>, including the original <code>container</code> option.</li>
<li>See the Javascript code below for a full example of how to use this widget with <strong>ajax</strong>.</li>
</ul>
</li>
<li>The "ID" column has a default filter setting of "&gt;30" and a descending sort, but neither is applied as this demo is not connected a server (just a basic JSON file).</li>
</ul> </ul>
<p> </li>
<li>The "ID" column has a default filter setting of "&gt;30" and a descending sort, but neither is applied as this demo is not connected a server (just a basic JSON file).</li>
</ul>
<h1>Demo</h1> <h1>Demo</h1>
Original Ajax url: <span id="origurl"></span><br> Original Ajax url: <span id="origurl"></span><br>

45
docs/example-widget-pager.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Pager Widget</title> <title>jQuery tablesorter 2.0 - Pager Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -231,27 +231,27 @@
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> </p>
<li>In <span class="version updated">v2.24.0</span>, a page size select option with a value of "all" will display all rows - not recommended for ajax interactions!</li> <ul>
<li>In <span class="version">v2.19.0</span>, added <code>pageAndSize</code> method which allows setting both the pager page &amp; size.</li> <li>In <span class="version updated">v2.24.0</span>, a page size select option with a value of "all" will display all rows - not recommended for ajax interactions!</li>
<li>In <span class="version">v2.17.6</span>, added <code>{startRow:input}</code> and <code>{page:input}</code> variables to the <code>output</code> option.<p></p></li> <li>In <span class="version">v2.19.0</span>, added <code>pageAndSize</code> method which allows setting both the pager page &amp; size.</li>
<li>In <span class="version">v2.17.6</span>, added <code>{startRow:input}</code> and <code>{page:input}</code> variables to the <code>output</code> option.<p></p></li>
<li>This pager WIDGET <em>can not</em> be applied to the original tablesorter.</li> <li>This pager WIDGET <em>can not</em> be applied to the original tablesorter.</li>
<li>Do not use this widget along with the pager plugin.</li> <li>Do not use this widget along with the pager plugin.</li>
<li>The pager.css file also works with this pager widget.</li> <li>The pager.css file also works with this pager widget.</li>
<li>This widget is still in <span class="beta">development</span> as it has not been throughly tested.</li> <li>This widget is still in <span class="beta">development</span> as it has not been throughly tested.</li>
<li>Extensive documentation has not been included, as all functioning is essentially identical to the pager addon, but here are some important differences: <li>Extensive documentation has not been included, as all functioning is essentially identical to the pager addon, but here are some important differences:
<ul> <ul>
<li>All of the options are now set within the <code>widgetOptions</code>.</li> <li>All of the options are now set within the <code>widgetOptions</code>.</li>
<li>Pager events (pagerChange pagerComplete pagerInitialized pageMoved) now return <code>table.config</code> instead of <code>table.config.pager</code>.</li> <li>Pager events (pagerChange pagerComplete pagerInitialized pageMoved) now return <code>table.config</code> instead of <code>table.config.pager</code>.</li>
<li>Most option names have only been modified by adding <code>pager_</code> as a prefix.</li> <li>Most option names have only been modified by adding <code>pager_</code> as a prefix.</li>
<li>Exceptions include moving all applied css class names into a <code>pager_css</code> option and all selectors into <code>pager_selectors</code>, including the original <code>container</code> option.</li> <li>Exceptions include moving all applied css class names into a <code>pager_css</code> option and all selectors into <code>pager_selectors</code>, including the original <code>container</code> option.</li>
<li>Because I stopped trying so hard to make widgets compatible with jQuery v1.2.6, this widget requires at least v1.3+.</li> <li>Because I stopped trying so hard to make widgets compatible with jQuery v1.2.6, this widget requires at least v1.3+.</li>
<li>See the Javascript code below for a full example.</li> <li>See the Javascript code below for a full example.</li>
</ul> </ul>
</li> </li>
</ul> </ul>
<p>
<h1>Triggered Events</h1> <h1>Triggered Events</h1>
<ul id="display"> <ul id="display">
@ -475,4 +475,3 @@ td.tablesorter-pager {
</body> </body>
</html> </html>

4
docs/example-widget-print.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Print Widget</title> <title>jQuery tablesorter 2.0 - Print Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -309,7 +309,7 @@ print_callback : function( config, $table, printStyle ) {
</div> </div>
<p> <p></p>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><div class="print button">Print</div> <div id="demo"><div class="print button">Print</div>

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

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Table Reflow Widget</title> <title>jQuery tablesorter 2.0 - Table Reflow Widget</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -493,7 +493,7 @@ table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
</div> </div>
<p> <p></p>
<h1>Demo <small>(Pick a table width or resize the browser window)</small></h1> <h1>Demo <small>(Pick a table width or resize the browser window)</small></h1>
<div id="demo"><h3>Reflow widget only</h3> <div id="demo"><h3>Reflow widget only</h3>

4
docs/example-widget-reflow1.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Table Reflow Widget (beta)</title> <title>jQuery tablesorter 2.0 - Table Reflow Widget (beta)</title>
<!-- demo --> <!-- demo -->
<link rel="stylesheet" href="css/jq.css"> <link rel="stylesheet" href="css/jq.css">

4
docs/example-widget-reflow2.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Table Reflow Widget (beta)</title> <title>jQuery tablesorter 2.0 - Table Reflow Widget (beta)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>

Some files were not shown because too many files have changed in this diff Show More