14 3.1 Sort

koalyptus edited this page 2016-10-09 14:18:12 +11:00

The sort by column feature relies on WebFX Sortable Table 1.12 by Erik Arvidsson.

To get the sort extension instance:

var sort = tf.extension('sort');

where tf is an instance of TableFilter.

Property	Type	Description	Remarks	Example
name	string	name of the extension, it should match the name of the directory and of the file ('sort')		var tfConfig = { extensions: [{ name: 'sort' }] };
types	array	this array defines the data type on a column basis: string (default column type if none specified) number (unformatted number) formatted-number (defaults to '.' decimal separator and ',' thousands separator) or or an object { type: 'formatted-number', decimal: ',', thousands: '.' } for customisation date defaulting to en locale or or an object { type: 'date', locale: 'en-GB', format: ['{dd}-{months}-{yyyy|yy}'] } for customisation ipaddress (specific to column sorting) caseinsensitivestring (specific to column sorting) none (specific to column sorting)	Note that there is a column data type resolution mechanism: if the types property is not defined the script will look for the global col_types option to resolve the column types. If there are no column types defined, the value will default to 'String'. </td> <td><pre> var tfConfig = { extensions: [{ name: 'sort', types: [ 'string', 'number', 'formatted-number', // defaults to '.' for decimal and ',' for thousands { type: 'formatted-number', decimal: ',', thousands: '.' }, 'date', { type: 'date', locale: 'fr' }, { type: 'date', locale: 'en', format: ['{dd}-{months}-{yyyy|yy}'] }, 'ipaddress' ] }] };
sort_col_at_start	array	sort a column in ascending or descending manner at start (default - null) :	format : [ column number, true|false ] where true sorts one way and false the other. eg True will sort a date column to most recent at the top. false will sort a date column to oldest at the top	var tfConfig = { extensions: [{ name: 'sort', sort_col_at_start: [2, false] }] };
async_sort	boolean	enables/disables an asynchronous sorting (default - false)		var tfConfig = { extensions: [{ name: 'sort', async_sort: true }] };
trigger_ids	array	an array defining the ids of external element triggering the sorting per column. This is useful when table headers are external to data table		var tfConfig = { extensions: [{ name: 'sort', trigger_ids: [ 'extTh0', 'extTh1', 'extTh2', 'extTh3', 'extTh4', 'extTh5' ] }] };
on_sort_loaded	function	callback fired after sort is instantiated (default - null)	2 parameters are sent back: o is the current TableFilter instance SortableTable object	var tfConfig = { extensions: [{ name: 'sort', on_sort_loaded:function(o, st){ alert(st); } }] };
on_before_sort	function	callback fired before the column is sorted (default - null)	note 2 parameters are sent back: o is the current TableFilter instance colIndex is the column index	var tfConfig = { extensions: [{ name: 'sort', on_before_sort:function(o, colIndex){ console.log('column index '+ colIndex); } }] };
on_after_sort	function	callback fired after the column is sorted (default - null)	note 2 parameters are sent back: o is the current TableFilter instance colIndex is the column index	var tfConfig = { extensions: [{ name: 'sort', on_after_sort:function(o, colIndex){ console.log('column index '+ colIndex); } }] };
images_path	string	sets the images path for this extension (default - 'style/themes/')		var tfConfig = { extensions: [{ name: 'sort', images_path: 'path/to/images/' }] };
image_blank	string	sets the default sorting icon filename (default - 'blank.png')		var tfConfig = { extensions: [{ name: 'sort', image_blank: 'myImage.gif' }] };
custom_key	string	sets the custom sort key used to perform a custom sort (default - 'data-tf-sortKey')	This is the name of the attribute that will store the value of the cell for sort purposes (<td data-tf-sortKey="x">value x</td>. The sorting feature will use 'x' instead of 'value x' in this case	var tfConfig = { extensions: [{ name: 'sort', custom_key: '_mySortKey' }] };
image_class_name	string	defines the css class for the sort indicator image when the column is not sorted yet (default - 'sort-arrow')	By default this is a blank image. The default sort-arrow css class is located in the tablefilter.css stylesheet	var tfConfig = { extensions: [{ name: 'sort', image_class_name: 'myClass' }] };
image_asc_class_name	string	defines the css class for the sort indicator image when the column is sorted in ascending fashion (default - 'ascending')	The default ascending css class is located in the tablefilter.css stylesheet	var tfConfig = { extensions: [{ name: 'sort', image_asc_class_name: 'myClass' }] };
image_desc_class_name	string	defines the css class for the sort indicator image when the column is sorted in descending fashion (default - 'descending')	The default descending css class is located in the tablefilter.css stylesheet	var tfConfig = { extensions: [{ name: 'sort', image_desc_class_name: 'myClass' }] };
msg_sort	string	text displayed when a table column is sorted (default - 'Sorting data...')		var tfConfig = { msg_sort: 'Sorting...' }

Website | Examples | Es6 documentation