tablesorter/docs/example-widget-header-titles.html

322 lines
14 KiB
HTML
Raw Normal View History

2014-03-05 23:44:10 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - headerTitles widget</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
2014-03-05 23:44:10 +00:00
<!-- 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-latest.min.js"></script>
2014-03-05 23:44:10 +00:00
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<script src="js/jquery.tipsy.min.js"></script>
2014-03-05 23:44:10 +00:00
<!-- 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({
2014-03-05 23:44:10 +00:00
theme : 'blue',
sortList: [[0,0]],
// third click resets the sort
sortReset: true,
headers : { 4: { sorter: false } },
2014-03-05 23:44:10 +00:00
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
2014-03-05 23:44:10 +00:00
}
});
// 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');
});
2014-03-05 23:44:10 +00:00
});</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>
2014-03-05 23:44:10 +00:00
<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> &amp; <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>
2014-03-05 23:44:10 +00:00
<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>
2014-03-05 23:44:10 +00:00
</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>&quot;&quot;</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>
2014-03-05 23:44:10 +00:00
<h1>Demo</h1>
<div id="demo">
<h3>Tooltip plugin using togglable aria-label text</h3>
<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>
2014-03-05 23:44:10 +00:00
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
</div>
</body>
</html>