321 lines
14 KiB
HTML
321 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>jQuery tablesorter 2.0 - headerTitles widget</title>
|
||
|
|
|
||
|
|
<!-- jQuery -->
|
||
|
|
<script src="js/jquery-latest.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Demo stuff -->
|
||
|
|
<link rel="stylesheet" href="css/jq.css">
|
||
|
|
<link href="css/prettify.css" rel="stylesheet">
|
||
|
|
<link href="css/tipsy.css" rel="stylesheet">
|
||
|
|
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||
|
|
<script src="js/jquery-ui.min.js"></script>
|
||
|
|
<script src="js/prettify.js"></script>
|
||
|
|
<script src="js/docs.js"></script>
|
||
|
|
<script src="js/jquery.tipsy.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Tablesorter: required -->
|
||
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
||
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
||
|
|
|
||
|
|
<!-- Tablesorter: optional -->
|
||
|
|
<script src="../js/widgets/widget-headerTitles.js"></script>
|
||
|
|
|
||
|
|
<script id="js">$(function() {
|
||
|
|
|
||
|
|
var updateTooltips = function($cell, txt) {
|
||
|
|
// dynamically update tipsy
|
||
|
|
if ($cell.is(':hover')) {
|
||
|
|
$cell
|
||
|
|
.attr({ title : txt, 'original-title': txt })
|
||
|
|
// hide, then show the tooltip to force updating & realignment
|
||
|
|
.tipsy('hide')
|
||
|
|
.tipsy('show');
|
||
|
|
}
|
||
|
|
return txt;
|
||
|
|
};
|
||
|
|
|
||
|
|
$("#table1").tablesorter({
|
||
|
|
theme : 'blue',
|
||
|
|
sortList: [[0,0]],
|
||
|
|
headers : { 4: { sorter: false } },
|
||
|
|
widgets: ['zebra', 'headerTitles'],
|
||
|
|
widgetOptions: {
|
||
|
|
headerTitle_useAria : true,
|
||
|
|
// add tooltip class
|
||
|
|
headerTitle_tooltip : 'tooltip',
|
||
|
|
// manipulate the title as desired
|
||
|
|
headerTitle_callback : updateTooltips
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// This table is showing all of the headerTitle widget options
|
||
|
|
$("#table2").tablesorter({
|
||
|
|
theme : 'blue',
|
||
|
|
sortList: [[0,0]],
|
||
|
|
// third click resets the sort
|
||
|
|
sortReset: true,
|
||
|
|
headers : { 4: { sorter: false } },
|
||
|
|
widgets: ['zebra', 'headerTitles'],
|
||
|
|
widgetOptions: {
|
||
|
|
// headerTitle_prefix : 'Sort: ', // option has been deprecated
|
||
|
|
// use aria-label text
|
||
|
|
// e.g. "First Name: Ascending sort applied, activate to apply a descending sort"
|
||
|
|
headerTitle_useAria : false,
|
||
|
|
// add tooltip class
|
||
|
|
headerTitle_tooltip : 'tooltip',
|
||
|
|
// custom titles [ "ascending", "descending", "unsorted" ]
|
||
|
|
headerTitle_cur_text : [ 'Ascending text sort applied', 'Descending text sort applied', 'Currently unsorted' ],
|
||
|
|
headerTitle_cur_numeric : [ 'Ascending numeric sort applied', 'Descending numeric sort applied', 'Currently unsorted' ],
|
||
|
|
headerTitle_nxt_text : [ ' apply ascending text sort', ' apply descending text sort', 'remove sort' ],
|
||
|
|
headerTitle_nxt_numeric : [ ' apply ascending numeric sort', ' apply descending numeric sort', 'remove sort' ],
|
||
|
|
|
||
|
|
// title display; {prefix} adds above prefix
|
||
|
|
// {type} adds the current sort order from above (text or numeric)
|
||
|
|
// {next} adds the next sort direction using the sort order above
|
||
|
|
headerTitle_output_sorted : '{current}; activate to {next}',
|
||
|
|
headerTitle_output_unsorted : '{current}; activate to {next}',
|
||
|
|
headerTitle_output_nosort : 'No sort available',
|
||
|
|
// use this type to override the parser detection result
|
||
|
|
// e.g. use for numerically parsed columns (e.g. dates), but you
|
||
|
|
// want the user to see a text sort, e.g. [ 'text', '', 'numeric' ]
|
||
|
|
// use '' (empty string) to use the default
|
||
|
|
headerTitle_type : ['', '', '', '', '', 'text'],
|
||
|
|
// manipulate the title as desired
|
||
|
|
headerTitle_callback : updateTooltips
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// using defaults, no tooltips
|
||
|
|
$("#table3").tablesorter({
|
||
|
|
theme : 'blue',
|
||
|
|
sortList: [[0,0]],
|
||
|
|
headers : { 4: { sorter: false } },
|
||
|
|
widgets: ['zebra', 'headerTitles']
|
||
|
|
});
|
||
|
|
|
||
|
|
// add tooltip
|
||
|
|
$('.tooltip').tipsy({ gravity: 's' });
|
||
|
|
|
||
|
|
// switch aria mode
|
||
|
|
var $state = $('#usearia'),
|
||
|
|
$table1 = $('#table1'),
|
||
|
|
// first table only
|
||
|
|
wo = $table1[0].config.widgetOptions;
|
||
|
|
$('button').on('click', function() {
|
||
|
|
wo.headerTitle_useAria = !wo.headerTitle_useAria;
|
||
|
|
// show current state in demo
|
||
|
|
$state.text( wo.headerTitle_useAria );
|
||
|
|
// force headerTitles widget to update
|
||
|
|
$table1.trigger('refreshHeaderTitle');
|
||
|
|
});
|
||
|
|
|
||
|
|
});</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="banner">
|
||
|
|
<h1>table<em>sorter</em></h1>
|
||
|
|
<h2>headerTitles Widget</h2>
|
||
|
|
<h3>Flexible client-side table sorting</h3>
|
||
|
|
<a href="index.html">Back to documentation</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="main">
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="accordion">
|
||
|
|
|
||
|
|
<h3><a href="#">Notes</a></h3>
|
||
|
|
<div>
|
||
|
|
<ul>
|
||
|
|
<li>In <span class="version">2.15.7</span>,
|
||
|
|
<ul>
|
||
|
|
<li>Sorry for all of these breaking changes, I should have left this widget in beta.</li>
|
||
|
|
<li>The <code>headerTitle_prefix</code>, <code>headerTitle_text</code>, <code>headerTitle_numeric</code> options has been replaced, in lieu of the new ouput options; sorry for no deprecation notice.</li>
|
||
|
|
<li>Added <code>headerTitle_useAria</code>, <code>headerTitle_tooltip</code>, <code>headerTitle_output_sorted</code>, <code>headerTitle_output_unsorted</code>, <code>headerTitle_output_nosort</code>, <code>headerTitle_cur_text</code>, <code>headerTitle_cur_numeric</code>, <code>headerTitle_nxt_text</code>, <code>headerTitle_nxt_numeric</code>, <code>headerTitle_type</code> & <code>headerTitle_callback</code> options. See the options section below for more details.</li>
|
||
|
|
<li>Added <code>"refreshHeaderTitle"</code> method to force the widget to update.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>This widget adds a title to the table headers when they are sorted.</li>
|
||
|
|
<li>Click on any header. You may have to move the mouse off, then back on the header to see the title appear.</li>
|
||
|
|
<li>This widget will not work with the original tablesorter plugin (v2.0.5).</li>
|
||
|
|
<li>The examples uses the <a href="http://onehackoranother.com/projects/jquery/tipsy/">tipsy jQuery plugin </a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3><a href="#">Options</a></h3>
|
||
|
|
<div>
|
||
|
|
<table class="tablesorter-blue">
|
||
|
|
<colgroup>
|
||
|
|
<col style="width:50px;">
|
||
|
|
<col style="width:120px;">
|
||
|
|
<col>
|
||
|
|
</colgroup>
|
||
|
|
<thead>
|
||
|
|
<tr><th>Option</th><th>Default</th><th>Description</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>headerTitle_useAria</td>
|
||
|
|
<td><code>false</code></td>
|
||
|
|
<td>
|
||
|
|
When <code>true</code>, the headers titles are extracted from the <code>aria-label</code>. The text in that label is built from the <a href="http://mottie.github.io/tablesorter/docs/#variable-language"><code>$.tablesorter.language</code> option</a>.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>headerTitle_tooltip</td>
|
||
|
|
<td><code>""</code></td>
|
||
|
|
<td>
|
||
|
|
Add a (tooltip) class name to the header, yeah you could have used the <a href="http://mottie.github.io/tablesorter/docs/#cssheader"><code>cssHeader</code> option</a> to do the same thing, but this option allows adding classes using an array.
|
||
|
|
<pre class="prettyprint lang-js">headerTitle_tooltip : [ 'tooltip-text', 'tooltip-text', 'tooltip-numeric', 'tooltip-numeric', '', 'tooltip-text']</pre>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
headerTitle_cur_text<br>
|
||
|
|
headerTitle_cur_numeric
|
||
|
|
</td>
|
||
|
|
<td>(see description)</td>
|
||
|
|
<td>
|
||
|
|
When any of the header title output options use the <code>{current}</code> tag, it is replaced by values from either the current ("cur") text or numeric option array as determined by the column unsorted state or sort direction.<br>
|
||
|
|
<br>
|
||
|
|
The array must contain text for ascending, descending and unsorted state (in that order). Defaults:
|
||
|
|
<pre class="prettyprint lang-js">headerTitle_cur_text : [ ' sort: A - Z', ' sort: Z - A', 'ly unsorted' ],
|
||
|
|
headerTitle_cur_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'ly unsorted' ]</pre>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
headerTitle_nxt_text<br>
|
||
|
|
headerTitle_nxt_numeric
|
||
|
|
</td>
|
||
|
|
<td>(see description)</td>
|
||
|
|
<td>
|
||
|
|
When any of the header title output options use the <code>{next}</code> tag, it is replaced by values from either the next ("nxt") text or numeric option array as determined by the column unsorted state or sort direction.<br>
|
||
|
|
<br>
|
||
|
|
The array must contain text for when the next state is ascending, descending and unsorted (in that order). Defaults:
|
||
|
|
<pre class="prettyprint lang-js">headerTitle_nxt_text : [ ' sort: A - Z', ' sort: Z - A', 'remove sort' ],
|
||
|
|
headerTitle_nxt_numeric : [ ' sort: 0 - 9', ' sort: 9 - 0', 'remove sort' ]</pre>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
headerTitle_output_sorted<br>
|
||
|
|
headerTitle_output_unsorted<br>
|
||
|
|
headerTitle_output_nosort
|
||
|
|
</td>
|
||
|
|
<td>(see description)</td>
|
||
|
|
<td>
|
||
|
|
Set the output string for each sort condition: sorted, unsorted or sorting disabled.<br>
|
||
|
|
<br>
|
||
|
|
Each of these option strings can include a <code>{name}</code>, <code>{current}</code> and <code>{next}</code> tag.
|
||
|
|
<ul>
|
||
|
|
<li>The <code>{name}</code> tag is replaced by the header text.</li>
|
||
|
|
<li>The <code>{current}</code> tag is replaced by the type-appropriate text from either the <code>headerTitle_cur_text</code> or <code>headerTitle_cur_numeric</code> option.</li>
|
||
|
|
<li>The <code>{next}</code> tag is replaced by the type-appropriate text from either the <code>headerTitle_nxt_text</code> or <code>headerTitle_nxt_numeric</code> option.</li>
|
||
|
|
</ul>
|
||
|
|
Defaults:
|
||
|
|
<pre class="prettyprint lang-js">headerTitle_output_sorted : 'current{current}; activate to {next}',
|
||
|
|
headerTitle_output_unsorted : 'current{current}; activate to {next} ',
|
||
|
|
headerTitle_output_nosort : 'No sort available'</pre>
|
||
|
|
Note: the reason "activate" is used instead of "click" is because the user can also <kbd>Tab</kbd> to the header cell and press <kbd>Enter</kbd> to initiate a sort.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>headerTitle_type</td>
|
||
|
|
<td><code>[]</code></td>
|
||
|
|
<td>Each column type is determined by the parser <code>type</code> value. So, if you want to override a column default type, set this option with an array with the specified column changed to either "text" or "numeric". This is useful when a date column shows as a numeric sort, but you want your users to see it as a text sort.<br>
|
||
|
|
<br>
|
||
|
|
As seen in the second table initialization code below, if an array element is undefined or an empty string, it will not override the default type.
|
||
|
|
<pre class="prettyprint lang-js">headerTitle_type : ['', '', '', '', '', 'text']</pre>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>headerTitle_callback</td>
|
||
|
|
<td><code>null</code></td>
|
||
|
|
<td>
|
||
|
|
This callback function is executed after the title text string has completed processing. Any additional changes, or modifications can be done within this function. This function has two parameters <code>$cell</code> (the header cell as a jQuery object), and the processed text (<code>txt</code>). The function <strong>must</strong> return the text!
|
||
|
|
<pre class="prettyprint lang-js">headerTitle_callback : function($cell, txt) {
|
||
|
|
return txt;
|
||
|
|
}</pre>In this demo, you will notice that this function is used to dynamically update the tooltip.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3><a href="#">Method</a></h3>
|
||
|
|
<div>
|
||
|
|
<h3>Force headerTitle widget update</h3>
|
||
|
|
If you need to programmically force the header title to update, trigger a <code>refreshHeaderTitle</code> event on the table:
|
||
|
|
<pre class="prettyprint lang-js">$('table').trigger('refreshHeaderTitle');</pre>
|
||
|
|
In this demo, this method is used when switching between the default header title and aria-label text.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1>Demo</h1>
|
||
|
|
<div id="demo">
|
||
|
|
|
||
|
|
<h3>Tooltip plugin using togglable aria-label text</h3>
|
||
|
|
<button type="button">use aria-label</button>: <span id="usearia" class="bright">true</span>
|
||
|
|
|
||
|
|
<table id="table1">
|
||
|
|
<thead>
|
||
|
|
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||
|
|
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||
|
|
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||
|
|
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||
|
|
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>Tooltip plugin with alternative titles</h3>
|
||
|
|
<table id="table2">
|
||
|
|
<thead>
|
||
|
|
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||
|
|
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||
|
|
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||
|
|
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||
|
|
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h3>No Tooltip Plugin</h3>
|
||
|
|
<table id="table3">
|
||
|
|
<thead>
|
||
|
|
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||
|
|
<tr><td>John</td><td>Evans</td><td>33</td><td>$9.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
||
|
|
<tr><td>Clark</td><td>Kent</td><td>22</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
||
|
|
<tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$15.89</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
|
||
|
|
<tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1>Javascript</h1>
|
||
|
|
<div id="javascript">
|
||
|
|
<pre class="prettyprint lang-javascript"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|