Skip to content

3.1 Sort

Jump to bottom Edit New page
koalyptus edited this page Oct 9, 2016 · 14 revisions

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

Clone this wiki locally