-
Notifications
You must be signed in to change notification settings - Fork 95
1.02 Main features
koalyptus edited this page Feb 11, 2018
·
19 revisions
Property | Type | Description | Remarks | Example |
---|---|---|---|---|
grid | boolean | enables / disables filters generation (default - true) | var tfConfig = { grid: false } |
|
col_{n} | string | generates a filter type in specified column (replace "{n}" by column index). Possible values: "input", "select", "multiple", "checklist", "none" (default: "input") | var tfConfig = { col_2: "none", col_3: "select", col_4: "multiple",
col_5: "checklist"} |
|
filters_row_index | number | this property defines in which row the filters grid will be generated: 0 (before table headers) or 1 (after table headers) | var tfConfig = { filters_row_index: 1 } |
|
enter_key | boolean | enables / disables "enter" key for validation (default * true) | var tfConfig = { enter_key: false } |
|
cell_parser | object | define the columns that implement a custom cell parser in order to populate selection filter types (default - { cols: [], parse: function(){} }) |
3 parameters are sent to the parse function:
|
var tfConfig = { col: [0, 3], cell_parser: { parse: function(tf, cell, index) {
alert('Cell parser function returns the cell value with custom logic!'); }} |
custom_options | object |
this literal object is used to define the options of a desired drop-down filter It needs the following properties:
|
Check this example. | var tfConfig = { custom_options: { cols:[3,5],
texts: [[],['1500 - 2000','2000 - 5000','5000
* 15000','15000 - 25000']],
values: [ ['Perl','C++','Suite'],
['>=1500 && <=2000','>2000 && <=5000','>5000 && <=15000','>15000 &&
<=25000'] ], sorts: [false,false]
} }; |
exact_match | boolean | if set true, only exact matches will be displayed (default - false) | note that this is not case sensitive | var tfConfig = { exact_match: true } |
columns_exact_match | array | specify on a column basis exact match filtering (default - []) | note that this is not case sensitive | var tfConfig = { columns_exact_match: [true, false, true, false] } |
case_sensitive | boolean | if set true terms matching become case sensitive (default - false) | var tfConfig = { case_sensitive: true } |
|
ignore_diacritics | boolean or array | if set true filtering will disregard diacritics (default - false) | note it also accepts an array allowing the behaviour to be enabled on a column basis |
var tfConfig = { ignore_diacritics: true } or var tfConfig = { ignore_diacritics: [true, false, true] }
|
alternate_rows | boolean | if set true, it enables alternating rows background color (default * false) | var tfConfig = { alternate_rows: true } |
|
exclude_rows | array | exclude desired rows from TableFilter operations such as filtering, paging, rows counting etc. It accepts an array definining the row indexes to be excluded ([1,2,3..]) | since those rows are excluded, the corresponding values will not appear in the drop-down filters. | var tfConfig = { exclude_rows: [9, 10] } |
linked_filters | boolean | if set true this property modifies the filtering behaviour: drop-down filters become linked and the linked filter will displays only the filtered data (default - false). | var tfConfig = { linked_filters: true } |
|
disable_excluded_options | boolean | When linked_filters is enabled, if set true this property disables the excluded options (default * false). | This feature was suggested by zehnplus. | var tfConfig = { refresh_filters: true, disable_excluded_options: true } |
auto_filter | boolean|object | if set true this property enables the 'filter as you type' behaviour (default - false) | table is filtered when user stops typing |
var tfConfig = { auto_filter: true }; // or var tfConfig = { auto_filter: {} }; |
auto_filter.delay | number | defines the filtering delay in milliseconds (default - 900) | when user stops typing, table is filtered after defined delay |
var tfConfig = { auto_filter: { delay: 250 } }; |
external_flt_ids | array | this array contains the id of the elements that will contain the generated filters. The indexes of the array items match the indexes ot the columns of the table ( ['id0','id1','id02'] corresponds to col0, col1, col2) (default - null) |
var tfConfig = { external_flt_ids: ['id0','id1','id2']
} |
|
or_operator | string | defines the or operator that enables multiple keywords searches on a column (default - '||') | var tfConfig = { or_operator: ',' } |
|
enable_icons | boolean | it makes the toolbar icons visible by default, paging and clear filters button (default - true) | Makes the configuration object a little bit less verbose | var tfConfig = { enable_icons: false } |
watermark | array or string | if used as an array, a different text can be defined for each input filter (default - '') | var tfConfig = { watermark: ['Search...', null, 'Dates
here...'] } |
Property | Type | Description | Remarks | Example |
---|---|---|---|---|
on_before_filter | function | Callback fired before filtering starts | var tfConfig = { on_before_filter: function(o){ alert('Calls
function before filtering starts!!!'); } |
|
on_after_filter | function | Callback fired after filtering is completed | var tfConfig = { on_after_filter: function(o){ alert('Calls
function after filtering process!!!'); } |
|
on_filters_loaded | function | Callback fired just after filters instantiation | var tfConfig = { on_filters_loaded: function(o){ alert('Calls
function after filters generation!!!'); } |
|
on_row_validated | function | Callback fired after a row is validated (default - null) |
note that 2 parameters are sent to the callback:
|
var tfConfig = { on_row_validated: function(o, k){ alert('Calls
function after a row is validated!!! Validated row nb = '+k ); } |
on_before_active_column | function | Callback fired before column header is marked as active (default - null) | note that 2 parameters are sent to the function:
|
var tfConfig = { on_before_active_column: function(o, colIndex){
alert(colIndex); } } |
on_after_active_column | function | Callback fired after column header is marked as active (default - null) | note that 2 parameters are sent to the function:
|
var tfConfig = { on_after_active_column: function(o, colIndex){
alert(colIndex); } } |
Assuming TableFilter
is already instanciated:
var tf = new TableFilter('my-table-id');
Event | Description | Remarks | Example |
---|---|---|---|
initialized | Event emitted just after TableFilter initialization |
Subscribers receives the following parameters:
|
tf.emitter.on(['initialized'], function(tf){ console.log(tf); }); |
before-filter-init | Event emitted just before a filter is generated during TableFilter initialization |
Subscribers receives the following parameters:
|
tf.emitter.on(['before-filter-init'], function(tf, colIndex){ console.log(tf, colIndex); }); |
after-filter-init | Event emitted just after a filter is generated during TableFilter initialization |
Subscribers receives the following parameters:
|
tf.emitter.on(['after-filter-init'], function(tf, colIndex){ console.log(tf, colIndex); }); |
before-filtering | Event emitted just before the filtering process starts |
Subscribers receives the following parameters:
|
tf.emitter.on(['before-filtering'], function(tf){ console.log(tf); }); |
after-filtering | Event emitted just after the filtering process is completed |
Subscribers receives the following parameters:
|
tf.emitter.on(['after-filtering'], function(tf, searchArgs){ console.log(tf, searchArgs); }); |
cell-processed | Event emitted after a cell is processed by the filtering process |
Subscribers receives the following parameters:
|
tf.emitter.on(['cell-processed'], function(tf, colIndex, cell){ console.log(tf, colIndex, cell); }); |
row-processed | Event emitted after a row is processed by the filtering process |
Subscribers receives the following parameters:
|
tf.emitter.on(['row-processed'], function(tf, rowIndex, validRowsIndex, isValid){ console.log(tf, rowIndex, validRowsIndex, isValid); }); |
row-validated | Event emitted after a row is validated by the filtering process, that is, when a row matches the search terms |
Subscribers receives the following parameters:
|
tf.emitter.on(['row-processed'], function(tf, rowIndex){ console.log(tf, rowIndex); }); |
before-clearing-filters | Event emitted just before the filters are cleared |
Subscribers receives the following parameters:
|
tf.emitter.on(['before-clearing-filters'], function(tf){ console.log(tf); }); |
after-clearing-filters | Event emitted just after the filters are cleared |
Subscribers receives the following parameters:
|
tf.emitter.on(['after-clearing-filters'], function(tf){ console.log(tf); }); |
filter-focus | Event emitted when a input filter type receives focus |
Subscribers receives the following parameters:
|
tf.emitter.on(['filter-focus'], function(tf, elm){ console.log(tf, elm); }); |
filter-blur | Event emitted when a input filter type looses focus |
Subscribers receives the following parameters:
|
tf.emitter.on(['filter-blur'], function(tf, elm){ console.log(tf, elm); }); |
filters-row-inserted | Event emitted after the filters row is inserted into the table's headers |
Subscribers receives the following parameters:
|
tf.emitter.on(['filters-row-inserted'], function(tf, fltRow){ console.log(tf, fltRow); }); |
before-loading-extensions | Event emitted just before extensions are being asynchronously loaded |
Subscribers receives the following parameters:
|
tf.emitter.on(['before-loading-extensions'], function(tf){ console.log(tf); }); |
after-loading-extensions | Event emitted just after loading the extensions |
Subscribers receives the following parameters:
|
tf.emitter.on(['after-loading-extensions'], function(tf){ console.log(tf); }); |
before-loading-themes | Event emitted just before the required stylesheets are being asynchronously loaded |
Subscribers receives the following parameters:
|
tf.emitter.on(['before-loading-themes'], function(tf){ console.log(tf); }); |
after-loading-themes | Event emitted just after loading the required stylesheets |
Subscribers receives the following parameters:
|
tf.emitter.on(['after-loading-themes'], function(tf){ console.log(tf); }); |
destroy | Event emitted when TableFilter instance is destroyed |
Subscribers receives the following parameters:
|
tf.emitter.on(['destroy'], function(tf){ console.log(tf); }); |