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.
Option | Description |
---|---|
formatter_column | 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 } |
formatter_event | 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 |
---|---|---|---|
Superman | Bugatti Veyron | Duckie | 1/1/2015 |
Flash | Hennessey Venom | Horse | 12/22/2014 |
Batman | Koenigsegg Agera | Elephant | 3/10/2010 |
Green Lantern | SSC Ultimate Aero | Cow | 5/5/2012 |
Howard the Duck | Koenigsegg CCX | Pizza | 1/1/2005 |
Wonder Woman | McLaren F1 | Tiger | 3/1/2013 |