deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-02 22:53:17 +02:00
Code Issues Releases Wiki Activity
Page: 1.05 Drop down filter
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
12 1.05 Drop down filter
koalyptus edited this page 2019-06-07 21:59:10 +10:00
Property Type Description Remarks Example
clear_filter_text string or array sets "Clear" text in drop-down list; (default - 'Clear') var tfConfig = { clear_filter_text: ['Display all', '[Clear]'] }
enable_slc_reset_filter boolean if set false the 1st option is removed (default - true) var tfConfig = { enable_slc_reset_filter: false }
on_change boolean filters the table as you change the value of a drop-down list (default * true) var tfConfig = { on_change: false }
sort_select boolean|array if set true, it will sort the options in all the drop-down filters. As an array it will only sort the filter options of specified columns (default - true) 
var tfConfig = { sort_select: true };
// or
var tfConfig = { sort_select: [1, 3] };
filter_options_sorter object specify the columns implementing a custom sorter sorting the filters options (only `select`, `multiple` and `checklist` filter types) (default - null) It accepts a col and comparer properties, ie: 
filter_options_sorter: {
  col: [1, 5],
  comparer: [
    function(a, b) { 
      // compare function logic here, 
      // return -1, 0 or positive number 
      return 0; 
    },
    function(a, b) { return -1; }
  ]
}

var tfConfig = {
  col_0: 'select',
  col_3: 'checklist', 
  filter_options_sorter: {
    col: [0, 3], 
    comparer: [
      function(a, b) { return a - b; },
      function(a, b) { return b - a; }
    ]
  }
}
sort_filter_options_asc array this property sorts a filter options in ascending order based on the column's data type. It accepts an array containing column indexes ([0, 2]) var tfConfig = { sort_filter_options_asc: [1, 2] }
sort_filter_options_desc array this property sorts a filter options in descending order based on the column's data type. It accepts an array containing column indexes ([0, 2]) var tfConfig = { sort_filter_options_desc: [1, 2] }
multiple_slc_tooltip string tooltip text appearing on multiple drop-down filters (default - 'Use Ctrl key for multiple selections') var tfConfig = {
col_0: "multiple",
multiple_slc_tooltip: "Press Ctrl key in order to select multiple values" }
load_filters_on_demand boolean if set true, drop-down filters will be populated at first use only This feature improves performances with large data tables. This option was called fill_slc_on_demand in previous HTML Table Filter Generator library. var tfConfig = { load_filters_on_demand: true }
activate_slc_tooltip string tooltip text appearing on drop-downs when load_filters_on_demand property is set true (default - 'Click to activate') This property is used only by IE to inform users to click on filter in order to activate it. var tfConfig = {
load_filters_on_demand: true, activate_slc_tooltip: "Click to activate filter" }
enable_empty_option boolean if set true, it will add the empty criteria option to drop-down filters (default - false) var tfConfig = { enable_empty_option: true }
empty_text string defines the text for the empty criteria option (default * '(Empty)') var tfConfig = { empty_text: '<Empty values>' }
enable_non_empty_option boolean if set true, it will add the non-empty criteria option to drop-down filters (default - false) var tfConfig = { enable_non_empty_option: true }
non_empty_text string defines the text for the non-empty criteria option (default - '(Non empty)') var tfConfig = { non_empty_text: '<Non-empty values>' }

Events

Assuming TableFilter is already instantiated: 

var tf = new TableFilter('my-table-id');
Event Description Remarks Example
before-populating-filter Event emitted just before starting populating a filter Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • colIndex - index of the filter's column
 
	tf.emitter.on(['before-populating-filter'], function(tf, colIndex){ 
	  console.log(tf, colIndex);
	});
after-populating-filter Event emitted when the filter is populated Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • colIndex - index of the filter's column
  • element - filter's DOM element
 
	tf.emitter.on(['after-populating-filter'], function(tf, colIndex, element){ 
	  console.log(tf, colIndex, element);
	});
filter-focus Event emitted when a filter receives focus Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • element - filter's DOM element
 
	tf.emitter.on(['filter-focus'], function(tf, element){ 
	  console.log(tf, element);
	});

Website | Examples | Es6 documentation