Notes

  • In 2.15.7,
    • Sorry for all of these breaking changes, I should have left this widget in beta.
    • The headerTitle_prefix, headerTitle_text, headerTitle_numeric options has been replaced, in lieu of the new ouput options; sorry for no deprecation notice.
    • Added headerTitle_useAria, headerTitle_tooltip, headerTitle_output_sorted, headerTitle_output_unsorted, headerTitle_output_nosort, headerTitle_cur_text, headerTitle_cur_numeric, headerTitle_nxt_text, headerTitle_nxt_numeric, headerTitle_type & headerTitle_callback options. See the options section below for more details.
    • Added "refreshHeaderTitle" method to force the widget to update.
  • This widget adds a title to the table headers when they are sorted.
  • Click on any header. You may have to move the mouse off, then back on the header to see the title appear.
  • This widget will not work with the original tablesorter plugin (v2.0.5).

Options

OptionDefaultDescription
headerTitle_useAria false When true, the headers titles are extracted from the aria-label. The text in that label is built from the $.tablesorter.language option.
headerTitle_tooltip "" Add a (tooltip) class name to the header, yeah you could have used the cssHeader option to do the same thing, but this option allows adding classes using an array. 
headerTitle_tooltip : [ 'tooltip-text', 'tooltip-text', 'tooltip-numeric', 'tooltip-numeric', '', 'tooltip-text']
headerTitle_cur_text
headerTitle_cur_numeric 		(see description) When any of the header title output options use the {current} 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.

The array must contain text for ascending, descending and unsorted state (in that order). Defaults: 
headerTitle_cur_text     : [ ' sort: A - Z', ' sort: Z - A', 'ly unsorted' ],
headerTitle_cur_numeric  : [ ' sort: 0 - 9', ' sort: 9 - 0', 'ly unsorted' ]
headerTitle_nxt_text
headerTitle_nxt_numeric 		(see description) When any of the header title output options use the {next} 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.

The array must contain text for when the next state is ascending, descending and unsorted (in that order). Defaults: 
headerTitle_nxt_text     : [ ' sort: A - Z', ' sort: Z - A', 'remove sort' ],
headerTitle_nxt_numeric  : [ ' sort: 0 - 9', ' sort: 9 - 0', 'remove sort' ]
headerTitle_output_sorted
headerTitle_output_unsorted
headerTitle_output_nosort 		(see description) Set the output string for each sort condition: sorted, unsorted or sorting disabled.

Each of these option strings can include a {name}, {current} and {next} tag.
  • The {name} tag is replaced by the header text.
  • The {current} tag is replaced by the type-appropriate text from either the headerTitle_cur_text or headerTitle_cur_numeric option.
  • The {next} tag is replaced by the type-appropriate text from either the headerTitle_nxt_text or headerTitle_nxt_numeric option.
Defaults: 
headerTitle_output_sorted   : 'current{current}; activate to {next}',
headerTitle_output_unsorted : 'current{current}; activate to {next} ',
headerTitle_output_nosort   : 'No sort available'
Note: the reason "activate" is used instead of "click" is because the user can also Tab to the header cell and press Enter to initiate a sort.
headerTitle_type [] Each column type is determined by the parser type 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.

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. 
headerTitle_type : ['', '', '', '', '', 'text']
headerTitle_callback null 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 $cell (the header cell as a jQuery object), and the processed text (txt). The function must return the text! 
headerTitle_callback : function($cell, txt) {
    return txt;
}
In this demo, you will notice that this function is used to dynamically update the tooltip.

Method

Force headerTitle widget update

If you need to programmically force the header title to update, trigger a refreshHeaderTitle event on the table: 
$('table').trigger('refreshHeaderTitle');
In this demo, this method is used when switching between the default header title and aria-label text.

Demo

Tooltip plugin using togglable aria-label text

: true
First NameLast NameAgeTotalDiscountDate
PeterParker28$9.9920%Jan 18, 2001 9:12 AM
JohnEvans33$9.9925%Dec 10, 2002 5:14 AM
ClarkKent22$15.8944%Jan 12, 2003 11:14 AM
BruceAlmighty45$15.8944%Jan 18, 2001 9:12 AM
BruceEvans22$13.1911%Jul 6, 2006 8:14 AM

Tooltip plugin with alternative titles

First NameLast NameAgeTotalDiscountDate
PeterParker28$9.9920%Jan 18, 2001 9:12 AM
JohnEvans33$9.9925%Dec 10, 2002 5:14 AM
ClarkKent22$15.8944%Jan 12, 2003 11:14 AM
BruceAlmighty45$15.8944%Jan 18, 2001 9:12 AM
BruceEvans22$13.1911%Jul 6, 2006 8:14 AM

No Tooltip Plugin

First NameLast NameAgeTotalDiscountDate
PeterParker28$9.9920%Jan 18, 2001 9:12 AM
JohnEvans33$9.9925%Dec 10, 2002 5:14 AM
ClarkKent22$15.8944%Jan 12, 2003 11:14 AM
BruceAlmighty45$15.8944%Jan 18, 2001 9:12 AM
BruceEvans22$13.1911%Jul 6, 2006 8:14 AM

Javascript