Permalink
Browse files

data fixes & performance improvements

  • Loading branch information...
1 parent 0b1a411 commit 83ccdb2bde48ad9d6cdfbe12141edfc75c848ad2 @Mottie committed May 19, 2012
View
Binary file not shown.
@@ -25,9 +25,9 @@
// or to change the format for specific columns, add the dateFormat to the headers option:
headers: {
- 0: { sorter: "shortDate" }, // dateFormat will parsed as the default above
- 1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // set day first format
- 2: { sorter: "shortDate", dateFormat: "yyyymmdd" } // set year first format
+ 0: { sorter: "shortDate" } //, dateFormat will parsed as the default above
+ // 1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // set day first format; set using class names
+ // 2: { sorter: "shortDate", dateFormat: "yyyymmdd" } // set year first format; set using data attributes (jQuery data)
}
});
@@ -49,6 +49,15 @@
<li>The dateFormat option will ONLY work with the <code class="hilight">shortDate</code> parser.</li>
<li>The date can be separated by any of the following: slash, dash, period, comma, space(s) or tab (/-., ).</li>
<li>This date format parser will only work with a four digit year. You can <a href="example-parsers.html">write your own</a> if you need a two digit year parser.</a>
+ <li>In versions 2.3+, columns can be disabled using any of the following methods, in order of priority:
+ <ul>
+ <li>jQuery data <code class="hilight">data-sorter="false"</code> (see the Javascript block below on how to set it directly).</li>
+ <li>metadata <code class="hilight">class="{ sorter: false }"</code>. This requires the metadata plugin.</li>
+ <li>headers option <code class="hilight">headers : { 0 : { sorter: false } }</code>.</li>
+ <li>header class name <code class="hilight">class="sorter-false"</code>.</li>
+ <li>overall <code class="hilight">dateFormat</code> option setting.</li>
+ </ul>
+ </li>
</ul>
</p>
@@ -57,8 +66,8 @@
<thead>
<tr>
<th>Date MMDDYYYY</th>
- <th>Date DDMMYYYY</th>
- <th>Date YYYYMMDD</th>
+ <th class="sorter-shortDate dateFormat-ddmmyyyy">Date DDMMYYYY</th>
+ <th data-sorter="shortDate" data-date-format="yyyymmdd">Date YYYYMMDD</th>
</tr>
</thead>
<tbody>
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>jQuery plugin: Tablesorter 2.0 - Lock sort order using header options</title>
+ <title>jQuery plugin: Tablesorter 2.0 - Lock sort order</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
@@ -24,10 +24,6 @@
0: {
// lock the sort order of the first column to ascending (always Bruce to Peter when sorting on that column)
lockedOrder: 'asc'
- },
- 2: {
- // lock the sort order of the third column to descending (always 45 to 18 when sorting on that column)
- lockedOrder: 'desc'
}
}
});
@@ -36,27 +32,37 @@
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
- <h2>Lock sort order using header options</h2>
+ <h2>Lock sort order</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p class="tip">
- <em>TIP!</em> Sort the first and third columns to see how the sort is locked. Override this by using the multisort key (shift) while clicking on the header.<br>
- <em>NOTE!</em> This option was part of the original plugin, but it was broken.
+ <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, in order of priority (v2.3+):
+ <ul>
+ <li>jQuery data <code class="hilight">data-lockedorder="asc"</code>. (equivalent to <code class="hilight">data-locked-order="asc"</code>).</li>
+ <li>metadata <code class="hilight">class="{ lockedOrder: 'asc'}"</code>. This requires the metadata plugin.</li>
+ <li>headers option <code class="hilight">headers : { 0 : { lockedOrder: 'asc' } }</code>.</li>
+ <li>header class name <code class="hilight">class="lockedOrder-asc"</code>.</li>
+ </ul>
+ </li>
+ </ul>
</p>
-
<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
- <th>Age</th>
+ <th data-lockedOrder="desc">Age</th> <!-- added as data-lockedOrder, but the DOM changes it to data-lockedorder -->
<th>Total</th>
- <th>Discount</th>
+ <th class="lockedOrder-desc">Discount</th>
<th>Date</th>
</tr>
</thead>
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>jQuery plugin: Tablesorter 2.0 - Set initial sort order using header options</title>
+ <title>jQuery plugin: Tablesorter 2.0 - Set initial sort order</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
@@ -26,9 +26,7 @@
// pass the headers argument and passing a object
headers: {
// set initial sort order by column, this headers option setting overrides the sortInitialOrder option
- 0: { sortInitialOrder: 'desc' },
- 2: { sortInitialOrder: 'desc' },
- 4: { sortInitialOrder: 'desc' }
+ 0: { sortInitialOrder: 'desc' }
}
});
@@ -37,14 +35,26 @@
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
- <h2>Set initial sort order using header options</h2>
+ <h2>Set initial sort order</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p class="tip">
- <em>NOTE!</em> The functionality to add a "sortInitialOrder" inside of the "headers" option was added in version 2.0.8 (not part of the original plugin).
+ <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, in order of priority:
+ <ul>
+ <li>jQuery data <code class="hilight">data-sort-initial-order="desc"</code> (equivalent to <code class="hilight">data-sortinitialorder="desc"</code>).</li>
+ <li>metadata <code class="hilight">class="{ sortInitialOrder: "desc" }"</code>. This requires the metadata plugin.</li>
+ <li>headers option <code class="hilight">headers : { 0 : { sortInitialOrder: "desc" } }</code>.</li>
+ <li>header class name <code class="hilight">class="sortInitialOrder-desc"</code>.</li>
+ <li>overall <code class="hilight">sortInitialOrder</code> option setting.</li>
+ </ul>
+ </li>
+ </ul>
</p>
<h1>Demo</h1>
@@ -53,9 +63,9 @@
<tr>
<th>First Name</th>
<th>Last Name</th>
- <th>Age</th>
+ <th class="sortInitialOrder-desc">Age</th>
<th>Total</th>
- <th>Discount</th>
+ <th data-sortinitialorder="desc">Discount</th> <!-- equivalent to data-sortInitialOrder="desc" or data-sort-initialorder="desc" -->
<th>Date</th>
</tr>
</thead>
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
- <title>jQuery plugin: Tablesorter 2.0 - Disable sort using headers options</title>
+ <title>jQuery plugin: Tablesorter 2.0 - Disable sort</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
@@ -18,16 +18,15 @@
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function(){
+
+ // BONUS TIP: disable a column using jQuery data directly
+ // but do it before the table initializes
+ $("table thead th:eq(5)").data("sorter", false);
+
$("table").tablesorter({
- // pass the headers argument and passing a object
headers: {
- // assign the secound column (we start counting zero)
- 1: {
- // disable it by setting the property sorter to false
- sorter: false
- },
- // assign the third column (we start counting zero)
- 2: {
+ // disable sorting of the first column (we start counting at zero)
+ 0: {
// disable it by setting the property sorter to false
sorter: false
}
@@ -38,20 +37,36 @@
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
- <h2>Disable sort using headers options</h2>
+ <h2>Disable sort</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
+
+ <p class="tip">
+ <em>NOTE!</em>
+ <ul>
+ <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, in order of priority:
+ <ul>
+ <li>jQuery data <code class="hilight">data-sorter="false"</code> (see the Javascript block below on how to set it directly).</li>
+ <li>metadata <code class="hilight">class="{ sorter: false }"</code>. This requires the metadata plugin.</li>
+ <li>headers option <code class="hilight">headers : { 0 : { sorter: false } }</code>.</li>
+ <li>header class name <code class="hilight">class="sorter-false"</code>.</li>
+ </ul>
+ </li>
+ </ul>
+ </p>
+
<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
- <th>Age</th>
+ <th data-sorter="false">Age</th>
<th>Total</th>
- <th>Discount</th>
+ <th class="sorter-false">Discount</th>
<th>Date</th>
</tr>
</thead>
@@ -31,7 +31,19 @@
<div id="main">
<p class="tip">
- <em>NOTE!</em> This functionality was added in version 2.0.11 (it is not part of the original plugin).
+ <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, in order of priority:
+ <ul>
+ <li>jQuery data <code class="hilight">data-sorter="text"</code> (see the Javascript block below on how to set it directly).</li>
+ <li>metadata <code class="hilight">class="{ sorter: "text" }"</code>. This requires the metadata plugin.</li>
+ <li>headers option <code class="hilight">headers : { 0 : { sorter: "text" } }</code>.</li>
+ <li>header class name <code class="hilight">class="sorter-text"</code>.</li>
+ </ul>
+ </li>
+ </ul>
</p>
<h1>Demo</h1>
@@ -80,10 +80,16 @@
<p class="tip">
<em>NOTE!</em>
<ul>
- <li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
- <li>Added filter header option and class name to allow disabling the filter in a specific column in v2.0.19.1.</li>
- <li>The Discount column has the "filter-false" class added to the header - see the HTML on how to add this ability.</li>
- <li>The Date column has the "headers" option applied to disable the sort and the filter - see the table options in the javascript for this example.</li>
+ <li>As of tablesorter version 2.3, this widget <strong>can no longer be applied to the original plugin</strong>. Get the "jquery.tablesorter.widgets.js" file from a version prior to 2.3 to get a widget that works with the original plugin.</li>
+ <li>In version 2.0.19.1, a filter header option and header class name check was added to allow disabling the filter in a specific column.</li>
+ <li>In versions 2.3+, the filter widget can be disabled using any of the following methods, in order of priority:
+ <ul>
+ <li>jQuery data <code class="hilight">data-filter="false"</code>.</li>
+ <li>metadata <code class="hilight">class="{ filter: false }"</code>. This requires the metadata plugin.</li>
+ <li>headers option <code class="hilight">headers : { 0 : { filter: false } }</code>.</li>
+ <li>header class name <code class="hilight">class="filter-false"</code>.</li>
+ </ul>
+ </li>
<li>Replaced <code class="hilight">widgetFilterChildRows</code> option with <code class="hilight">widgetOptions.filter_childRows</code>. <span class="tip"><em>New! v2.1</em></span></li>
<li>Added <code class="hilight">widgetOptions.filter_startsWith</code> option, which when <code class="hilight">true</code>, allows you to search the table from the starting of the table cell text. Use the toggle button to see the difference, and that it can be dynamically changed! <span class="tip"><em>New! v2.1</em></span></li>
<li>Added <code class="hilight">widgetOptions.filter_cssFilter</code> option, which allows you to defined the css class applied to the filter row and each search input. <span class="tip"><em>New! v2.1</em></span></li>
View
@@ -259,9 +259,9 @@
<li><a href="example-child-rows.html">Child rows; how to add rows that sort with their parent row</a></li>
<li><a href="example-child-rows-filtered.html">Child rows + filter widget; how they work together</a></li>
<li><a href="example-option-sort-order.html">Direction of initial sort</a></li>
- <li><a href="example-options-headers.html">Disable sort using headers options</a></li>
- <li><a href="example-options-headers-locked.html">Lock sort order using header options</a></li>
- <li><a href="example-options-headers-order.html">Set initial sort order using header options</a></li>
+ <li><a href="example-options-headers.html">Disable sort</a></li>
+ <li><a href="example-options-headers-locked.html">Lock sort order</a></li>
+ <li><a href="example-options-headers-order.html">Set initial sort order</a></li>
<li><a href="example-option-sortreset-sortrestart.html">Using sortReset &amp; sortRestart options</a></li>
<li><a href="example-option-sort-empty.html">Sorting empty cells</a> (v2.1.11)</li>
<li><a href="example-option-sort-key.html">Change the default multi-sorting key</a></li>
Oops, something went wrong.

0 comments on commit 83ccdb2

Please sign in to comment.