deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-03 15:13:15 +02:00
Code Issues Releases Wiki Activity
Page: 1.02 Main features
Pages
1.0 Configuration 1.01 Appearance 1.02 Main features 1.03 Grid layout 1.04 Paging 1.05 Drop down filter 1.06 Checklist filter 1.07 Rows counter 1.08 Loading indicator 1.09 Submit and reset button 1.10 Status bar 1.11 Data types 1.12 Themes 1.13 Help instructions 1.14 Popup filters 1.15 No results message 1.16 Highlight keywords 1.17 State 1.18 Mark active columns 1.19 Toolbar 1.20 Single filter 2.0 TableFilter class 2.1 Public properties 2.2 Public methods 3.0 Extensions 3.1 Advanced grid 3.1 Sort 3.2 Column operations 3.3 Filters visibility 3.4 Columns visibility 4. Filter operators Home Obsolete TODO
19 1.02 Main features
koalyptus edited this page 2018-02-11 19:53:17 +11:00
Table of Contents

Properties

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:

  • tf is the current TableFilter instance
  • cell is the current cell from which data is retrieved
  • index is the current column index
 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:

  • custom_options["cols"] contains the indexes of columns containing drop-downs to be populated (integer array)
  • custom_options["texts"] contains the text of each option (string array)
  • custom_options["values"] contains the value of each option (string array)
  • custom_options["sorts"] enables/disables drop-down sorting (boolean array)
 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...'] }

Callbacks

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:

  • o is the current TableFilter instance
  • k is the current row index
 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:
  • o is the current TableFilter instance
  • the current index of filtered column
 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:
  • o is the current TableFilter instance
  • the current index of filtered column
 var tfConfig = { on_after_active_column: function(o, colIndex){ alert(colIndex); } }

Events

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 - current TableFilter instance
 
	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 - current TableFilter instance
  • colIndex - current column index
 
	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 - current TableFilter instance
  • colIndex - current column index
 
	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 - current TableFilter instance
 
	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 - current TableFilter instance
  • searchArgs - current search arguments
 
	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 - current TableFilter instance
  • colIndex - current column index
  • cell - current cell DOM element
 
	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 - current TableFilter instance
  • rowIndex - current row index
  • validRowsIndex - current validRows array index
  • isValid - current row matches filters search terms
 
	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 - current TableFilter instance
  • rowIndex - current row index
 
	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 - current TableFilter instance
 
	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 - current TableFilter instance
 
	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 - current TableFilter instance
  • elm - current filter DOM element
 
	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 - current TableFilter instance
  • elm - current filter DOM element
 
	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 - current TableFilter instance
  • fltRow - current row DOM element containing the filters
 
	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 - current TableFilter instance
 
	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 - current TableFilter instance
 
	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 - current TableFilter instance
 
	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 - current TableFilter instance
 
	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 - current TableFilter instance
 
	tf.emitter.on(['destroy'], function(tf){ 
	  console.log(tf);
	});

Website | Examples | Es6 documentation