Notes

  • This widget will only work in tablesorter version 2.16+ and jQuery version 1.7+.
  • It allows you to add custom formatting to table columns.
  • You have the option of storing the original cell text within the table cell data-attribute to maintain the sort order.
  • This widget is not optimized for large tables; but it only runs on initialization and after any updates have occurred.

Options

Formatter widget default options (added inside of tablesorter widgetOptions)

TIP! Click on the link in the function column to reveal full details (or toggle|show|hide all) or double click to update the browser location.
OptionDescription
Assign a formatting function by column index or column header class name; these functions only apply to the tbody cells.

Set up the formatter to return the HTML for the table cell.
formatter_column: {
	'.emphasize' : function( text, data ) {
		return '' + text + '';
	}
}
If the text in the cell is to be changed, but you don't want the sort to be effected, then add the original text into the data-attribute as follows:
formatter_column: {
	'.makesearch' : function( text, data ) {
		// don't make a link if there is no text in the cell
		if ( text === '' ) { return ''; }
		// add text to data-attribute; this overrides the parser
		data.$cell.attr( data.config.textAttribute, text );
		// then replace text with a link
		return 'Get Definition';
	}
}
The data parameter provided to the formatter_column function contains the following information:
data = {
	config      : table.config,
	wo          : table.config.widgetOptions,
	$header     : $('th'),  // the header cell of the current column
	$row        : $('tr'),  // jQuery object of the row currently being processed
	$cell       : $('td'),  // jQuery object of the cell currently being processed
	text        : 'Batman', // the text from the current cell
	columnIndex : 0         // the column index of the current cell
}
The formatter will update when this event is triggered on the table.

The default setting is 'applyFormatter'

The formatter is set up to run again after an "updateComplete" or "pagerComplete" event fires; this option allows setting a custom-named event to force the formatter to update in addition to the complete events.

* NOTE * So, if the text in the cell gets modified by the formatter, make sure your code saves the original text into the data-attribute or it will get lost.

Force an update as follows:
$('table').trigger('applyFormatter');

Demo

Super Hero Super Car Image Links Added
SupermanBugatti VeyronDuckie1/1/2015
FlashHennessey VenomHorse12/22/2014
BatmanKoenigsegg AgeraElephant3/10/2010
Green LanternSSC Ultimate AeroCow5/5/2012
Howard the DuckKoenigsegg CCXPizza1/1/2005
Wonder WomanMcLaren F1Tiger3/1/2013

Javascript


	

CSS


	

HTML