Docs: clarify difference between jQuery data & data-attributes

This commit is contained in:
Mottie 2015-02-03 13:23:02 -06:00
parent 17c30f1710
commit 8ff560e00f
2 changed files with 12 additions and 6 deletions

View File

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Disable or set the column parser using jQuery data</title>
<title>jQuery plugin: Tablesorter 2.0 - Disable or set the column parser using data</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
@ -18,13 +18,19 @@
<script src="../js/jquery.tablesorter.js"></script>
<script id="js">$(function(){
$("table").tablesorter({ theme: 'blue' });
// set Discount column parser using jQuery data (either 'digit' or 'percent' will work)
$('th.discount').data('sorter', 'digit');
// set an initial sort on the table using jQuery data
$('table').data('sortlist', [[4,0]]);
// the rest of the parsers are set using the header cell data-attribute
$('table').tablesorter({ theme: 'blue' });
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Disable or set the column parser using jQuery data</h2>
<h2>Disable or set the column parser using data</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
@ -42,7 +48,7 @@
<th data-sorter="text">Last Name</th>
<th data-sorter="false">Age</th>
<th data-sorter="currency" data-string="min">Total</th> <!-- data-string="min" treats strings in this numeric column as a large negative number -->
<th data-sorter="percent" data-empty="top">Discount</th> <!-- data-empty="top" sorts empty cells to the top -->
<th class="discount" data-empty="top">Discount</th> <!-- data-empty="top" sorts empty cells to the top -->
<th data-sorter="usLongDate">Date</th>
</tr>
</thead>

View File

@ -380,7 +380,7 @@
<li><a href="example-option-digits.html">Dealing with digits!</a></li>
<li><a href="example-options-headers-digits-strings.html">Dealing with text strings in numerical sorts</a> (<a href="#stringto"><code>stringTo</code></a>; v2.0.10)</li>
<li><a href="example-parsers-class-name.html">Disable or set the column parser using class names</a> (v2.0.11)</li>
<li><a href="example-parsers-jquery-data.html">Disable or set the column parser using jQuery Data</a> (v2.3)</li>
<li><a href="example-parsers-jquery-data.html">Disable or set the column parser using data</a> (v2.3)</li>
<li><a href="example-extractors-parsers.html">Using extractors with parsers</a> (<span class="version">v2.17.6</span>)</li>
<li><a href="example-option-date-format.html">Changing the date format</a> (v2.0.23)</li>
</ul>
@ -1290,7 +1290,7 @@ From the example function above, you'll end up with something similar to this HT
sortList : [[1,0], [2,0]] // initial sort columns (2nd and 3rd)
});
});</pre>
This option can also be set using jQuery data (v2.3.1) or metadata on the table:
This option can also be set using data-attributes (v2.3.1), jQuery data or metadata on the table:
<table class="info">
<tfoot>
<tr><td colspan="2"><strong>** Note</strong>: <code>data-sortlist</code> data is not supported in jQuery versions older than 1.4.</td></tr>