mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Docs: add html hint & fix issues
This commit is contained in:
Rob Garrison
parent
70269e9315
commit
5992cb6649
12
Gruntfile.js
12
Gruntfile.js
@ -261,6 +261,15 @@ module.exports = function( grunt ) {
|
||||
}
|
||||
},
|
||||
|
||||
htmlhint: {
|
||||
html1: {
|
||||
options: {
|
||||
'tag-pair': true
|
||||
},
|
||||
src: ['docs/*.html', 'beta-testing/*.html']
|
||||
}
|
||||
},
|
||||
|
||||
uglify: {
|
||||
options: {
|
||||
preserveComments: function( node, comment ){
|
||||
@ -338,6 +347,7 @@ module.exports = function( grunt ) {
|
||||
|
||||
grunt.loadNpmTasks( 'grunt-contrib-clean' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-jshint' );
|
||||
grunt.loadNpmTasks( 'grunt-htmlhint' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-qunit' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-concat' );
|
||||
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
|
||||
@ -346,7 +356,7 @@ module.exports = function( grunt ) {
|
||||
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
|
||||
grunt.loadNpmTasks( 'grunt-jscs' );
|
||||
|
||||
grunt.registerTask( 'test', [ 'jscs', 'jshint', 'qunit' ] );
|
||||
grunt.registerTask( 'test', [ 'jscs', 'jshint', 'htmlhint', 'qunit' ] );
|
||||
|
||||
tasks = [
|
||||
'clean:build',
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="../docs/js/jquery-latest.min.js"></script>
|
||||
@ -1197,4 +1197,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Column reorder Widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Column reorder Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="../docs/js/jquery-latest.min.js"></script>
|
||||
@ -189,4 +189,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Adding a table row</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Adding a table row</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<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>' +
|
||||
'<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),
|
||||
// resort table using the current sort; set to false to prevent resort, otherwise
|
||||
// any other value in resort will automatically trigger the table resort.
|
||||
// resort table using the current sort; set to false to prevent resort, otherwise
|
||||
// any other value in resort will automatically trigger the table resort.
|
||||
resort = true;
|
||||
$('table')
|
||||
.find('tbody').append($row)
|
||||
@ -57,13 +57,13 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click on the [ Add Rows ] button to add two new rows.</li>
|
||||
<li>The "addRows" method was added in version 2.0.16, and is not part of the original plugin.</li>
|
||||
<li>This example could have used the "update" method to add rows, but to remove rows only the "update" method works.</li>
|
||||
<li>This method is better used for the <a href="example-pager.html">pager plugin</a> when not all of the rows are displayed.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Click on the [ Add Rows ] button to add two new rows.</li>
|
||||
<li>The "addRows" method was added in version 2.0.16, and is not part of the original plugin.</li>
|
||||
<li>This example could have used the "update" method to add rows, but to remove rows only the "update" method works.</li>
|
||||
<li>This method is better used for the <a href="example-pager.html">pager plugin</a> when not all of the rows are displayed.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Appending table data with ajax</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Appending table data with ajax</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - applyWidgetId vs. applyWidgets</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - applyWidgetId vs. applyWidgets</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Child Rows with Filter Widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Child Rows with Filter Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Child Rows</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Child Rows</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -72,21 +72,21 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click the link in the Order # column to reveal the hidden child row cells
|
||||
(<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>).</li>
|
||||
<li>This option is available in the original plugin.</li>
|
||||
<li>This demo had the default child row class name changed from "expand-child" to "tablesorter-childRow" in v2.4.</li>
|
||||
<li>As of <span class="version updated">v2.15.12</span>,
|
||||
<ul>
|
||||
<li>Parents of child rows now have a <code>tablesorter-hasChildRow</code> class name added.</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><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 additional code to always hide child row cells on <code>pagerChange</code> is no longer needed.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Click the link in the Order # column to reveal the hidden child row cells
|
||||
(<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>).</li>
|
||||
<li>This option is available in the original plugin.</li>
|
||||
<li>This demo had the default child row class name changed from "expand-child" to "tablesorter-childRow" in v2.4.</li>
|
||||
<li>As of <span class="version updated">v2.15.12</span>,
|
||||
<ul>
|
||||
<li>Parents of child rows now have a <code>tablesorter-hasChildRow</code> class name added.</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><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 additional code to always hide child row cells on <code>pagerChange</code> is no longer needed.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting & Filtering with Colspans</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Sorting & Filtering with Colspans</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -78,17 +78,17 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<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 alert">Alert</span> Cells with a <code>rowspan</code> are <em>not</em> currently supported.</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">>10</button> - the "17 Koala" cell is not parsed as a numeric value and is thus considered a string.</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>
|
||||
</p>
|
||||
<ul>
|
||||
<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 alert">Alert</span> Cells with a <code>rowspan</code> are <em>not</em> currently supported.</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">>10</button> - the "17 Koala" cell is not parsed as a numeric value and is thus considered a string.</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>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>
|
||||
<p>
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><ul>
|
||||
@ -180,4 +180,3 @@ Search:
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - CSS Column & Row Highlights</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - CSS Column & Row Highlights</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -171,33 +171,33 @@ table.focus-highlight td:before {
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>The css in this demo only works with <a href="http://caniuse.com/#feat=css-gencontent">modern browsers</a> (IE9+).</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>
|
||||
<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 & rows, then take a look at the <a href="https://github.com/gajus/wholly">wholly</a> plugin.
|
||||
<p></p>
|
||||
</li>
|
||||
<li>To add <strong class="hover-hl">Hover</strong> Highlighting:
|
||||
<ul>
|
||||
<li>Add a class name of <code>"<span class="hover-hl">hover-highlight</span>"</code> to enable hover row and column highlighting.</li>
|
||||
<li>Include the CSS shown on this page.</li>
|
||||
<li>If needed, modify the table background color & zebra striping row colors.</li>
|
||||
<li>Modify the hover highlight row and/or column color definitions as desired (they can be different colors).</li>
|
||||
</ul>
|
||||
<p></p>
|
||||
</li>
|
||||
<li>To add <strong class="focus-hl">Focus</strong> Highlighting:
|
||||
<ul>
|
||||
<li>Add a class name of <code>"<span class="focus-hl">focus-highlight</span>"</code> to enable focused cell with row and column highlighting.</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>Include the CSS and the extra javascript shown on this page to make table cells focusable.</li>
|
||||
<li>If needed, modify the table background color & zebra striping row colors.</li>
|
||||
<li>Modify the focus highlight row and/or column color definitions as desired (they can be different colors).</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>The css in this demo only works with <a href="http://caniuse.com/#feat=css-gencontent">modern browsers</a> (IE9+).</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>
|
||||
<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 & rows, then take a look at the <a href="https://github.com/gajus/wholly">wholly</a> plugin.
|
||||
<p></p>
|
||||
</li>
|
||||
<li>To add <strong class="hover-hl">Hover</strong> Highlighting:
|
||||
<ul>
|
||||
<li>Add a class name of <code>"<span class="hover-hl">hover-highlight</span>"</code> to enable hover row and column highlighting.</li>
|
||||
<li>Include the CSS shown on this page.</li>
|
||||
<li>If needed, modify the table background color & zebra striping row colors.</li>
|
||||
<li>Modify the hover highlight row and/or column color definitions as desired (they can be different colors).</li>
|
||||
</ul>
|
||||
<p></p>
|
||||
</li>
|
||||
<li>To add <strong class="focus-hl">Focus</strong> Highlighting:
|
||||
<ul>
|
||||
<li>Add a class name of <code>"<span class="focus-hl">focus-highlight</span>"</code> to enable focused cell with row and column highlighting.</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>Include the CSS and the extra javascript shown on this page to make table cells focusable.</li>
|
||||
<li>If needed, modify the table background color & zebra striping row colors.</li>
|
||||
<li>Modify the focus highlight row and/or column color definitions as desired (they can be different colors).</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Dragtable Mod (beta)</title>
|
||||
<title>jQuery tablesorter 2.0 - Dragtable Mod (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Initializing tablesorter on an empty table</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Initializing tablesorter on an empty table</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Extending default options</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Extending default options</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -114,4 +114,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Using extractors with parsers</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Using extractors with parsers</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -58,25 +58,25 @@ $(function() {
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<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:
|
||||
<ul>
|
||||
<li>In this demo, the last column contains select dropdowns that have "good", "medium" and "bad" options.</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>
|
||||
<li>Thanks to <a href="https://github.com/TheSin-">TheSin-</a> for adding this functionality!</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The extractor <em>is always</em> used before the parser.</li>
|
||||
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-extractor="select"</code>.</li>
|
||||
<li>metadata <code>class="{ extractor: 'select'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { extractor : 'select' } }</code>.</li>
|
||||
<li>header class name <code>class="extractor-select"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<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:
|
||||
<ul>
|
||||
<li>In this demo, the last column contains select dropdowns that have "good", "medium" and "bad" options.</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>
|
||||
<li>Thanks to <a href="https://github.com/TheSin-">TheSin-</a> for adding this functionality!</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The extractor <em>is always</em> used before the parser.</li>
|
||||
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-extractor="select"</code>.</li>
|
||||
<li>metadata <code>class="{ extractor: 'select'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { extractor : 'select' } }</code>.</li>
|
||||
<li>header class name <code>class="extractor-select"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -122,4 +122,3 @@ $(function() {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting Across Multiple Columns</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Sorting Across Multiple Columns</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -32,11 +32,11 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Clicking on any of the sortable header cells will cause all columns below it to sort.</li>
|
||||
<li>This demo will only work in tablesorter version 2.3+.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Clicking on any of the sortable header cells will cause all columns below it to sort.</li>
|
||||
<li>This demo will only work in tablesorter version 2.3+.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -97,4 +97,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting Accented Characters</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Sorting Accented Characters</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -71,12 +71,12 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Accented characters will get replaced by their character equivalent when the <code>sortLocaleCompare</code> option is <code>true</code>.</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>
|
||||
<li>If you have a specific language requirement, please refer to the <a href="https://github.com/Mottie/tablesorter/wiki/Language">Language</a> wiki pages to see if it is there. If not, please consider sharing the code or even just share the character equivalents themselves.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Accented characters will get replaced by their character equivalent when the <code>sortLocaleCompare</code> option is <code>true</code>.</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>
|
||||
<li>If you have a specific language requirement, please refer to the <a href="https://github.com/Mottie/tablesorter/wiki/Language">Language</a> wiki pages to see if it is there. If not, please consider sharing the code or even just share the character equivalents themselves.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -167,4 +167,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable headers using metadata</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Disable headers using metadata</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -126,4 +126,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Setting column parser using metadata</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Setting column parser using metadata</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Setting initial sorting order with metadata</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Setting initial sorting order with metadata</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - resetting the entire table sort</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - resetting the entire table sort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
@ -42,12 +42,12 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click on the reset button to reset the sort. The button can be used at any time.</li>
|
||||
<li>Reset the table by triggering a <code>sortReset</code> event on the table (see the javascript code below).</li>
|
||||
<li>This method was added in version 2.4.7.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Click on the reset button to reset the sort. The button can be used at any time.</li>
|
||||
<li>Reset the table by triggering a <code>sortReset</code> event on the table (see the javascript code below).</li>
|
||||
<li>This method was added in version 2.4.7.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button">Reset</button>
|
||||
@ -153,4 +153,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting with Multiple Tbodies</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Sorting with Multiple Tbodies</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -106,4 +106,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Using a Custom Sort Script</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Using a Custom Sort Script</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -26,7 +26,7 @@
|
||||
Array.AlphanumericSortIgnoreCase = true;
|
||||
// see https://github.com/andrewplummer/Sugar/issues/382#issuecomment-41526957
|
||||
Array.AlphanumericSortEquivalents = {};
|
||||
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : 'blue',
|
||||
// table = table object; get config options from table.config
|
||||
@ -58,24 +58,24 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Modified the <code>textSorter</code> option to allow setting the sorter per column <span class="version">v2.12</span>:
|
||||
<ul>
|
||||
<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>
|
||||
<li>The "Icelandic Alphabet" column is using the <a href="http://sugarjs.com/arrays#sorting">Sugar</a> library to sort:
|
||||
<ul>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The "Plain Text Sort" 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>The sorting of empty cells still occurs regardless of the custom <code>textSorter</code> setting.</li>
|
||||
</ul>
|
||||
</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>
|
||||
<li>This option is not part of the original plugin (v2.2).</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Modified the <code>textSorter</code> option to allow setting the sorter per column <span class="version">v2.12</span>:
|
||||
<ul>
|
||||
<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>
|
||||
<li>The "Icelandic Alphabet" column is using the <a href="http://sugarjs.com/arrays#sorting">Sugar</a> library to sort:
|
||||
<ul>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The "Plain Text Sort" 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>The sorting of empty cells still occurs regardless of the custom <code>textSorter</code> setting.</li>
|
||||
</ul>
|
||||
</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>
|
||||
<li>This option is not part of the original plugin (v2.2).</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
@ -147,4 +147,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Changing the date format</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Changing the date format</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -45,22 +45,23 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>The dateFormat option was modified in version 2.0.23 (not part of the original plugin).</li>
|
||||
<li>The dateFormat option will ONLY work with the <code>shortDate</code> parser.</li>
|
||||
<li>The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).</li>
|
||||
<li>This date format parser will only work with a four digit year. You can <a href="example-parsers.html">write your own</a> if you need a two digit year parser.</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:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-date-format="mmddyyyy"</code> (see the Javascript block below on how to set it directly; <code>data-dateFormat</code> is equivalent to <code>data-date-format</code>).</li>
|
||||
<li>metadata <code>class="{ dateFormat: "mmddyyyy" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { dateFormat: "mmddyyyy" } }</code>.</li>
|
||||
<li>header class name <code>class="dateFormat-mmddyyyy"</code>.</li>
|
||||
<li>Global (all columns) <code>dateFormat</code> option setting.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>The dateFormat option was modified in version 2.0.23 (not part of the original plugin).</li>
|
||||
<li>The dateFormat option will ONLY work with the <code>shortDate</code> parser.</li>
|
||||
<li>The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).</li>
|
||||
<li>This date format parser will only work with a four digit year. You can <a href="example-parsers.html">write your own</a> if you need a two digit year parser.</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:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-date-format="mmddyyyy"</code> (see the Javascript block below on how to set it directly; <code>data-dateFormat</code> is equivalent to <code>data-date-format</code>).</li>
|
||||
<li>metadata <code>class="{ dateFormat: "mmddyyyy" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { dateFormat: "mmddyyyy" } }</code>.</li>
|
||||
<li>header class name <code>class="dateFormat-mmddyyyy"</code>.</li>
|
||||
<li>Global (all columns) <code>dateFormat</code> option setting.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -173,4 +174,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Enabling debug mode</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Enabling debug mode</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -41,7 +41,7 @@
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> If firebug is installed the debuging information will be displayed in the firebug console.
|
||||
</p>
|
||||
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
@ -116,4 +116,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Dealing with Digits</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Dealing with Digits</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -33,14 +33,14 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click on any column header to sort that column.</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>The above sort was replaced with a natural sort in version 2.2.</li>
|
||||
<li>This example demonstrates that common table values are auto-detected (including plain text, currency, percentages, and positive & negative numbers), so there is no need to set a specific parser unless you notice an issue with how a column is sorting.</li>
|
||||
<li>Issues may arise if a column contains mixed data, e.g. "N/A" is located at the top of a numeric column; in this case the column will be detected as a text column and not a numeric column. If issues occur, add a <code>sorter-digit</code> class name to that header cell.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Click on any column header to sort that column.</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>The above sort was replaced with a natural sort in version 2.2.</li>
|
||||
<li>This example demonstrates that common table values are auto-detected (including plain text, currency, percentages, and positive & negative numbers), so there is no need to set a specific parser unless you notice an issue with how a column is sorting.</li>
|
||||
<li>Issues may arise if a column contains mixed data, e.g. "N/A" is located at the top of a numeric column; in this case the column will be detected as a text column and not a numeric column. If issues occur, add a <code>sorter-digit</code> class name to that header cell.</li>
|
||||
</ul>
|
||||
|
||||
<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 -->
|
||||
@ -150,4 +150,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Render Header</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Render Header</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -158,4 +158,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Header Template & Rendering</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Header Template & Rendering</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -146,4 +146,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Using selectorSort</title>
|
||||
<title>jQuery tablesorter 2.0 - Using selectorSort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -148,4 +148,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - showProcessing & Filter events</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - showProcessing & Filter events</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
@ -67,11 +67,11 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>As of <span class="version">v2.16.3</span>, there is a built-in 500 millisecond delay before the processing icon will show. If the sort has completed within that time, the icon will not appear.</li>
|
||||
<li>There is an issue with the processing icon not appearing at all, or the animation appears frozen when processing data in very large tables. This is due to javascript only being able to process one thread at-a-time; If you know of a solution or work-around please <a href="https://github.com/Mottie/tablesorter/issues/158">add a comment</a> or contribute a fix!</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>As of <span class="version">v2.16.3</span>, there is a built-in 500 millisecond delay before the processing icon will show. If the sort has completed within that time, the icon will not appear.</li>
|
||||
<li>There is an issue with the processing icon not appearing at all, or the animation appears frozen when processing data in very large tables. This is due to javascript only being able to process one thread at-a-time; If you know of a solution or work-around please <a href="https://github.com/Mottie/tablesorter/issues/158">add a comment</a> or contribute a fix!</li>
|
||||
</ul>
|
||||
|
||||
<h1>Javascript</h1>
|
||||
<div id="javascript">
|
||||
@ -1135,4 +1135,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Append a default sorting order</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Append a default sorting order</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -75,12 +75,12 @@ $(function() {
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.24.0</span>, <code>sortAppend</code> can now be applied based on the primary column sort.</li>
|
||||
<li>Click to sort any column header to see the the first column sort is appended to the selected sort order.</li>
|
||||
<li>This option is part of the original plugin</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.24.0</span>, <code>sortAppend</code> can now be applied based on the primary column sort.</li>
|
||||
<li>Click to sort any column header to see the the first column sort is appended to the selected sort order.</li>
|
||||
<li>This option is part of the original plugin</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sorting empty cells</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Sorting empty cells</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -49,35 +49,34 @@ $(function(){
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<p></p>
|
||||
<ul>
|
||||
<li>Set the <code>emptyTo</code> selector below:
|
||||
<ul>
|
||||
<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>none</code> or <code>zero</code>
|
||||
<ul>
|
||||
<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 < 'A' && 0 < 'Z'</code>); so in an alphabetical column, empty cells will sort at the top in an ascending sort & at the bottom in a descending sort.</li>
|
||||
<li>In numerical columns, empty cells will sort as if their value was zero.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-empty="top"</code>.</li>
|
||||
<li>metadata <code>class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { empty : 'top' } }</code>.</li>
|
||||
<li>header class name <code>class="empty-top"</code>.</li>
|
||||
<li>Overall <code>emptyTo</code> option.</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li><code>emptyToBottom</code> option was added in v2.1.11, then replaced by the <code>emptyTo</code> option in v2.1.16.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Set the <code>emptyTo</code> selector below:
|
||||
<ul>
|
||||
<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>none</code> or <code>zero</code>
|
||||
<ul>
|
||||
<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 < 'A' && 0 < 'Z'</code>); so in an alphabetical column, empty cells will sort at the top in an ascending sort & at the bottom in a descending sort.</li>
|
||||
<li>In numerical columns, empty cells will sort as if their value was zero.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-empty="top"</code>.</li>
|
||||
<li>metadata <code>class="{ empty: 'top'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { empty : 'top' } }</code>.</li>
|
||||
<li>header class name <code>class="empty-top"</code>.</li>
|
||||
<li>Overall <code>emptyTo</code> option.</li>
|
||||
</ul>
|
||||
<br>
|
||||
</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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
@ -195,4 +194,3 @@ Set <code>emptyTo</code> option: <select>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Force a default sorting order</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Force a default sorting order</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -45,11 +45,11 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click to sort any column header to see the forcing of the first column sort.</li>
|
||||
<li>This option is part of the original plugin</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Click to sort any column header to see the forcing of the first column sort.</li>
|
||||
<li>This option is part of the original plugin</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -125,4 +125,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Change multi-column sorting key</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Change multi-column sorting key</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Click to sort any column header, then hold down the alt key and select a second column. Continue selecting columns as desired.
|
||||
<p>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -116,4 +116,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set an initial table sort</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Set an initial table sort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -173,4 +173,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set an initial sort order direction</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Set an initial sort order direction</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -110,4 +110,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -52,13 +52,13 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>The default <code>sortInitialOrder</code> for the entire table is set to <code>desc</code> (descending sort).</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>sortReset</code> option by clicking on any column at least three times. It should sort in the <code>sortInitialOrder</code> direction on the first click, the opposite direction on the second click, then reset to the original sort order on the third click. This cycle repeats on subsequent sorts.</li>
|
||||
<li>Test the <code>sortRestart</code> option by clicking on any unsorted column to see that it will always restart from the <code>sortInitialOrder</code>.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>The default <code>sortInitialOrder</code> for the entire table is set to <code>desc</code> (descending sort).</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>sortReset</code> option by clicking on any column at least three times. It should sort in the <code>sortInitialOrder</code> direction on the first click, the opposite direction on the second click, then reset to the original sort order on the third click. This cycle repeats on subsequent sorts.</li>
|
||||
<li>Test the <code>sortRestart</code> option by clicking on any unsorted column to see that it will always restart from the <code>sortInitialOrder</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -134,4 +134,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Dealing with markup inside cells</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Dealing with markup inside cells</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -57,13 +57,13 @@
|
||||
<div id="main">
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<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 textExtraction function setting for each column was added in version 2.0.12 (not part of the original plugin).</li>
|
||||
<li>The "First Name" column is sorting by the contents of the <strong> tag (in red).</li>
|
||||
<li>Added "table" and "cellIndex" variables to the textExtraction function (v2.1.2).</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<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 textExtraction function setting for each column was added in version 2.0.12 (not part of the original plugin).</li>
|
||||
<li>The "First Name" column is sorting by the contents of the <strong> tag (in red).</li>
|
||||
<li>Added "table" and "cellIndex" variables to the textExtraction function (v2.1.2).</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -139,4 +139,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Semver Sorting</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Semver Sorting</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -72,16 +72,16 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<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>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>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>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>In this demo, when the semver 2.0.0 compliant version column is sorted, the order column will be in sequential order.</li>
|
||||
<li>Semver example order, from semver.org:<br>1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1 < 1.0.0</li>
|
||||
<!-- http://jsfiddle.net/Mottie/abkNM/1626/ -->
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<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>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>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>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>In this demo, when the semver 2.0.0 compliant version column is sorted, the order column will be in sequential order.</li>
|
||||
<li>Semver example order, from semver.org:<br>1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1 < 1.0.0</li>
|
||||
<!-- http://jsfiddle.net/Mottie/abkNM/1626/ -->
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Pager plugin</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -57,17 +57,17 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Only the Windows Metro Dark theme has been included; for other colors:
|
||||
<ul>
|
||||
<li>Create your own dynamically by modifying <a href="http://codepen.io/Mottie/pen/gCslk">this demo</a>.</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>
|
||||
<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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>For alternate <code>thead</code> & <code>tfoot</code> row colors, add the class name <code>dark-row</code>. See the HTML below.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Only the Windows Metro Dark theme has been included; for other colors:
|
||||
<ul>
|
||||
<li>Create your own dynamically by modifying <a href="http://codepen.io/Mottie/pen/gCslk">this demo</a>.</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>
|
||||
<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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>For alternate <code>thead</code> & <code>tfoot</code> row colors, add the class name <code>dark-row</code>. See the HTML below.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
@ -191,4 +191,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Dealing with text strings in numerical sorts</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Dealing with text strings in numerical sorts</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -48,32 +48,32 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This functionality is new as of version 2.0.10 (not part of the original plugin).</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>Overall <code>stringTo</code> option added in version 2.1.16.</li>
|
||||
<li>String options changed in version 2.1.16; setting the value to:
|
||||
<ul>
|
||||
<li><code>"max"</code> will treat any text in that column as a value greater than the <em>max</em> (more positive) value. Renamed from "max+".</li>
|
||||
<li><code>"min"</code> will treat any text in that column as a value greater than the <em>min</em> (more negative) value. Renamed from "max-".</li>
|
||||
<li><code>"top"</code> will always sort the text to the top of the column.</li>
|
||||
<li><code>"bottom"</code> will always sort the text to the bottom of the column.</li>
|
||||
<li><code>"none"</code> or <code>"zero"</code> will treat the text as if it has a value of zero.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-string="top"</code>.</li>
|
||||
<li>metadata <code>class="{ string: 'top'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { string : 'top' } }</code>.</li>
|
||||
<li>header class name <code>class="string-top"</code>.</li>
|
||||
<li>Overall <code>stringTo</code> option.</li>
|
||||
</ul>
|
||||
</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>
|
||||
<li>The <code>emptyTo</code> option defaults to bottom, so all empty cells will sort at the bottom of the table, except for the second column.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>This functionality is new as of version 2.0.10 (not part of the original plugin).</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>Overall <code>stringTo</code> option added in version 2.1.16.</li>
|
||||
<li>String options changed in version 2.1.16; setting the value to:
|
||||
<ul>
|
||||
<li><code>"max"</code> will treat any text in that column as a value greater than the <em>max</em> (more positive) value. Renamed from "max+".</li>
|
||||
<li><code>"min"</code> will treat any text in that column as a value greater than the <em>min</em> (more negative) value. Renamed from "max-".</li>
|
||||
<li><code>"top"</code> will always sort the text to the top of the column.</li>
|
||||
<li><code>"bottom"</code> will always sort the text to the bottom of the column.</li>
|
||||
<li><code>"none"</code> or <code>"zero"</code> will treat the text as if it has a value of zero.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-string="top"</code>.</li>
|
||||
<li>metadata <code>class="{ string: 'top'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { string : 'top' } }</code>.</li>
|
||||
<li>header class name <code>class="string-top"</code>.</li>
|
||||
<li>Overall <code>stringTo</code> option.</li>
|
||||
</ul>
|
||||
</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>
|
||||
<li>The <code>emptyTo</code> option defaults to bottom, so all empty cells will sort at the bottom of the table, except for the second column.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table>
|
||||
@ -222,4 +222,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Lock sort order</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Lock sort order</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -41,19 +41,19 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This option was part of the original plugin, but it was broken.</li>
|
||||
<li>Sort the first, third and fifth columns to see how the sort is locked.</li>
|
||||
<li>Columns can be locked using any of the following methods (they all do the same thing), in order of priority (v2.3+):
|
||||
<ul>
|
||||
<li>jQuery data <code>data-lockedorder="asc"</code>. (equivalent to <code>data-locked-order="asc"</code>).</li>
|
||||
<li>metadata <code>class="{ lockedOrder: 'asc'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { lockedOrder: 'asc' } }</code>.</li>
|
||||
<li>header class name <code>class="lockedOrder-asc"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>This option was part of the original plugin, but it was broken.</li>
|
||||
<li>Sort the first, third and fifth columns to see how the sort is locked.</li>
|
||||
<li>Columns can be locked using any of the following methods (they all do the same thing), in order of priority (v2.3+):
|
||||
<ul>
|
||||
<li>jQuery data <code>data-lockedorder="asc"</code>. (equivalent to <code>data-locked-order="asc"</code>).</li>
|
||||
<li>metadata <code>class="{ lockedOrder: 'asc'}"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { lockedOrder: 'asc' } }</code>.</li>
|
||||
<li>header class name <code>class="lockedOrder-asc"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -129,4 +129,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Set initial sort order</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Set initial sort order</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -44,19 +44,19 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Adding "sortInitialOrder" inside of the "headers" option was added in version 2.0.8 (not part of the original plugin).</li>
|
||||
<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:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sort-initial-order="desc"</code> (equivalent to <code>data-sortinitialorder="desc"</code>).</li>
|
||||
<li>metadata <code>class="{ sortInitialOrder: "desc" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sortInitialOrder: "desc" } }</code>.</li>
|
||||
<li>header class name <code>class="sortInitialOrder-desc"</code>.</li>
|
||||
<li>overall <code>sortInitialOrder</code> option setting.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Adding "sortInitialOrder" inside of the "headers" option was added in version 2.0.8 (not part of the original plugin).</li>
|
||||
<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:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sort-initial-order="desc"</code> (equivalent to <code>data-sortinitialorder="desc"</code>).</li>
|
||||
<li>metadata <code>class="{ sortInitialOrder: "desc" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sortInitialOrder: "desc" } }</code>.</li>
|
||||
<li>header class name <code>class="sortInitialOrder-desc"</code>.</li>
|
||||
<li>overall <code>sortInitialOrder</code> option setting.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -132,4 +132,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Skip parsing of content</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Skip parsing of content</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -55,20 +55,20 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<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 the sorting</em> of the same column should be observed as sorting will not work without the parsed data.</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><</code>, <code><=</code>, <code>></code> or <code>>=</code> a certain time).</li>
|
||||
<li>Use this setting by following any of these methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-parser="false"</code>.</li>
|
||||
<li>metadata <code>class="{ parser: "false" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { parser: false } }</code>.</li>
|
||||
<li>header class name <code>class="parser-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<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 the sorting</em> of the same column should be observed as sorting will not work without the parsed data.</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><</code>, <code><=</code>, <code>></code> or <code>>=</code> a certain time).</li>
|
||||
<li>Use this setting by following any of these methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-parser="false"</code>.</li>
|
||||
<li>metadata <code>class="{ parser: "false" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { parser: false } }</code>.</li>
|
||||
<li>header class name <code>class="parser-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -106,4 +106,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable sort</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Disable sort</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -49,19 +49,19 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<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 tablesorter v2.0.5 and older, only the metadata and headers options methods were available.</li>
|
||||
<li>In versions 2.3+, columns can be disabled using any of the following methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sorter="false"</code> (see the Javascript block below on how to set it directly).</li>
|
||||
<li>metadata <code>class="{ sorter: false }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sorter: false } }</code>.</li>
|
||||
<li>header class name <code>class="sorter-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<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 tablesorter v2.0.5 and older, only the metadata and headers options methods were available.</li>
|
||||
<li>In versions 2.3+, columns can be disabled using any of the following methods (they all do the same thing), in order of priority:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sorter="false"</code> (see the Javascript block below on how to set it directly).</li>
|
||||
<li>metadata <code>class="{ sorter: false }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sorter: false } }</code>.</li>
|
||||
<li>header class name <code>class="sorter-false"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -137,4 +137,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin - Ajax</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Pager plugin - Ajax</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin + Filter widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Pager plugin + Filter widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -138,19 +138,19 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> The following are not part of the original plugin:
|
||||
<ul>
|
||||
<li>In <span class="version updated">v2.23.0</span>, the following methods were changed due to issues with unique namespacing.
|
||||
<ul>
|
||||
<li><code>destroy.pager</code> is now <code>destroyPager</code></li>
|
||||
<li><code>disable.pager</code> is now <code>disablePager</code></li>
|
||||
<li><code>enable.pager</code> is now <code>enablePager</code></li>
|
||||
</ul>
|
||||
</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 was not possible in tablesorter versions prior to version 2.4.</li>
|
||||
<li>This combination can not be applied to the original tablesorter.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>In <span class="version updated">v2.23.0</span>, the following methods were changed due to issues with unique namespacing.
|
||||
<ul>
|
||||
<li><code>destroy.pager</code> is now <code>destroyPager</code></li>
|
||||
<li><code>disable.pager</code> is now <code>disablePager</code></li>
|
||||
<li><code>enable.pager</code> is now <code>enablePager</code></li>
|
||||
</ul>
|
||||
</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 was not possible in tablesorter versions prior to version 2.4.</li>
|
||||
<li>This combination can not be applied to the original tablesorter.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<br>
|
||||
@ -476,4 +476,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Pager plugin</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -235,22 +235,22 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> The following are not part of the original plugin:
|
||||
<ul>
|
||||
<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 updated">v2.23.0</span>, the following methods were changed due to issues with unique namespacing.
|
||||
<ul>
|
||||
<li><code>destroy.pager</code> is now <code>destroyPager</code></li>
|
||||
<li><code>disable.pager</code> is now <code>disablePager</code></li>
|
||||
<li><code>enable.pager</code> is now <code>enablePager</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.19.0</span>, added <code>pageAndSize</code> method which allows setting both the pager page & 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.</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>There have been lots of changes made in version 2.1, please check out the <a href="https://github.com/Mottie/tablesorter/wiki/Changes">change log</a>.</li>
|
||||
<li>In <span class="version">v2.11</span>, the <code>savePages</code> option was added to saves the current page size and number (requires storage script).</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<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 updated">v2.23.0</span>, the following methods were changed due to issues with unique namespacing.
|
||||
<ul>
|
||||
<li><code>destroy.pager</code> is now <code>destroyPager</code></li>
|
||||
<li><code>disable.pager</code> is now <code>disablePager</code></li>
|
||||
<li><code>enable.pager</code> is now <code>enablePager</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.19.0</span>, added <code>pageAndSize</code> method which allows setting both the pager page & 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.</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>There have been lots of changes made in version 2.1, please check out the <a href="https://github.com/Mottie/tablesorter/wiki/Changes">change log</a>.</li>
|
||||
<li>In <span class="version">v2.11</span>, the <code>savePages</code> option was added to saves the current page size and number (requires storage script).</li>
|
||||
</ul>
|
||||
|
||||
<h1>Triggered Events <button class="clear">Clear</button></h1>
|
||||
<ul id="display">
|
||||
@ -467,4 +467,3 @@ td.tablesorter-pager {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Writing custom parsers, advanced use</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Writing custom parsers, advanced use</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -78,17 +78,17 @@ $(function(){
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span>, the <code>parsed</code> parameter
|
||||
<ul>
|
||||
<li>This parameter is a flag used by the filter widget.</li>
|
||||
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
|
||||
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This method of writing custom parsers will NOT work with the original tablesorter 2.0.5b plugin because the format function does not consistently provide the <code>cell</code> and <code>cellIndex</code> parameters.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.15.0</span>, the <code>parsed</code> parameter
|
||||
<ul>
|
||||
<li>This parameter is a flag used by the filter widget.</li>
|
||||
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
|
||||
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This method of writing custom parsers will NOT work with the original tablesorter 2.0.5b plugin because the format function does not consistently provide the <code>cell</code> and <code>cellIndex</code> parameters.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table>
|
||||
@ -151,4 +151,3 @@ $(function(){
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable or set the column parser using class names</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Disable or set the column parser using class names</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -32,19 +32,19 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>In tablesorter version 2.0.5 and older, only the metadata and headers options methods were available to set the parsers.</li>
|
||||
<li>In versions 2.0.11+, parsers could be set using class names.</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:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sorter="text"</code> (see the Javascript block below on how to set it directly).</li>
|
||||
<li>metadata <code>class="{ sorter: "text" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sorter: "text" } }</code>.</li>
|
||||
<li>header class name <code>class="sorter-text"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>In tablesorter version 2.0.5 and older, only the metadata and headers options methods were available to set the parsers.</li>
|
||||
<li>In versions 2.0.11+, parsers could be set using class names.</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:
|
||||
<ul>
|
||||
<li>jQuery data <code>data-sorter="text"</code> (see the Javascript block below on how to set it directly).</li>
|
||||
<li>metadata <code>class="{ sorter: "text" }"</code>. This requires the metadata plugin.</li>
|
||||
<li>headers option <code>headers : { 0 : { sorter: "text" } }</code>.</li>
|
||||
<li>header class name <code>class="sorter-text"</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -128,4 +128,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter - Date range parsers</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter - Date range parsers</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter - Assorted date parsers</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter - Assorted date parsers</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -95,33 +95,33 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.24.1</span>,
|
||||
<ul>
|
||||
<li>Updated weekday & month parsers to better integrate with <a href="https://github.com/jquery/globalize">jQuery Globalize</a>.</li>
|
||||
<li>This demo now includes a column for French named weekdays & months.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Parse Dates with these parsers
|
||||
<ul>
|
||||
<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 "Weekday" column uses the included "weekday" parser. You can modify parser to match whatever language you are using.</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 "Year" column is just using the included two digit year parser:
|
||||
<ul>
|
||||
<li>Formats for "mmddyy", "ddmmyy" and "yymmdd" are available</li>
|
||||
<li>Within the parser code is a <code>range</code> variable which is set to <code>50</code> years range, which sets the date be within +/- range of the listed two digit year.</li>
|
||||
<li>So if the current year is <code>2020</code>, and the listed two digit year is <code>80</code> (<code>2080 - 2020 > 50</code>), it becomes <code>1980</code>.</li>
|
||||
<li>If the listed two digit year is <code>50</code> (<code>2050 - 2020 < 50</code>), then it becomes <code>2050</code>. I hope that makes it clearer.</li>
|
||||
<li>Try out the two digit year calculator below the table.</li>
|
||||
<li>In <span class="version">v2.14.0</span>, the range can be set using the <code>dateRange</code> option (see the initialization code below).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The "Time" column is using the built-in time parser which has been always been included with tablesorter .</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>In <span class="version">v2.24.1</span>,
|
||||
<ul>
|
||||
<li>Updated weekday & month parsers to better integrate with <a href="https://github.com/jquery/globalize">jQuery Globalize</a>.</li>
|
||||
<li>This demo now includes a column for French named weekdays & months.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Parse Dates with these parsers
|
||||
<ul>
|
||||
<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 "Weekday" column uses the included "weekday" parser. You can modify parser to match whatever language you are using.</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 "Year" column is just using the included two digit year parser:
|
||||
<ul>
|
||||
<li>Formats for "mmddyy", "ddmmyy" and "yymmdd" are available</li>
|
||||
<li>Within the parser code is a <code>range</code> variable which is set to <code>50</code> years range, which sets the date be within +/- range of the listed two digit year.</li>
|
||||
<li>So if the current year is <code>2020</code>, and the listed two digit year is <code>80</code> (<code>2080 - 2020 > 50</code>), it becomes <code>1980</code>.</li>
|
||||
<li>If the listed two digit year is <code>50</code> (<code>2050 - 2020 < 50</code>), then it becomes <code>2050</code>. I hope that makes it clearer.</li>
|
||||
<li>Try out the two digit year calculator below the table.</li>
|
||||
<li>In <span class="version">v2.14.0</span>, the range can be set using the <code>dateRange</code> option (see the initialization code below).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The "Time" column is using the built-in time parser which has been always been included with tablesorter .</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -224,4 +224,3 @@ $(function(){
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter - Duration & countdown parsers</title>
|
||||
<title>jQuery tablesorter - Duration & countdown parsers</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -160,5 +160,6 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -62,7 +62,7 @@
|
||||
<tr><td>5'</td><td>3¼</td></tr>
|
||||
<tr><td>3"</td><td>5 ½</td></tr>
|
||||
<tr><td>½"</td><td>2¾</td></tr>
|
||||
|
||||
|
||||
<tr><td>5' 11"</td><td>¾</td></tr>
|
||||
<tr><td>10' 11"</td><td>⅛</td></tr>
|
||||
<tr><td>10' 1"</td><td>5/6</td></tr>
|
||||
@ -73,21 +73,21 @@
|
||||
<tr><td>5' 3/4"</td><td>2⅞</td></tr>
|
||||
<tr><td>5' 5/8"</td><td>3 ¾</td></tr>
|
||||
<tr><td>5' 3 1/2"</td><td>3 ⅛</td></tr>
|
||||
|
||||
|
||||
<tr><td>10' 3⅛"</td><td>3/7</td></tr>
|
||||
|
||||
|
||||
<tr><td>10' 2⅜"</td><td>3⅜</td></tr>
|
||||
<tr><td>10' 3⅝"</td><td>3 ½</td></tr>
|
||||
<tr><td>10' 2⅞"</td><td>3 ⅝</td></tr>
|
||||
<tr><td>5' 3¼"</td><td>2⅝</td></tr>
|
||||
<tr><td>5 ' 2 ½ "</td><td>2/3</td></tr>
|
||||
<tr><td>10' 2¾"</td><td>5 ⅝</td></tr>
|
||||
|
||||
|
||||
<tr><td>5' 2 ½"</td><td>5 ⅜</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> 10 ' 1 "</td><td>3</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -125,4 +125,3 @@ $(function(){
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - File Type Parser</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - File Type Parser</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Parsers Globalize</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Parsers Globalize</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -255,18 +255,18 @@ var data = {
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>In <span class="version updated">v2.24.1</span>,
|
||||
<ul>
|
||||
<li>An internal change made it necessary to change the <code>lang</code> option to only hold a string of the set language.</li>
|
||||
<li>To cache the Globalize object, save it as a <code>Globalize</code> option (see code example below).</li>
|
||||
</ul>
|
||||
</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 & Japanese) and <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-parser.md">custom date formats</a>.</li>
|
||||
<li>This is a very basic example using English only. For another example, see the <a href="example-parsers-dates.html">weekday & month parsers</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>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>In <span class="version updated">v2.24.1</span>,
|
||||
<ul>
|
||||
<li>An internal change made it necessary to change the <code>lang</code> option to only hold a string of the set language.</li>
|
||||
<li>To cache the Globalize object, save it as a <code>Globalize</code> option (see code example below).</li>
|
||||
</ul>
|
||||
</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 & Japanese) and <a href="https://github.com/jquery/globalize/blob/master/doc/api/date/date-parser.md">custom date formats</a>.</li>
|
||||
<li>This is a very basic example using English only. For another example, see the <a href="example-parsers-dates.html">weekday & month parsers</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>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - IP address parsers</title>
|
||||
<title>jQuery tablesorter 2.0 - IP address parsers</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -46,29 +46,30 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This parser can be applied to the original plugin.</li>
|
||||
<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>A parser for IPv6 was added in <span class="version">v2.12</span> and named "ipv6Address":
|
||||
<ul>
|
||||
<li>Unlike some other custom parsers, this one will auto-detect & 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>IPv6 addresses are stored in the cache in their canonical decimal form, without the colons, for faster & easier numerical sorting.</li>
|
||||
<li><a href="../test.html">Extensive unit tests</a> are included with this parser.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>If the parser doesn't auto-detect which column has IPv6 addresses, use the headers sorter option to set it:
|
||||
<pre class="prettyprint lang-javascript">$(function(){
|
||||
$('table').tablesorter({
|
||||
headers: {
|
||||
1: { sorter: 'MAC' },
|
||||
// 2: { sorter: 'ipAddress' }, this parser is auto-detected
|
||||
3: { sorter: 'ipv6Address' }
|
||||
}
|
||||
});
|
||||
</p>
|
||||
<ul>
|
||||
<li>This parser can be applied to the original plugin.</li>
|
||||
<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>A parser for IPv6 was added in <span class="version">v2.12</span> and named "ipv6Address":
|
||||
<ul>
|
||||
<li>Unlike some other custom parsers, this one will auto-detect & 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>IPv6 addresses are stored in the cache in their canonical decimal form, without the colons, for faster & easier numerical sorting.</li>
|
||||
<li><a href="../test.html">Extensive unit tests</a> are included with this parser.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>If the parser doesn't auto-detect which column has IPv6 addresses, use the headers sorter option to set it:
|
||||
<pre class="prettyprint lang-javascript">$(function(){
|
||||
$('table').tablesorter({
|
||||
headers: {
|
||||
1: { sorter: 'MAC' },
|
||||
// 2: { sorter: 'ipAddress' }, this parser is auto-detected
|
||||
3: { sorter: 'ipv6Address' }
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Disable or set the column parser using data</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Disable or set the column parser using data</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> This functionality was added in version 2.2.3 (it is not part of the original plugin).
|
||||
<p>
|
||||
</p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
@ -122,4 +122,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter - Metric Parser</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter - Metric Parser</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -42,31 +42,31 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>In <span class="version update">v2.22.2</span>,
|
||||
<ul>
|
||||
<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>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>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>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>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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This parser will convert numbers with metric prefixes ("Mega", "Giga", etc) into appropriate values so they are sorted correctly.</li>
|
||||
<li>The base name must be included in the header:
|
||||
<ul>
|
||||
<li>The base is the unit of measure, such as "byte", "meter", "liter", etc.</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><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> & <code>data-metric-name-abbr</code> instead.</li>
|
||||
<li>If no base information is found, it will default to <code>m|meter</code>.</li>
|
||||
</ul>
|
||||
</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>This parser does not (yet) support the IEC recommendations for binary prefixes (i.e. "kibibyte (KiB)", "mebibyte (MiB)", etc).</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 demo includes the stored metric values within the table cells, toggle the view using the button below.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>In <span class="version update">v2.22.2</span>,
|
||||
<ul>
|
||||
<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>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>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>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>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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This parser will convert numbers with metric prefixes ("Mega", "Giga", etc) into appropriate values so they are sorted correctly.</li>
|
||||
<li>The base name must be included in the header:
|
||||
<ul>
|
||||
<li>The base is the unit of measure, such as "byte", "meter", "liter", etc.</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><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> & <code>data-metric-name-abbr</code> instead.</li>
|
||||
<li>If no base information is found, it will default to <code>m|meter</code>.</li>
|
||||
</ul>
|
||||
</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>This parser does not (yet) support the IEC recommendations for binary prefixes (i.e. "kibibyte (KiB)", "mebibyte (MiB)", etc).</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 demo includes the stored metric values within the table cells, toggle the view using the button below.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
@ -132,4 +132,3 @@ $(function(){
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter - Named Numbers Parser</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter - Named Numbers Parser</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -42,20 +42,20 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<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>This parser will convert named numbers into appropriate values so they are sorted correctly.</li>
|
||||
<li>Named numbers include values:
|
||||
<ul>
|
||||
<li>zero to twenty; by one ("one", "two", "three", ..., "nineteen", "twenty")</li>
|
||||
<li>twenty to hundred; by ten ("twenty", "thirty", "forty", ... "ninety", "hundred")</li>
|
||||
<li>thousand (1e3) to duotrigintillion (1e99); by 10^(3n+3) value ("thousand", "million", "billion", ... "untrigintillion", "duotrigintillion")</li>
|
||||
<li>googl (1e100)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<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>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<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>This parser will convert named numbers into appropriate values so they are sorted correctly.</li>
|
||||
<li>Named numbers include values:
|
||||
<ul>
|
||||
<li>zero to twenty; by one ("one", "two", "three", ..., "nineteen", "twenty")</li>
|
||||
<li>twenty to hundred; by ten ("twenty", "thirty", "forty", ... "ninety", "hundred")</li>
|
||||
<li>thousand (1e3) to duotrigintillion (1e99); by 10^(3n+3) value ("thousand", "million", "billion", ... "untrigintillion", "duotrigintillion")</li>
|
||||
<li>googl (1e100)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggleparsedvalue">Toggle parsed values</button>
|
||||
@ -154,4 +154,3 @@ $(function(){
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Roman Numeral Parser</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Roman Numeral Parser</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<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>
|
||||
</tbody>
|
||||
</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>
|
||||
<div>
|
||||
@ -226,8 +227,6 @@
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
// add parsed values to order & value column
|
||||
@ -235,5 +234,6 @@ $(function(){
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Writing custom parsers</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Writing custom parsers</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -58,42 +58,42 @@ $(function() {
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div class="tip">
|
||||
<p class="tip">
|
||||
Notes about the <code>addParser</code> template:
|
||||
<ul>
|
||||
<li>The <code>id</code> block is required and must be unique.</li>
|
||||
<li>The <code>is</code> block will allow the parser to be used for autodetecting the parser
|
||||
<ul>
|
||||
<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>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>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>In version 2.7.4, the <code>is</code> block became optional because most parsers just return false.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>format</code> block is used to normalize your data and return it to the plugin for sorting
|
||||
<ul>
|
||||
<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>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>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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>parsed</code> block (added <span class="version">v2.15.0</span>)
|
||||
<ul>
|
||||
<li>This parameter is a flag used by the filter widget.</li>
|
||||
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
|
||||
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
|
||||
<li>Currently, only the parsers for inputs, checkboxes and selects have this parameter set to <code>true</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>type</code> block sets the type of sort to use:
|
||||
<ul>
|
||||
<li>Set it to either <code>"text"</code> or <code>"numeric"</code>.</li>
|
||||
<li>This tells the plugin the type of sorter to use.</li>
|
||||
<li>Text type sorting uses a natural sort and is a tiny bit slower than a pure numeric sort.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</p>
|
||||
<ul>
|
||||
<li>The <code>id</code> block is required and must be unique.</li>
|
||||
<li>The <code>is</code> block will allow the parser to be used for autodetecting the parser
|
||||
<ul>
|
||||
<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>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>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>In version 2.7.4, the <code>is</code> block became optional because most parsers just return false.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>format</code> block is used to normalize your data and return it to the plugin for sorting
|
||||
<ul>
|
||||
<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>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>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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>parsed</code> block (added <span class="version">v2.15.0</span>)
|
||||
<ul>
|
||||
<li>This parameter is a flag used by the filter widget.</li>
|
||||
<li>When <code>true</code>, the filter widget will only search through parsed data for matches.</li>
|
||||
<li>If <code>false</code> (default value), the filter widget will search through the cell text for matches.</li>
|
||||
<li>Currently, only the parsers for inputs, checkboxes and selects have this parameter set to <code>true</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The <code>type</code> block sets the type of sort to use:
|
||||
<ul>
|
||||
<li>Set it to either <code>"text"</code> or <code>"numeric"</code>.</li>
|
||||
<li>This tells the plugin the type of sorter to use.</li>
|
||||
<li>Text type sorting uses a natural sort and is a tiny bit slower than a pure numeric sort.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Add Parser Template</h3>
|
||||
<pre class="prettyprint lang-javascript">$.tablesorter.addParser({
|
||||
@ -154,7 +154,7 @@ $(function() {
|
||||
<h1>HTML</h1>
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> Assigning the parser using a class name was added in version 2.0.11 (it is not part of the original plugin; use the <code>headers</code> option in older versions).
|
||||
<p>
|
||||
</p>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
@ -168,4 +168,3 @@ $(function() {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Sort table using a link outside the table</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Sort table using a link outside the table</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -100,12 +100,12 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<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 <span class="version">v2.17.0</span>, added sorton values (a)scending, (d)escending, (n)ext, (s)ame & (o)pposite. Use the demo below help understand how to use these settings.</li>
|
||||
<li>In v2.9, a "sort" event can be triggered on the header cell to toggle the sort.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<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 <span class="version">v2.17.0</span>, added sorton values (a)scending, (d)escending, (n)ext, (s)ame & (o)pposite. Use the demo below help understand how to use these settings.</li>
|
||||
<li>In v2.9, a "sort" event can be triggered on the header cell to toggle the sort.</li>
|
||||
</ul>
|
||||
|
||||
<div id="demo">
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Triggers sortStart and sortEnd</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Triggers sortStart and sortEnd</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -1108,4 +1108,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Update headers & table body (updateAll)</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Update headers & table body (updateAll)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -63,12 +63,12 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>This demo uses the <code>updateAll</code> method (<span class="version">v2.8</span>).</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>
|
||||
<li>The <code>update</code> method only updates the cache from the <code>tbody</code>.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>This demo uses the <code>updateAll</code> method (<span class="version">v2.8</span>).</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>
|
||||
<li>The <code>update</code> method only updates the cache from the <code>tbody</code>.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Updating a table cell</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Updating a table cell</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -55,12 +55,12 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Click on any value in the Total column to change it to a random amount.</li>
|
||||
<li>This option is part of the original plugin.</li>
|
||||
<li>Automatic resorting after "updateCell" is triggered was added in version 2.0.14.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Click on any value in the Total column to change it to a random amount.</li>
|
||||
<li>This option is part of the original plugin.</li>
|
||||
<li>Automatic resorting after "updateCell" is triggered was added in version 2.0.14.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><table class="tablesorter">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Align Character Widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Align Character Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -452,4 +452,3 @@ $(function(){
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
@ -148,12 +148,12 @@
|
||||
|
||||
<p class="tip">
|
||||
<span class="label label-info">NOTE!</span>
|
||||
<ul>
|
||||
<li>This demo uses <a href="http://getbootstrap.com/2.3.2/">Bootstrap v2.x</a> (v2.3.2 specifically).</li>
|
||||
<li>Hover over the thick grey bar under the header to reveal the filter row.</li>
|
||||
<li>For more information like revision history of this theme & 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>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>This demo uses <a href="http://getbootstrap.com/2.3.2/">Bootstrap v2.x</a> (v2.3.2 specifically).</li>
|
||||
<li>Hover over the thick grey bar under the header to reveal the filter row.</li>
|
||||
<li>For more information like revision history of this theme & 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>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- 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>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
@ -151,43 +151,43 @@
|
||||
|
||||
<p class="tip">
|
||||
<span class="label label-info">NOTE!</span>
|
||||
<ul>
|
||||
<li><span class="label label-success">New!</span>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
|
||||
<ul>
|
||||
<li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</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>And of course include the necessary Bootstrap image or font).</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>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>
|
||||
</ul>
|
||||
</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>Make sure to include the <code>{icon}</code> in the <code>headerTemplate</code> to add a sorting arrow to the headers.</li>
|
||||
<li>Added in v2.7!
|
||||
<ul>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code.</li>
|
||||
<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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the Bootstrap theme saved to <code>$.tablesorter.themes.bootstrap</code>.</li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo shows how to get around an issue with the filter widget:
|
||||
<ul>
|
||||
<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>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>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 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>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li><span class="label label-success">New!</span>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
|
||||
<ul>
|
||||
<li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</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>And of course include the necessary Bootstrap image or font).</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>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>
|
||||
</ul>
|
||||
</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>Make sure to include the <code>{icon}</code> in the <code>headerTemplate</code> to add a sorting arrow to the headers.</li>
|
||||
<li>Added in v2.7!
|
||||
<ul>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code.</li>
|
||||
<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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the Bootstrap theme saved to <code>$.tablesorter.themes.bootstrap</code>.</li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <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>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo shows how to get around an issue with the filter widget:
|
||||
<ul>
|
||||
<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>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>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 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>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- 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>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Build Table Widget</title>
|
||||
<title>jQuery tablesorter 2.0 - Build Table Widget</title>
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Chart Widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Chart Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -701,4 +701,3 @@ $(function(){
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Column Selector Widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Column Selector Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -512,7 +512,7 @@ $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );<
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<p></p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
@ -692,4 +692,3 @@ $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );<
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Columns Style Widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Columns Style Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.2.6.min.js"></script>
|
||||
@ -82,14 +82,14 @@ $(function() {
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<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>Older versions of this widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
|
||||
<li>The original "widgetColumns" option has been replaced by "widgetOptions.columns". See the javascript block below for more details (v2.1).</li>
|
||||
<li>Table header and footer rows now get updated with the columns widget classes. Check out the "grey" theme to see (v2.4).</li>
|
||||
<li>This demo page is running jQuery v1.2.6.</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<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>Older versions of this widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
|
||||
<li>The original "widgetColumns" option has been replaced by "widgetOptions.columns". See the javascript block below for more details (v2.1).</li>
|
||||
<li>Table header and footer rows now get updated with the columns widget classes. Check out the "grey" theme to see (v2.4).</li>
|
||||
<li>This demo page is running jQuery v1.2.6.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Choose Theme:
|
||||
@ -224,4 +224,3 @@ table.tablesorter-blue tr.even td.tertiary {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -217,7 +217,7 @@ $(function() {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p>
|
||||
<p></p>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
@ -534,4 +534,3 @@ $(function() {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Content Editable</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Content Editable</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -597,4 +597,3 @@ $(function() {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -129,18 +129,18 @@ tr.group-header.collapsed td i {
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Added <code>filter_childWithSibs</code> in <span class="version">v2.23.4</span>, to see what it does:
|
||||
<ul>
|
||||
<li>Search the "Stock" (<button class="search" type="button" data-column="2">11%</button>) or "Price" (<button class="search" type="button" data-column="3"><$10</button>) column.</li>
|
||||
<li>Use the "Toggle" button to change the setting.</li>
|
||||
<li>When <code>filter_childWithSibs</code> is <code>false</code>, only the child rows that match the filter are visible.</li>
|
||||
<li>When it is <code>true</code>, all sibling child rows will be visible.</li>
|
||||
<li>The parent row will always be visible.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Added <code>filter_childWithSibs</code> in <span class="version">v2.23.4</span>, to see what it does:
|
||||
<ul>
|
||||
<li>Search the "Stock" (<button class="search" type="button" data-column="2">11%</button>) or "Price" (<button class="search" type="button" data-column="3"><$10</button>) column.</li>
|
||||
<li>Use the "Toggle" button to change the setting.</li>
|
||||
<li>When <code>filter_childWithSibs</code> is <code>false</code>, only the child rows that match the filter are visible.</li>
|
||||
<li>When it is <code>true</code>, all sibling child rows will be visible.</li>
|
||||
<li>The parent row will always be visible.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<p></p>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -295,4 +295,3 @@ $.extend($.tablesorter.language, {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -483,4 +483,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -635,4 +635,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -170,7 +170,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<p></p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button class="reset">Reset Search</button>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -95,16 +95,17 @@
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<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><span class="label warning">*NOTE*</span> - Selectmenu will not work properly in all circumstances:
|
||||
<ul>
|
||||
<li>When an "updateAll" method is triggered on the table, the filter row is removed & replaced due to the possibility of a column being added or removed. Selectmenu initialization will need to be performed again.</li>
|
||||
<li>If using selectmenu along with a widget that constantly removes & rebuilds extra table headers & filter rows (e.g. the scroller widget), the selectmenu initialization will need to be performed again, or just avoid using those widgets.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<em>NOTE!</em>
|
||||
</p>
|
||||
<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><span class="label warning">*NOTE*</span> - Selectmenu will not work properly in all circumstances:
|
||||
<ul>
|
||||
<li>When an "updateAll" method is triggered on the table, the filter row is removed & replaced due to the possibility of a column being added or removed. Selectmenu initialization will need to be performed again.</li>
|
||||
<li>If using selectmenu along with a widget that constantly removes & rebuilds extra table headers & filter rows (e.g. the scroller widget), the selectmenu initialization will need to be performed again, or just avoid using those widgets.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget</title>
|
||||
<title>jQuery tablesorter 2.0 - Filter Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<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 "abc", "abcd", "abcde", etc);<button data-filter-column="1">Aaron</button> (finds "Aaron" and "Philip Aaron Wong")</td></tr>
|
||||
</tbody>
|
||||
</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">(3)</span> In tablesorter <span class="version">v2.10</span>, comparisons can be made in date columns (if properly parsed).
|
||||
</li>
|
||||
@ -381,6 +381,7 @@ $(function(){
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
The filter cell (<code><td></code>) is not to be confused with the <code>filter_cssFilter</code> option which adds an extra class name to the filter inputs (<code><input></code>).
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -734,11 +735,12 @@ $.extend($.tablesorter.language, {
|
||||
<li>
|
||||
<span class="label warning">Warning</span> These language values are added to a regular expression using <code>new RegExp()</code>:
|
||||
<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>. \ + * ? [ ^ ] $ ( ) { } = ! < > | : -</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>):
|
||||
<pre class="prettyprint lang-js">function escapeRegExp( string ) {
|
||||
return string.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' );
|
||||
}</pre></li>
|
||||
}</pre>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Formatter Widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Formatter Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -214,7 +214,7 @@ function prettyDate(date){
|
||||
<tbody>
|
||||
<!-- 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>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>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>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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 -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -115,15 +115,15 @@ tr.group-header.collapsed td i {
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>As of <span class="version updated">v2.15.12</span>,
|
||||
<ul>
|
||||
<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.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
</p>
|
||||
<ul>
|
||||
<li>As of <span class="version updated">v2.15.12</span>,
|
||||
<ul>
|
||||
<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.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget</title>
|
||||
<title>jQuery tablesorter 2.0 - Grouping Rows Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - headerTitles widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - headerTitles widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -318,4 +318,3 @@ headerTitle_output_nosort : 'No sort available'</pre>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Lazyload widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Lazyload widget</title>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
@ -125,6 +125,7 @@
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
<tr><th colspan="3">jQuery scrollstop plugin option</th></tr>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Math Widget</title>
|
||||
<title>jQuery tablesorter 2.0 - Math Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Output Widget</title>
|
||||
<title>jQuery tablesorter 2.0 - Output Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager Widget - Ajax</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Pager Widget - Ajax</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -177,23 +177,23 @@
|
||||
<div id="main">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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 ">30" and a descending sort, but neither is applied as this demo is not connected a server (just a basic JSON file).</li>
|
||||
<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>
|
||||
<p>
|
||||
</li>
|
||||
<li>The "ID" column has a default filter setting of ">30" and a descending sort, but neither is applied as this demo is not connected a server (just a basic JSON file).</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
Original Ajax url: <span id="origurl"></span><br>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Pager Widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Pager Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -231,27 +231,27 @@
|
||||
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<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.19.0</span>, added <code>pageAndSize</code> method which allows setting both the pager page & 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>
|
||||
</p>
|
||||
<ul>
|
||||
<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.19.0</span>, added <code>pageAndSize</code> method which allows setting both the pager page & 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>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>
|
||||
<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>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>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>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<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>
|
||||
<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>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>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>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h1>Triggered Events</h1>
|
||||
<ul id="display">
|
||||
@ -475,4 +475,3 @@ td.tablesorter-pager {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Print Widget</title>
|
||||
<title>jQuery tablesorter 2.0 - Print Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
@ -309,7 +309,7 @@ print_callback : function( config, $table, printStyle ) {
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<p></p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><div class="print button">Print</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Table Reflow Widget</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Table Reflow Widget</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<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>
|
||||
|
||||
<p>
|
||||
<p></p>
|
||||
|
||||
<h1>Demo <small>(Pick a table width or resize the browser window)</small></h1>
|
||||
<div id="demo"><h3>Reflow widget only</h3>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Table Reflow Widget (beta)</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Table Reflow Widget (beta)</title>
|
||||
|
||||
<!-- demo -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery plugin: Tablesorter 2.0 - Table Reflow Widget (beta)</title>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Table Reflow Widget (beta)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user