Documentation

HTML Table Filter Generator is no longer maintained, it is now replaced by the TableFilter project. Don't hesitate to check the demos out in their new location along with exhaustive documentation in the project's WIKI.

Configuration Object Properties

In the following tables you will find all the properties you can use to configure the filter grid bar with a configuration object ( var tfConfig = { property: value }):

Filter grid bar appearance

Property Type Description Remarks Example
base_path string new defines the path to the script's directory (default: 'TableFilter/')   var tfConfig = { base_path: 'myDir/' }
stylesheet string new defines the global stylesheet (default: 'filtergrid.css')   var tfConfig = { stylesheet: 'myDir/myStylesheet.css' }
fixed_headers boolean enables / disables fixed headers and table body scrolling (default -false) Table needs to have thead and tbody tags defined. Table headers are fixed with a light css solution. It doesn't seem to work on browsers such as Opera and Chrome. In any case, it is not the intent of this script to implement a fully tested solution for generating fixed headers. A simple and easy alternative is to place a table with same number of columns and widths above the data table and use the external_flt_grid property to generate filters in the corresponding columns (external_flt_grid_ids)! Check this example. var tfConfig = { fixed_headers: true }
tbody_height number defines the height of the table body when fixed headers are enabled (default - 200)   var tfConfig = { fixed_headers: true, tbody_height: 300 }
filters_cell_tag string specifies the tag of the cell containing a filter ('td' / 'th')   var tfConfig = { filters_cell_tag: 'th' }
col_width array this property defines column widths. It accepts an array containing width values (['150px','10%'])   var tfConfig = { col_width: ["150px","15%",null,null] }
inf_div_css_class string defines the css class of div containing paging elements, rows counter etc. This div contains the paging elements, subdivided in 3 divs (left, middle and right). var tfConfig = { inf_div_css_class: "myclass" }
left_div_css_class string defines the css class of left div This div contains the rows counter var tfConfig = { left_div_css_class: "myclass" }
right_div_css_class string defines the css class of right div This div contains the Clear button and the results per page drop-down list if paging is enabled var tfConfig = { right_div_css_class: "myclass" }
middle_div_css_class string defines the css class of middle div This div contains the pages drop-down list and paging navigation buttons var tfConfig = { middle_div_css_class: "myclass" }
flts_row_css_class string defines the css class of filters row   var tfConfig = { flts_row_css_class: "myclass" }
flt_css_class string defines the css class of filters (inputs and selects)   var tfConfig = { flt_css_class: "myclass" }
flt_small_css_class string defines the css class of smaller filters (if validation button is generated in the same column of a filter)   var tfConfig = { flt_small_css_class: "myclass" }
flt_multi_css_class string defines css class of multiple select filters   var tfConfig = { flt_multi_css_class: "myclass" }
single_flt_css_class string defines the css class of the single filter when the single_search_filter property is on   var tfConfig = { single_flt_css_class: "myclass" }
highlight_css_class string defines the css class of highlighted keywords   var tfConfig = { highlight_css_class: "myclass" }
even_row_css_class string defines the css class for even rows   var tfConfig = { even_row_css_class: "myclass" }
odd_row_css_class string defines the css class for odd rows   var tfConfig = { odd_row_css_class: "myclass" }
input_watermark_css_class string defines the css class of the watermark in input filters (default - fltWatermark)   var tfConfig = { input_watermark_css_class: "myclass" }
active_columns_css_class string defines the css class of the active column headers (default - activeHeader)   var tfConfig = { active_columns_css_class: "myclass" }
Top of page

Filter grid bar behaviours

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). These are the 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 }
mod_filter_fn function depracated calls another function instead of the default method ( TF.Filter() ) at submission   var tfConfig = { mod_filter_fn: function(){ alert('Calls another function!!!'); myTFObj.Filter(); }}
on_before_filter function calls defined function before filtering starts   var tfConfig = { on_before_filter: function(o){ alert('Calls function before filtering starts!!!'); }
on_after_filter function calls defined function after filtering is completed   var tfConfig = { on_after_filter: function(o){ alert('Calls function after filtering process!!!'); }
on_filters_loaded function calls defined function after filters are completely generated   var tfConfig = { on_filters_loaded: function(o){ alert('Calls function after filters generation!!!'); }
on_before_operation function calls defined function before column operations are performed (default - null)   var tfConfig = { on_before_operation: function(o){ alert('Calls function before column operations are performed!!!'); }
on_after_operation function calls defined function after column operations are performed (default - null)   var tfConfig = { on_after_operation: function(o){ alert('Calls function after column operations are performed!!!'); }
on_row_validated function calls specified function after a row is validated (default - null)

note that 2 parameters are sent to the function:

  • o is the current TF object
  • 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 ); }
custom_cell_data_cols array specifies the columns that will use the custom_cell_data event (default - [])   var tfConfig = { custom_cell_data_cols: [0,2,3] };
custom_cell_data function calls specified function for retrieving custom cell data content (default - null)

note that 3 parameters are sent to the function:

  • o is the current TF object
  • cell is the current cell from which data is retrieved
  • index is the current column index

Check this example.

 var tfConfig = { custom_cell_data: function(o,cell,index){ alert('Calls function when cell data is retrieved!!!'); }
exact_match boolean if set true, only exact matches will be displayed (default - false) note that this is case insensitive var tfConfig = { exact_match: true }
match_case boolean if set true filters become case sensitive (default - false)   var tfConfig = { match_case: true }
col_operation object

this literal object performs the following calculations on a specified column:

  • sum
  • mean
  • median
  • min
  • max
  • lower quartile
  • upper quartile

It needs the following properties:

  • colOperation["id"] contains the ids of elements showing result (array)
  • colOperation["col"] contains columns' indexes (array)
  • colOperation["operation"] contains corresponding operation type (array, values: 'sum', 'mean','min','max','median','q1','q3')
  • colOperation["decimal_precision"] (optional) contains corresponding decimal precision (integers array)
  • colOperation["tot_row_index"](optional) if results are displayed in a row of the table this property will make the specified row always visible
  • colOperation["exclude_row"] (optional) excludes desired rows from operation (integers array)
  • colOperation["write_method"] array defines which method to use for displaying the result ('innerHTML', 'setValue', 'createTextNode')
    Note that innerHTML is the default value.

Special credit to Nuovella Williams for optimising the SetColOperation method, adding the "median", "lower quartile" and "upper quartile" calculations.

Check this example.

 var tfConfig = {
    col_operation: {
       id: ["table8Tot1","table8Tot2"],
       col: [2,5],
       operation: ["sum","mean"],
       decimal_precision: [1,2],
       tot_row_index: [9,9],
       write_method: ["innerHTML","setValue"]
    }
}
alternate_rows boolean if set true, it enables alternating rows background color (default - false)   var tfConfig = { alternate_rows: true }
rows_always_visible array this property makes desired rows always visible. It accepts an array definining the row indexes to be displayed ([1,2,3..]) since rows are always visible, cells value will not appear in corresponding drop-down filters. Note that this property works only if paging is disabled var tfConfig = { rows_always_visible: [9,10] }
refresh_filters boolean if set true this property modifies the filtering behaviour: drop-down menus are refreshed and display only the visible options (default - false).   var tfConfig = { refresh_filters: true }
disable_excluded_options boolean When refresh_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 }
on_keyup boolean if set true this property enables the 'filter as you type' behaviour (default - false) table is filtered when user stops typing var tfConfig = { on_keyup: true }
on_keyup_delay number defines the filtering delay in msecs (default - 900) when user stops typing, table is filtered after defined delay var tfConfig = { on_keyup: true, on_keyup_delay: 1500 }
search_type string depracated this property changes the filtering process. If set to 'exclude', rows containing searched string are simply hidden (default - 'include') Depracated, use operator ! instead var tfConfig = { search_type: 'exclude' }
highlight_keywords boolean if set true this property enables keywords highlighting (default - false)   var tfConfig = { highlight_keywords: true }
remember_grid_values boolean if set true this property will re-set filters' values at page reload (default - false)   var tfConfig = { remember_grid_values: true }
remember_page_number boolean if set true this property will re-set the last accessed page at page reload (default - false)   var tfConfig = { remember_page_number: true }
remember_page_length boolean if set true this property will re-set the number of results per page at page re-load (default - false)   var tfConfig = { remember_page_length: true }
single_search_filter boolean if set true this property enables a single criteria search. Only 1 text-box filter will be displayed (single criteria search vs. multi-criteria search) searching in all table columns (default - false)   var tfConfig = { single_search_filter: true }
external_flt_grid boolean if set true this property enables filters generation in desired container elements (default - false)

Check this example.

 var tfConfig = { external_flt_grid: true }
external_flt_grid_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_grid_ids: ['id0','id1','id2'] }
toolbar_target_id string defines the id of the element that will contain the toolbar container, located above the table headers by default (default - null)   var tfConfig = { toolbar_target_id: 'myContainerId' };
status boolean if set true this property displays status messages in the browser's status bar   var tfConfig = { status: true }
or_operator string defines the or operator that enables multiple keywords searches on a column (default - '||')   var tfConfig = { or_operator: ',' }
exec_delay number sets the delay in msecs of filtering process if loader set true (default - 100)   var tfConfig = { exec_delay: 250 }
set_cookie_duration number sets the cookie duration in mms (default - 100000)   var tfConfig = { set_cookie_duration: 250000 }
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 }
input_watermark string defines the watermark text for input type filters (default - '') Same text is set in all input filters var tfConfig = { input_watermark: 'Search...' }
input_watermark array if used as an array, a different text can be defined for each input filter(default - '')   var tfConfig = { input_watermark: ['Search...', null, 'Dates here...'] }
modules_path string defines the path of the modules to be imported by the script (default - 'TF_Modules/')   var tfConfig = { modules_path: 'MyModulesFolder/' }
public_methods boolean if set true this property loads the public methods module and allows developers to use the public methods provided by the script (default - false)   var tfConfig = { public_methods: true }
mark_active_columns boolean column headers are highlighted upon filtering(default - false)   var tfConfig = { mark_active_columns: true }
on_before_active_column function calls specified function before active column header is marked (default - null) note that 2 parameters are sent to the function:
  • o is the current TF object
  • the current index of filtered column
 var tfConfig = { on_before_active_column: function(o, colIndex){ alert(colIndex); } }
on_after_active_column function calls specified function after active column header is marked (default - null) note that 2 parameters are sent to the function:
  • o is the current TF object
  • the current index of filtered column
 var tfConfig = { on_after_active_column: function(o, colIndex){ alert(colIndex); } }
Top of page

Grid layout

Property Type Description Remarks Example
grid_layout boolean enables / disables grid layout generation (default - true)   var tfConfig = { grid_layout: true }
grid_width string this property defines the width of the main container of the grid (default - null)   var tfConfig = { grid_width: '850px' }
grid_height string this property defines the height of the main container of the grid (default - null)   var tfConfig = { grid_height: '400px' }
grid_cont_css_class string defines the css class of the main container of the grid (default - 'grd_Cont')

this div contains the whole grid which comprises:

  • a top div containing the headers' table
  • a middle div containing the data table
  • a bottom div containg the paging elements
 var tfConfig = { grid_cont_css_class: 'myclass' }
grid_tbl_cont_css_class string defines the css class of the container of the data table (default - 'grd_tblCont')   var tfConfig = { grid_tbl_cont_css_class: 'myclass' }
grid_tblHead_cont_css_class string defines the css class of the container of the headers' table (default - 'grd_headTblCont')   var tfConfig = { grid_tblHead_cont_css_class: 'myclass' }
grid_inf_grid_css_class string defines the css class of the bottom div containing the paging elements (default - 'grd_inf')   var tfConfig = { grid_inf_grid_css_class: 'myclass' }
grid_headers_row_index number defines which row contains the column headers (default - 0)   var tfConfig = { grid_headers_row_index:1 }
grid_enable_default_filters boolean enables/disables the filters generation (default - true)   var tfConfig = { grid_enable_default_filters: false }
grid_default_col_width string defines the default column width if no width is defined (default - '100px')   var tfConfig = { grid_default_col_width: "125px" }
grid_enable_cols_resizer boolean enables/disables the columns resizer feature (default - true)   var tfConfig = { grid_enable_cols_resizer: false }
Top of page

Paging

Property Type Description Remarks Example
paging boolean if set true, it will generate a paging feature   var tfConfig = { paging: true }
paging_length number sets # of rows displayed in a page (default - 10)   var tfConfig = { paging_length: 50 }
paging_target_id string defines the id of the element that will contain the paging elements (pages drop-down and navigation buttons) (default - null)   var tfConfig = { paging: true, paging_target_id: 'myContainerId' };
results_per_page array this property enables users to change the number of results per page. Paging property needs to be set true. It accepts an array with the following values:
  • a string containing the results per page label ('Results per page')
  • an array containing the numeric values indicating the results per page options ([25,50,100])
the label is a span element, results per page values are contained in a select element var tfConfig = { results_per_page: ['Results per page',[25,50,100]] };
results_per_page_target_id string defines the id of the element that will contain the results per page drop-down element (default - null)   var tfConfig = { paging: true, results_per_page_target_id: 'myContainerId' };
paging_btns boolean enables / disables paging buttons if paging property set true (default - true)   var tfConfig = { paging: true, paging_btns: false };
page_selector_type string defines the page selector element: drop-down or text-box. 2 possible values: 'select' or 'input'   var tfConfig = { paging: true, page_selector_type: 'input' };
btn_next_page_text string sets 'next page' button's label if paging property set true (default - ">")   var tfConfig = { paging: true, btn_next_page_text: 'Next >' };
btn_prev_page_text string sets 'previous page' button's label if paging property set true (default - "<")   var tfConfig = { paging: true, btn_prev_page_text: '< Prev' };
btn_last_page_text string sets 'last page' button's label if paging property set true (default - ">|")   var tfConfig = { paging: true, btn_last_page_text: 'Last >>' };
btn_first_page_text string sets 'first page' button's label if paging property set true (default - "|<")   var tfConfig = { paging: true, btn_first_page_text: '<| First' };
btn_next_page_html string defines 'next page' button's HTML if paging property set true (default - null) note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribute var tfConfig = { paging: true, btn_next_page_html: '<a href="javascript:;">Next ></a>' };
btn_prev_page_html string defines 'next page' button's HTML if paging property set true (default - null) note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribute var tfConfig = { paging: true, btn_prev_page_html: '<a href="javascript:;">< Previous</a>' };
btn_last_page_html string defines 'next page' button's HTML if paging property set true (default - null) note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribute var tfConfig = { paging: true, btn_last_page_html: '<a href="javascript:;">< Last >|</a>' };
btn_first_page_html string defines 'next page' button's HTML if paging property set true (default - null) note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribute var tfConfig = { paging: true, btn_first_page_html: '<a href="javascript:;"><| First</a>' };
page_text string defines the text preceeding the page selector drop-down (default - ' Page ') var tfConfig = { paging: true, page_text: 'Pg' };
of_text string defines the text after page selector drop-down (default - ' of ') var tfConfig = { paging: true, of_text: ' / ' };
paging_slc_css_class string defines the css class for paging drop-down (default - 'pgSlc')   var tfConfig = { paging_slc_css_class: 'myClass' }
results_slc_css_class string defines the css class of the results per page drop-down (default - 'rspg')   var tfConfig = { results_slc_css_class: 'myClass' }
results_span_css_class string defines the css class for the label preceding the results per page select (default - 'rspgSpan')   var tfConfig = { results_span_css_class: 'myClass' }
paging_btn_css_class string defines the css class for paging buttons (previous,next,etc.) (default - 'pgInp')   var tfConfig = { paging_btn_css_class: 'myClass' }
nb_pages_css_class string defines the css class fo css class for the total nb of pages label (default - 'nbpg')   var tfConfig = { nb_pages_css_class: 'myClass' }
on_before_change_page function calls defined function before page is changed (default - null) note that 2 parameters are passed to the callback function:
  • o is the current TF object
  • index of the page that will be displayed
 var tfConfig = { on_before_change_page: function(o,i){ alert(o.id+' - page index: '+i); }; }
on_after_change_page function calls defined function after page is changed (default - null) note that 2 parameters are passed to the callback function:
  • o is the current TF object
  • index of the page that will be displayed
 var tfConfig = { on_after_change_page: function(o,i){ alert(o.id+' - page index: '+i); }; }
Top of page

Drop-down filters

Property Type Description Remarks Example
display_all_text string sets "display all" text in drop-down list; (default - '')   var tfConfig = { display_all_text: "Display all" }
enable_slc_reset_filter boolean new 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 if set true, it will sort options in the drop-down list(s) (default - true)   var tfConfig = { sort_select: true }
sort_num_asc array this property sets the numeric values of a specified column drop-down filter in ascending order. Columns should only contain numeric values. It accepts an array containing column indexes ([0,2])   var tfConfig = { sort_num_asc: [1,2] }
sort_num_desc array this property sets the numeric values of a specified column drop-down filter in descending order. Columns should only contain numeric values. It accepts an array containing column indexes ([0,2])   var tfConfig = { sort_num_desc: [1,2] }
slc_filling_method string sets the selects' options generation method. It accepts 2 possible values: 'createElement' and 'innerHTML' (default - 'createElement')

The innerHTML filling method doesn't work on IE<=6. IE fails to set the innerHTML property of the select object as described in this article: http://support.microsoft.com/kb/276228.

For large data tables the innerHTML is much faster in terms of performance...

 var tfConfig = { slc_filling_method: 'innerHTML' }}
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" }
fill_slc_on_demand boolean if set true, drop-down filters will be populated at first use only This feature improves script performances at filters grid bar generation.
However, there is a special treatment for IE. Indeed, at first click drop-downs slide out before they are filled with values. This is an unexpeted behavior for users since at 1st click options are empty. Work around:
select is disabled and by clicking on element
(parent td), users enable drop-down and select is
populated at same time and finally slides out. 		var tfConfig = { fill_slc_on_demand: true }
activate_slc_tooltip string tooltip text appearing on drop-downs when fill_slc_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 = {
fill_slc_on_demand: true, activate_slc_tooltip: "Click to activate filter" }
custom_slc_options object

this literal object is used to define the options of a desired drop-down filter

It needs the following properties:

  • custom_slc_options["cols"] contains the indexes of columns containing drop-downs to be populated (integer array)
  • custom_slc_options["texts"] contains the text of each option (string array)
  • custom_slc_options["values"] contains the value of each option (string array)
  • custom_slc_options["sorts"] enables/disables drop-down sorting (boolean array)
 Check this example. var tfConfig = { custom_slc_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] } };
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>' }
Top of page

Checklist filters

Property Type Description Remarks Example
div_checklist_css_class string defines the css class of div containing the checklist filter (default - 'div_checklist')   var tfConfig = { div_checklist_css_class: 'myClass' }
checklist_css_class string defines the css class of the checklist filter itself (default - 'flt_checklist') <ul> tag var tfConfig = { checklist_css_class: 'myClass' }
checklist_item_css_class string defines the css class of a checklist item (default - 'flt_checklist_item') <li> tag var tfConfig = { checklist_item_css_class: 'myClass' }
checklist_selected_item_css_class string defines the css class of a selected checklist item (default - 'flt_checklist_slc_item')   var tfConfig = { checklist_selected_item_css_class: 'myClass' }
activate_checklist_text string text appearing in the checklist filter when fill_slc_on_demand property is set true (default - 'Click to load data')   var tfConfig = {
fill_slc_on_demand: true, activate_checklist_text: "Click to activate filter" }
enable_checklist_reset_filter boolean new if set false the 1st option is removed (default - true)   var tfConfig = { enable_checklist_reset_filter: false }
Top of page

Rows counter

Property Type Description Remarks Example
rows_counter boolean if set true, it will display the total # of rows displayed at the top of the table in left corner (default - false)   var tfConfig = { rows_counter: true }
rows_counter_text string sets text for rows counter label (default - "Data rows: ")   var tfConfig = { rows_counter_text: "Total items: " }
rows_counter_target_id string defines the id of the element that will contain the rows counter label (default - null)   var tfConfig = { rows_counter_target_id: 'myContainerId' }
tot_rows_css_class string defines the css class of the rows counter label container (default - 'tot')   var tfConfig = { tot_rows_css_class: 'myClass' }
on_before_refresh_counter function new callback function called before rows counter is refreshed note that 2 parameters are passed to the callback function:
  • o is the current TF object
  • elm: DOM container element displaying rows counter
 var tfConfig = { on_before_refresh_counter: function(o, elm){ alert('Rows counter is refreshed'); }}
on_after_refresh_counter function new callback function called after filters are cleared note that 3 parameters are passed to the callback function:
  • o is the current TF object
  • elm: DOM container element displaying rows counter
  • tot: total number of filtered rows
 var tfConfig = { on_after_refresh_counter: function(o, elm, tot){ alert('Total number of filtered rows: '+tot); }}
Top of page

Loader

Property Type Description Remarks Example
loader boolean if set true, it will display a "loading" message (default - false)    var tfConfig = { loader: true }
loader_text string sets the text for "loading" message (default - "Loading...")   var tfConfig = { loader_text: "Filtering data..." }
loader_html string defines loader's HTML if loader property set true (default - null)   var tfConfig = { loader:true,
                loader_html: '<img src="loader.gif" alt="" ' +
               'style="vertical-align:middle;" /><h3>Loading...</h3>' }
loader_css_class string defines the css class of the loader's container element  (default - 'loader')   var tfConfig = { loader_css_class: 'myClass' }
loader_target_id string defines the id of the element that will contain the loader (default - null)   var tfConfig = { loader_target_id: 'myContainerId' }
on_show_loader function calls defined function before loader is displayed Useful for creating advanced transition effects during filtering operations var tfConfig = { on_show_loader: function(){ alert('Calls function before loader is opened!!!'); }}
on_hide_loader function calls defined function after loader is hidden Useful for creating advanced transition effects during filtering operations var tfConfig = { on_hide_loader: function(){ alert('Calls function after loader is closed!!!'); }}
Top of page

Validation and reset buttons

Property Type Description Remarks Example
btn boolean if set true shows validation button in the grid (default - false)   var tfConfig = { btn: true}
btn_text string changes the text of the validation button   var tfConfig = { btn_text: "Filter" }
btn_css_class string defines the css class of the validation button   var tfConfig = { btn_css_class: "myClass" }
btn_reset boolean if set true, it will show a "Reset" button at the top-right corner of the table allowing users to re-initialise the table (default - false)   var tfConfig = { btn_reset: true }
btn_reset_target_id string defines the id of the element that will contain the reset button (default - null)   var tfConfig = { btn_reset_target_id: 'myContainerId' }
btn_reset_text string sets text for the "Reset" button (default - "Reset")   var tfConfig = { btn_reset_text: "Clear" }
btn_reset_html string defines 'reset' button HTML if btn_reset property set true (default - null) note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribute var tfConfig = { btn_reset:true,
                btn_reset_html: '<input type="button" value="reset" class="pgInp" />' }
btn_reset_css_class string defines the css class of the reset button   var tfConfig = { btn_reset_css_class: "myClass" }
on_before_reset function new callback function called before filters are cleared note that 2 parameters are passed to the callback function:
  • o is the current TF object
  • filterValues: an array containing the filters' values
 var tfConfig = { on_before_reset: function(o, filterValues){ alert('Filters values to be cleared: '+filterValues); }}
on_after_reset function new callback function called after filters are cleared note that one parameter is passed to the callback function:
  • o is the current TF object
 var tfConfig = { on_after_reset: function(o){ alert('Filters are cleared'); }}
Top of page

Status bar

Property Type Description Remarks Example
status_bar boolean if set true, it will display a "status" message detailing filtering operations (default - false) 

 

 var tfConfig = { status_bar: true}
status_bar_target_id string defines the id of the element that will contain the status bar   var tfConfig = { status_bar_target_id: 'myContainerId' }
status_bar_text string sets the text of the label preceding the "status" message (default - "")   var tfConfig = { status_bar_text: 'Status: ' }
status_bar_css_class string defines the css class of the status' container element  (default - 'status')   var tfConfig = { status_bar_css_class: 'myClass' }
msg_filter string text to display during filtering operation (default - 'Filtering data...')   var tfConfig = { msg_filter: 'Processing...' }
msg_populate string text to display when drop-downs are populated (default - 'Populating filters...')   var tfConfig = { msg_populate: 'Loading column(s) values' }
msg_change_page string text to display when pagination page is changed (default - 'Collecting paging data...')   var tfConfig = { msg_change_page: 'Loading page...' }
msg_clear string text to display when filters are cleared (default - 'Clearing filters...')   var tfConfig = { msg_clear: 'Clearing grid...' }
msg_change_results string text to display when the number of results per page is changed (default - 'Changing results per page...')   var tfConfig = { msg_change_results: 'Calculating results per page...' }
on_before_show_msg function new callback function called before a status message appears note that 2 parameters are passed to the callback function:
  • o is the current TF object
  • msg: the message string
 var tfConfig = { on_before_show_msg: function(o, msg){ alert(msg); }}
on_after_show_msg function new callback function called after a status message appears note that one parameter is passed to the callback function:
  • o is the current TF object
  • msg: the message string
 var tfConfig = { on_after_show_msg: function(o, msg){ alert(msg); }}
Top of page

Date and numeric data

Property Type Description Remarks Example
default_date_type string defines default date type. It accepts the following values: 'DMY', 'MDY', 'YMD', 'DDMMMYYYY' (default - 'DMY')

Supported date types:

  • 31/12/1999, 31\12\1999, 31-12-1999, 31.12.1999
  • 31/12/99, 31\12\99, 31-12-99, 31.12.99
  • 12/31/1999, 12\31\1999, 12-31-1999, 12.31.1999
  • 12/31/99, 12\31\99, 12-31-99, 12.31.99
  • 1999/12/31, 1999\12\31, 1999-12-31, 1999.12.31
  • 31/Dec/1999, 31\Dec\1999, 31-Dec-1999, 31.Dec.1999
 var tfConfig = { default_date_type: 'MDY'}
thousands_separator string defines default thousands separator, 2 possible values: '.' (EU) or ',' (US) (default - ',')   var tfConfig = { thousands_separator: "." }
decimal_separator string defines default decimal separator, 2 possible values: ',' (EU) or '.' (US) (default - '.')   var tfConfig = { decimal_separator: "," }
col_number_format array this array defines the number format by column, 3 possible values: 'EU', 'US' (decimal and thousands separator differences) and 'IPADDRESS'. The indexes of the array items match the indexes of the columns of the table ( [null,'EU','EU','IPADDRESS'] corresponds to col0, col1, col2, col3) (default - null) Check this example. var tfConfig = { col_number_format: [null,'eu','eu', 'ipaddress'] }
col_date_type array this array defines the date format by column, 4 possible values: 'DMY', 'MDY', 'YMD', 'DDMMMYYYY' . The indexes of the array items match the indexes of the columns of the table ( [null,'DMY','YMD','DDMMMYYYY' ] corresponds to col0, col1, col2, col3) (default - null) Check this example. var tfConfig = { col_date_type: [null,'DMY','YMD','DDMMMYYYY' ] }
Top of page

Sort

Note that the table sorting is performed by the WebFX Sortable Table 1.12 script created by Erik Arvidsson. An adapter script (tfAdapter.sortabletable.js) is also loaded automatically in order to combine the two scripts.

Property Type Description Remarks Example
sort boolean if set true, it will make the table columns sortable (default - false) Note that the default sort feature needs a thead and a tbody in order to work var tfConfig = { sort: true }
sort_config object this optional literal object is used to configure the sorting feature.

It needs the following properties:

  • sort_config["name"] defines the name of the object (string, default - 'sortabletable')
  • sort_config["src"] defines the sort script filename to load (string, default - 'sortabletable.js')
  • sort_config["adapter_src"] loads an eventual sort script adapter (string, default - 'tfAdapter.sortabletable.js')
  • sort_config["initialize"] defines the method to call once script is imported (function - default - function(o){ if(o.SetSortTable) o.SetSortTable(); })
  • sort_config["sort_types"] contains an array (matching the number of columns) defining the column data types. Possible values:
    • "String" (original parameter)
    • "Number" (original parameter)
    • "Date" (original parameter)
    • "None" (original parameter)
    • "us" (numeric format for US numbers)
    • "eu" (numeric format for EU numbers)
    • "dmydate" (DMY date format 05/08/2010)
    • "mdydate" (MDY date format 08/05/2010)
    • "ymddate" (YMD date format 2010/08/05)
    • "ddmmmyyyydate" (DDMMMYYYY date format 05-Aug-2010)
    • "ipaddress" (addtional TF parameter for IP addresses)
  • sort_config["sort_col"] sorts a column at load in ascending or descending manner: [colnumber,boolean] (default - null)
  • sort_config["async_sort"] enables/disables an asynchronous sorting (boolean, default - false)
  • sort_config["sort_trigger_ids"] contains an array (matching the number of columns) defining the ids of external element triggering the sort. This is useful when table headers are external to data table

If you don't implement another sorting facility, there is no need to use the sort_config.src, sort_config.adapter_src and sort_config.initialize properties

Sorting feature implementation steps:

  1. Download and extract the Sortable Table extension at same location than tablefilter.js document
  2. Add following lines in the head section of your HTML page:
    <script src="sortabletable.js" language="javascript" type="text/javascript"></script>
    <script src="tfAdapter.sortabletable.js" language="javascript" type="text/javascript"></script>
  3. Make sure your table has a thead and tbody section
  4. set the sort property true in your configuration object and define the sort_types property of the sort_config object in order to define the column data types, or alternatively, define the col_number_format and the col_date_type. Note that there is a column data type resolution mechanism: if the sort_types property is not defined then the script will look for the col_number_format and col_date_type in order to resolve the column types. If there are no column types defined, the default value is 'String'.

Check this example.

 sort_config: {
async_sort:true,
sort_types:['None', 'String', 'Number', 'eu', 'us', 'dmydate', 'mdydate', 'ymddate', 'ddmmmyyyy', 'ipaddress'],
sort_col: [2,false],
sort_trigger_ids:['extTh0', 'extTh1', 'extTh2', 'extTh3', 'extTh4', 'extTh5', 'extTh6', 'extTh7', 'extTh8', 'extTh9']
}
msg_sort string text displayed when a table column is sorted (default - 'Sorting data...')   var tfConfig = { msg_sort: 'Sorting...' }
on_sort_loaded function callback function invoked just after sort script is loaded and sort object instanciated (default - null)

note 2 parameters are sent back:

  • o is the current TF object
  • SortableTable object
 var tfConfig = { on_sort_loaded: function(o, st){ alert(st); } }
on_before_sort function calls defined function before the column is sorted (default - null)

note 2 parameters are sent back:

  • o is the current TF object
  • colIndex is the column index
 var tfConfig = { on_before_sort: function(o, colIndex){ alert('column index '+ colIndex) } }
on_after_sort function calls defined function after the column is sorted (default - null)

note 2 parameters are sent back:

  • o is the current TF object
  • colIndex is the column index
 var tfConfig = { on_after_sort: function(o, colIndex){ alert('column index '+ colIndex) } }
sort_images_path string sets the images path for this extension (default - 'img/'   var tfConfig = { sort_images_path: 'myImages' }
sort_image_blank string sets the default sorting icon filename (default - 'blank.png')   var tfConfig = { sort_image_blank: 'myImage.gif' }
sort_custom_key string sets the custom sort key used to perform a custom sort (default - '_sortKey') This is the name of the cell attribute that will store the value of the cell for sort purposes (<td _sortKey="x">value x</td>. The sorting feature will use 'x' instead of 'value x' in this case var tfConfig = { sort_custom_key: '_mySortKey' }
sort_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 filtergrid.css stylesheet var tfConfig = { sort_image_class_name: 'myClass' }
sort_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 filtergrid.css stylesheet var tfConfig = { sort_image_asc_class_name: 'myClass' }
sort_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 filtergrid.css stylesheet var tfConfig = { sort_image_desc_class_name: 'myClass' }
Top of page

Extensions Manager

The extension manager is in charge of importing scripts or extensions for the current TF object.

Property Type Description Remarks Example
extensions object

this literal object is used to configure the extensions manager which is in charge of loading the desired scripts or extensions. Below a list of the available properties:

  • extensions["name"] defines the names of the scripts to be loaded (array of strings ['name1', 'name2'])
  • extensions["src"] defines the path of the scripts to be imported (array of strings ['script01.js', 'folderName/script02.js'])
  • extensions["description"] provides a short description of the script or extension to be imported (array of strings ['name1 is a test', 'name 2 is a new extension'])
  • extensions["initialize"] defines the callback methods to be invoked once the script or extension is imported (array of functions: [function(o){ initScript01 }, function(o){ o.initScript02(); }])
 Note that the callback methods defined in the initialize property always receive the current TF object as paramater var tfConfig = { extensions: { name:['Test','ColsVisibility'], src:['test.js','TFExt_ColsVisibility/TFExt_ColsVisibility.js'], description:['This is a test','Show/hide columns'], initialize:[function(o){},function(o){ o.SetColsVisibility(); }] } }
msg_load_extensions string text displayed when an extension is loaded (default - 'Loading extensions...')   var tfConfig = { msg_load_extensions: 'Loading add-on...' }
Top of page

Themes Manager

The themes manager provides a stylesheet loading mechanism for the current TF object.

Property Type Description Remarks Example
themes object

this literal object is used to configure the themes manager which is in charge of loading the desired stylesheets. Below a list of the available properties:

  • themes["name"] defines the names of the stylesheets to be loaded (array of strings ['name1', 'name2'])
  • themes["src"] defines the path of the stylesheets to be imported (array of strings ['stylesheet01.css', 'folderName/'stylesheet02.css'])
  • themes["description"] provides a short description of the stylesheet to be imported (array of strings ['name1 is a test', 'name 2 is a new stylesheets'])
  • themes["initialize"] defines the callback methods to be invoked once the stylesheet is imported (array of functions: [function(o){ initScript01 }, function(o){ o.initScript02(); }])
 Note that the callback methods defined in the initialize property always receive the current TF object as paramater

Check this example.

 var tfConfig = { themes: { name:['Stylesheet01','Stylesheet02'], src:['style01.css','Styles/style02.css'], description:['This is a test','Style test 2'], initialize:[function(o){},function(o){ alert(o.themes); }] } }
enable_default_theme boolean if set true, it will load the default theme located in the TF_Themes/Default folder (default - false) Default stylesheet name: TF_Default.css var tfConfig = { enable_default_theme: true }
themes_path string defines the path of the script's themes (default - 'TF_Themes/') The folder that contains the script's stylesheets and images var tfConfig = { themes_path: 'myThemes/' }
msg_load_themes string text displayed when a stylesheets is loaded (default - 'Loading theme(s)...')   var tfConfig = { msg_load_themes: 'Loading my stylesheets..' }
Top of page

Help

Customised instructions can be displayed in the help container.

Property Type Description Remarks Example
help_instructions boolean

enables / disables question mark visibility showing help container element (default - true)

 Note that the help feature is generated automatically unless you set this property to false var tfConfig = { help_instructions: false }
help_instructions_target_id string defines the id of the element containing the instructions button (?) (default - null) By default the ? is generated in the top toolbar var tfConfig = { help_instructions_target_id: 'myContainerId' }
help_instructions_container_target_id string defines the id of the container element for instructions content (default - null)   var tfConfig = { help_instructions_container_target_id: 'myContainerId' }
help_instructions_text string sets the help/instructions text (default - 'Use the filters above each column to filter and limit table data.')   var tfConfig = { help_instructions_text: 'My Help text here...' }
help_instructions_html string sets the help/instructions HTML (default - null)   var tfConfig = { help_instructions_html: '<p>My Help text here...</p><p>Hello world!</p>' }
help_instructions_btn_text string sets the help/instructions button text (default - '?')   var tfConfig = { help_instructions_btn_text: 'Help' }
help_instructions_btn_html string sets the help/instructions button HTML (default - '?') Note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribut var tfConfig = { help_instructions_btn_html: '<button>Help</button>' }
help_instructions_btn_css_class string defines the css class of the help/instructions button (default - 'helpBtn')   var tfConfig = { help_instructions_btn_css_class: 'myCssClass' }
help_instructions_container_css_class string defines the css class of the help/instructions container (default - 'helpBtn')   var tfConfig = { help_instructions_container_css_class: 'myCssClass' }
Top of page

Popup Filters

Filters will popup when a filter icon placed near the column header is clicked.

Property Type Description Remarks Example
popup_filters boolean

enables / disables popup filters type, filters will popup when a filter icon placed near the column header is clicked (default - false)

 var tfConfig = { popup_filters: true }
popup_filters_image string sets the path of the filter icon placed in the header that toggles popup filters (default - 'TF_Themes/icn_filter.gif')   var tfConfig = { popup_filters_image: 'myDir/my_filterIcon.png' }
popup_filters_image_active string sets the path of the filter icon when active (default - 'TF_Themes/icn_filterActive.gif')   var tfConfig = { popup_filters_image_active: 'myDir/my_filterIconActive.png' }
popup_filters_image_html string sets the HTML of the filter icon placed in the header (default - '<img src="'+ this.popUpImgFlt +'" alt="Column filter" />') Note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribut var tfConfig = { popup_filters_image_html: '<img src="myDir/my_filterIcon.png" alt="Toggle filters"/>' }
popup_div_css_class string defines the css class of the popup container (default - 'popUpFilter')   var tfConfig = { popup_div_css_class: 'myCssClass' }
on_before_popup_filter_open function calls specified function before the popup filter is opened (default - null)

Note that 3 parameters are sent to callback function:

  • o is the current TF object
  • popupElm is the element containing the filter
  • colIndex is the column index
 var tfConfig = { on_before_popup_filter_open: function(o,popupElm,colIndex){alert(o +' '+ popupElm +' '+ colIndex); } }
on_after_popup_filter_open function calls specified function after the popup filter is opened (default - null)

Note that 3 parameters are sent to callback function:

  • o is the current TF object
  • popupElm is the element containing the filter
  • colIndex is the column index
 var tfConfig = { on_after_popup_filter_open: function(o,popupElm,colIndex){alert(o +' '+ popupElm +' '+ colIndex); } }
on_before_popup_filter_close function calls specified function before the popup filter is closed (default - null)

Note that 3 parameters are sent to callback function:

  • o is the current TF object
  • popupElm is the element containing the filter
  • colIndex is the column index
 var tfConfig = { on_before_popup_filter_close: function(o,popupElm,colIndex){alert(o +' '+ popupElm +' '+ colIndex); } }
on_after_popup_filter_close function calls specified function after the popup filter is closed (default - null)

Note that 3 parameters are sent to callback function:

  • o is the current TF object
  • popupElm is the element containing the filter
  • colIndex is the column index
 var tfConfig = { on_after_popup_filter_close: function(o,popupElm,colIndex){alert(o +' '+ popupElm +' '+ colIndex); } }
Top of page

Selection and edition (ezEditTable script)

The TF script is now delivered with the ezEditTable script providing inline editing components, advanced selection and keyboard navigation

Property Type Description Remarks Example
ezEditTable_config object

this literal object is used to configure the ezEditTable script which is in charge of providing advanced row and/or cell selection and inline cell editors. Below a list of the available properties:

  • ezEditTable_config["name"] defines the identifier of the scrit to be loaded (string, default - 'ezedittable')
  • ezEditTable_config["src"] defines the path of ezEditTable scripts to be loaded (string - default 'ezEditTable/ezEditTable.js')
  • ezEditTable_config["loadStylesheet"] enables the ezEditTable stylesheet loading (boolean - default false)
  • ezEditTable_config["stylesheet"] defines the path of ezEditTable stylesheet to be loaded (string - default 'ezEditTable/ezEditTable.css')
  • ezEditTable_config["stylesheetName"] the identifier of the stylesheet to be loaded (string, default - 'ezEditTableCss')
  • ...and all the configuration properties of ezEditTable script

Check the ezEditTable documentation section in order to see the available properties.

 var tfConfig = { ezEditTable_config: { name:'ez', src:'myFolder/ez.js', stylesheet:'myFolder/ez.css', loadStylesheet: true, stylesheetName:'ezCss',
//below ezEditTable settings
default_selection: 'both'
}
selectable boolean enables the selection model provided by the ezEditTable script (default - false) Check the ezEditTable selection features: http://edittable.free.fr/doc.php#ez_selection var tfConfig = { selectable: true, ezEditTable_config: { default_selection: 'both', selection_model: 'multiple' }}
editable boolean enables the edition model provided by the ezEditTable script (default - false) Check the ezEditTable edition features: http://edittable.free.fr/doc.php#ez_editable var tfConfig = { editable: true, ezEditTable_config: { default_selection: 'both', editor_model: 'cell' }}
Top of page
E.n.j.o.y. ads-free content!
ezEditTable | © Max Guglielmi
GitHub repo