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)

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
}

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