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.

Table Filter Class

Constructor

TF(id, refRow, config);

Parameter Type Description Remarks Example
id string id of the table element   var myTF = new TF("myTableId");
refRow number  index of the 'reference' row used to calculate the right number of columns and starting point of the filtering process optional parameter var myTF = new TF("myTableId",2);
config object  configuration object optional parameter var myTF = new TF("myTableId",2,{ paging:true });

If you use the setFilterGrid function or the filterable CSS class to generate the filters, the TF object name will be prefixed with 'tf_': 'tf_'+'tableId'.

Configuration Properties

Filter grid bar appearance | Filter grid bar behaviours | Grid layout | Paging | Drop-down filters | Checklist filters | Rows counter | Loader | Validation and reset buttons | Status bar | Date and numeric data | Sort | Help | Popup Filters | Selection and edition (ezEditTable)

Filter grid bar appearance

Property Type Description Remarks Example
basePath string new defines the path to the script's directory (default: 'TableFilter/')   var myTF.basePath: 'myDir/';
stylesheet string new defines the global stylesheet (default: 'filtergrid.css')   var myTF.stylesheet: 'myDir/myStylesheet.css';
fixedHeaders 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. myTF.fixedHeaders = true;
tBodyH number defines the height of the table body when fixed headers are enabled (default - 200)   myTF.fixedHeaders = true;
myTf.tBodyH = 300;
fltCellTag string specifies the tag of the cell containing a filter ('td' / 'th')   myTF.fltCellTag = 'th';
infDivCssClass string defines the css class of div containing paging elements, rows counter etc.   myTF.infDivCssClass = 'myClass';
lDivCssClass string defines the css class of left div This div contains the rows counter myTF.lDivCssClass = 'myClass';
rDivCssClass 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 myTF.rDivCssClass = 'myClass';
mDivCssClass string defines the css class of middle div This div contains the pages drop-down list and paging navigation buttons myTF.mDivCssClass = 'myClass';
fltsRowCssClass string defines the css class of filters row    myTF.fltsRowCssClass = 'myClass';
fltCssClass string defines the css class of filters (inputs and selects)   myTF.fltCssClass = 'myClass';
fltSmallCssClass string defines the css class of smaller filters (if validation button is generated in the same column of a filter)   myTF.fltSmallCssClass = 'myClass';
fltMultiCssClass string defines the css class of multiple select filters   myTF.fltMultiCssClass = 'myClass';
singleFltCssClass string defines the css class of the single filter when the singleSearchFlt property is on   myTF.singleFltCssClass = 'myClass';
highlightCssClass string defines the css class of highlighted keywords myTF.highlightCssClass = 'myClass';
rowBgEvenCssClass string defines the css class for even rows   myTF.rowBgEvenCssClass = 'myClass';
rowBgOddCssClass string defines the css class for odd rows   myTF.rowBgOddCssClass = 'myClass';
inpWatermarkCssClass string defines the css class the watermark in input filters (default - fltWatermark)   myTF.inpWatermarkCssClass = 'myClass';
activeColumnsCssClass string defines the css class of the active column headers (default - activeHeader)   myTF.activeColumnsCssClass = "myclass";
Top of page

Filter grid bar behaviours

Property Type Description Remarks Example
fltGrid boolean enables / disables filters generation (default - true)   myTF.fltGrid = true;
coln 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")   myTF.col2 = "none";
myTF.col3 = "select";
myTF.col4 = "multiple";
myTF.col5 = "checklist"
filtersRowIndex number this property defines in which row the filters grid will be generated: 0 (before table headers) or 1 (after table headers)   myTF.filtersRowIndex = 0;
enterKey boolean enables / disables "enter" key for validation (default - true)   myTF.enterKey = false;
modFilterFn function calls another method instead of the default method ( TF.Filter() ) at submission   myTF.modFilterFn = function(){ alert('Calls another function!!!'); myTF.Filter(); }
onBeforeFilter function calls designed function before filtering starts   myTF.onBeforeFilter = function(o){ alert('Calls function before filtering starts!!!'); }
onAfterFilter function calls designed function after filtering is completed   myTF.onAfterFilter = function(o){ alert('Calls function after filtering process!!!'); }
onFiltersLoaded function calls desired function after filters are completely generated   myTF.onFiltersLoaded = function(o){ alert('Calls function after filters generation!!!'); }
onBeforeOperation function calls defined function before column operations are performed (default - null)   myTF.onBeforeOperation = function(o){ alert('Calls function before column operations are performed!!!'); }
onAfterOperation function calls specified function after column operations are performed (default - null)   myTF.onAfterOperation = function(o){ alert('Calls function after column operations are performed!!!'); }
onRowValidated 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, as usual
  • k is the current row index
 myTF.onRowValidated = function(o,k){ alert('Calls function after a row is validated!!! Validated row nb = '+k ); }
customCellDataCols array specifies the columns that will use the custom_cell_data event (default - [])   myTF.customCellDataCols = [0,2,3];
customCellData 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, as usual
  • cell is the current cell from which data is retrieved
  • index is the current column index

Check this example.

 myTF.customCellData = function(o,cell,index){ alert('Calls function when cell data is retrieved' ); }
exactMatch boolean if set true, only exact matches will be displayed (default - false) note that this is case insensitive myTF.exactMatch = true;
matchCase boolean if set true filters become case sensitive (default - false)   myTF.matchCase = true;
colOperation 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.

 myTF.colOperation = { id: ["table8Tot1","table8Tot2"], col: [2,5], operation: ["sum","mean"], decimal_precision: [1,2], tot_row_index: [9,9], write_method: ["innerHTML","setValue"] }
alternateBgs boolean if set true, it enables alternating rows background color (default - false)   myTF.alternateBgs = true;
visibleRows 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 myTF.visibleRows = [3,5];
refreshFilters boolean if set true this property modifies the filtering behavior: drop-down menus are refreshed and display only the visible options (default - false).   myTF.refreshFilters = true;
disableExcludedOptions boolean new When refresh_filters is enabled, if set true this property disables the excluded options (default - false). This feature was suggested by zehnplus. myTF.refreshFilters = true; myTF.disableExcludedOptions = true;
onKeyUp boolean if set true this property enables the 'filter as you type' behaviour (default - false) table is filtered when user stops typing myTF.onKeyUp = true;
onKeyUpDelay number defines the filtering delay in msecs (default - 900) when user stops typing, table is filtered after defined delay myTF.onKeyUpDelay = 1500;
singleSearchFlt 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)   myTF.singleSearchFlt = true;
searchType string this property changes the filtering process. If set to 'exclude', rows containing searched string are simply hidden (default - 'include')   myTF.searchType = 'exclude';
highlightKeywords boolean if set true this property enables keywords highlighting (default - false)   myTF.highlightKeywords = true;
rememberGridValues boolean if set true this property will re-set filters' values at page reload (default - false)   myTF.rememberGridValues = true;
rememberPageNb boolean if set true this property will re-set the last accessed page at page reload (default - false)   myTF.rememberPageNb = true;
rememberPageLen boolean if set true this property will re-set the number of results per page at page re-load (default - false)   myTF.rememberPageLen = true;
isExternalFlt boolean if set true this property enables filters generation in desired container elements (default - false)   myTF.isExternalFlt = true;
externalFltTgtIds 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)   myTF.externalFltTgtIds = ['id0','id1','id2'];
toolBarTgtId string defines the id of the element that will contain the toolbar container, located above the table headers by default (default - null)   myTF.toolBarTgtId = 'myContainerId';
status boolean if set true this property displays status messages in the browser's status bar   myTF.status = true;
orOperator string defines the or operator that enables multiple keywords searches on a column (default - '||')   myTF.orOperator = '::';
execDelay number sets the delay in msecs of filtering process if loader set true (default - 100)   myTF.execDelay = 250;
cookieDuration number sets the cookie duration in mms (default - 100000)   myTF.cookieDuration = 250000;
enableIcons boolean it makes the toolbar icons visible by default, paging and clear filters button (default - true)   myTF.enableIcons = false;
inpWatermark string defines the watermark text for input type filters (default - '') Same text is set in all input filters myTF.inpWatermark = 'Search...';
inpWatermark array if used as an array, a different text can be defined for each input filter(default - '')   myTF.inpWatermark = ['Search...', null, 'Dates here...'];
modulesPath string defines the path of the modules to be imported by the script (default - 'TF_Modules/')   myTF.modulesPath = 'MyModulesFolder/';
publicMethods 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)   myTF.publicMethods = true;
markActiveColumns boolean column headers are highlighted upon filtering(default - false)   myTF.markActiveColumns = true;
onBeforeActiveColumn 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
 myTF.onBeforeActiveColumn = function(o, colIndex){ alert(colIndex); }
onAfterActiveColumn 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
 myTF.onAfterActiveColumn = function(o, colIndex){ alert(colIndex); }
Top of page

Grid layout

Property Type Description Remarks Example
gridLayout boolean enables / disables grid layout generation (default - true)   myTF.gridLayout = true;
gridWidth string this property defines the width of the main container of the grid (default - null)   myTF.gridWidth = '850px';
gridHeight string this property defines the height of the main container of the grid (default - null)   myTF.gridHeight = '400px';
gridMainContCssClass 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
 myTF.gridMainContCssClass = 'myclass';
gridContCssClass string defines the css class of the container of the data table (default - 'grd_tblCont')   myTF.gridContCssClass = 'myclass';
gridHeadContCssClass string defines the css class of the container of the headers' table (default - 'grd_headTblCont')   myTF.gridHeadContCssClass = 'myclass';
gridInfDivCssClass string defines the css class of the bottom div containing the paging elements (default - 'grd_inf')   myTF.gridInfDivCssClass = 'myclass';
gridHeadRowIndex number defines which row contains the column headers (default - 0)   myTF.gridHeadRowIndex = 1;
gridEnableFilters boolean enables/disables the filters generation (default - true)   myTF.gridEnableFilters = false;
gridDefaultColWidth string defines the default column width if no width is defined (default - '100px')   myTF.gridDefaultColWidth = '125px';
gridEnableColResizer boolean enables/disables the columns resizer feature (default - true)   myTF.gridEnableColResizer = false;
Top of page

Paging

Property Type Description Remarks Example
paging boolean if set true, it will generate a paging feature   myTF.paging = true;
pagingTgtId string defines the id of the element that will contain the paging elements (pages drop-down and navigation buttons) (default - null)   myTF.pagingTgtId = 'myContainerId';
pagingLength number sets number of rows displayed in a page (default - 10)   myTF.pagingLength = 50;
hasResultsPerPage boolean if set true, it will enable the 'results per page' feature (default - false)   myTF.resultsPerPage = true;
resultsPerPage array this property enables users to change the number of results per page; paging and hasResultsPerPage 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])
  myTF.resultsPerPage = true;
myTF.resultsPerPage = ['Results per page',[25,50,100]];
resultsPerPageTgtId string defines the id of the element that will contain the results per page drop-down element (default - null)   myTF.resultsPerPageTgtId = 'myContainerId';
hasPagingBtns boolean enables / disables paging buttons if paging property set true (default - true)   myTF.hasPagingBtns = true;
pageSelectorType string defines the page selector element: drop-down or text-box. 2 possible values: 'select' or 'input'   myTF.hasPagingBtns = 'input';
btnNextPageText string sets 'next page' button's label if paging property set true (default - ">")   myTF.btnNextPageText = 'Next >';
btnPrevPageText string sets 'previous page' button's label if paging property set true (default - "<")   myTF.btnPrevPageText = '< Prev';
btnFirstPageText string sets 'first page' button's label if paging property set true (default - "|<")   myTF.btnFirstPageText = '<< First';
btnLastPageText string sets 'last page' button's label if paging property set true (default - ">|")   myTF.btnLastPageText = 'Last >>';
btnNextPageHtml 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 myTF.btnNextPageHtml = '<a href="javascript:;">Next ></a>';
btnPrevPageHtml string defines 'previous 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 myTF.btnPrevPageHtml = '<a href="javascript:;">< Previous</a>';
btnFirstPageHtml string defines 'first 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 myTF.btnFirstPageHtml = '<a href="javascript:;"><| First</a>';
btnLastPageHtml string defines 'last 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 myTF.btnLastPageHtml = '<a href="javascript:;">< Last >|</a>';
pageText string defines the text preceeding the page selector drop-down (default - ' Page ') myTF.pageText = 'Pg';
ofText string defines the text after page selector drop-down (default - ' of ') myTF.ofText = ' / ';
pgSlcCssClass string defines the css class for paging drop-down (default - 'pgSlc')   myTF.pgSlcCssClass = 'myClass';
resultsSlcCssClass string defines the css class of the results per page drop-down (default - 'rspg')   myTF.resultsSlcCssClass = 'myClass';
resultsSpanCssClass string defines the css class for the label preceding the results per page select (default - 'rspgSpan')   myTF.resultsSpanCssClass = 'myClass';
btnPageCssClass string defines the css class for paging buttons (previous,next,etc.) (default - 'pgInp')   myTF.btnPageCssClass = 'myClass';
nbPgSpanCssClass string defines the css class for the total nb of pages label (default - 'nbpg')   myTF.nbPgSpanCssClass = 'myClass';
onBeforeChangePage 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
 myTF.onBeforeChangePage = function(o,i){ alert(o.id+' - page index: '+i); };
onAfterChangePage 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
 myTF.onAfterChangePage = function(o,i){ alert(o.id+' - page index: '+i); };
Top of page

Drop-down filters

Property Type Description Remarks Example
displayAllText string sets "display all" text in drop-down list; (default - '')   myTF.displayAllText = '';
enableSlcResetFilter boolean new if set false the 1st option is removed (default - true)   myTF.enableSlcResetFilter = false;
onSlcChange boolean filters the table as you change the value of a drop-down list (default - true)   vmyTF.onSlcChange = false;
sortSlc boolean if set true, it will sort options in the drop-down list(s) (default - true)   myTF.sortSlc = true;
isSortNumAsc boolean if set true, it will enable the sortNumAsc property (default - false)   myTF.isSortNumAsc = true;
sortNumAsc 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])   myTF.isSortNumAsc = true;
myTF.sortNumAsc = [1,2];
isSortNumDesc boolean if set true, it will enable the sortNumDesc property (default - false)   myTF.isSortNumDesc = true;
sortNumDesc 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])   myTF.isSortNumDesc = true;
myTF.sortNumDesc = [1,2];
slcFillingMethod 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...

 myTF.slcFillingMethod = 'innerHTML';
isExternalFlt boolean if set true this property enables filters generation in desired container elements (default - false)

Check this example.

 myTF.isExternalFlt = true;
externalFltTgtIds 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)   myTF.externalFltTgtIds = ['id0','id1','id2'];
multipleSlcTooltip string tooltip text appearing on multiple drop-down filters (default - 'Use Ctrl key for multiple selections')   myTF.col0 = "multiple";
myTF.multipleSlcTooltip = "Press Ctrl key in order to select multiple values";
fillSlcOnDemand 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. 		myTF.fillSlcOnDemand = true;
activateSlcTooltip 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. myTF.fillSlcOnDemand = true;
myTF.activateSlcTooltip = "Click to activate filter";
customSlcOptions 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. myTF.customSlcOptions = {        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] };
enableEmptyOption boolean if set true, it will add the empty criteria option to drop-down filters (default - false)   myTF.enableEmptyOption = true;
emptyText string defines the text for the empty criteria option (default - '(Empty)')   myTF.emptyText = '<Empty values>';
enableNonEmptyOption boolean if set true, it will add the non-empty criteria option to drop-down filters (default - false)   myTF.enableNonEmptyOption = true;
nonEmptyText string defines the text for the non-empty criteria option (default - '(Non empty)')   myTF.nonEmptyText = '<Non-empty values>';
Top of page

Checklist filters

Property Type Description Remarks Example
checkListDivCssClass string defines the css class of div containing the checklist filter (default - 'div_checklist')   myTF.checkListDivCssClass = 'myClass';
checkListCssClass string defines the css class of the checklist filter itself (default - 'flt_checklist') <ul> tag myTF.checkListCssClass = 'myClass';
checkListItemCssClass string defines the css class of a checklist item (default - 'flt_checklist_item') <li> tag myTF.checkListItemCssClass = 'myClass';
checkListSlcItemCssClass string defines the css class of a selected checklist item (default - 'flt_checklist_slc_item')   myTF.checkListSlcItemCssClass = 'myClass';
activateCheckListTxt string text appearing in the checklist filter when fillSlcOnDemand property is set true (default - 'Click to load data')   myTF.activateCheckListTxt = "Click to activate filter" }
enableCheckListResetFilter boolean new if set false the 1st option is removed (default - true)   myTF.enableCheckListResetFilter = false;
Top of page

Rows counter

Property Type Description Remarks Example
rowsCounter boolean if set true, it will display the total number of rows displayed at the top of the table in left corner (default - false)   myTF.rowsCounter = true;
rowsCounterText string sets text for rows counter label (default - "Data rows: ")   myTF.rowsCounterText = "Total items: ";
rowsCounterTgtId string defines the id of the element that will contain the rows counter label (default - null)   myTF.rowsCounterTgtId = 'myContainerId';
totRowsCssClass string defines the css class of the rows counter label container (default - 'tot')   myTF.totRowsCssClass = 'myClass';
onBeforeRefreshCounter 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
 myTF.onBeforeRefreshCounter = function(o, elm){ alert('Rows counter is refreshed'); };
onAfterRefreshCounter 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
 myTF.onAfterRefreshCounter = 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)    myTF.loader = true;
loaderText string sets text for "loading" message (default - "Loading...")   myTF.loaderText = 'Filtering data...';
loaderHtml string defines loader's HTML if loader property set true (default - null)   myTF.loaderHtml = '<img src="loader.gif" alt="" ' +
               'style="vertical-align:middle;" /><h3>Loading...</h3>';
loaderCssClass string defines the css class of the loader's container element  (default - 'loader')   myTF.loaderCssClass = 'myClass';
loaderTgtId string defines the id of the element that will contain the loader (default - null) myTF.loaderTgtId = 'myContainerId';
onShowLoader function calls defined function before loader is displayed Useful for creating advanced transition effects during filtering operations myTF.onShowLoader = function(){ alert('Calls function before loader is opened!!!'); }
onHideLoader function calls defined function after loader is hidden Useful for creating advanced transition effects during filtering operations myTF.onHideLoader = function(){ alert('Calls function after loader is closed!!!'); }
Top of page

Validation and reset buttons

Property Type Description Remarks Example
displayBtn boolean if set true shows validation button in the grid (default - false)   myTF.displayBtn = true;
btnText string changes the text of the validation button   myTF.btnText = 'Filter';
btnCssClass string defines the css class of the validation button   myTF.btnCssClass = 'myClass';
btnReset 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)   myTF.btnReset = true;
btnResetTgtId string defines the id of the element that will contain the reset button (default - null)   myTF.btnResetTgtId = 'myContainerId';
btnResetText string sets text for the "Reset" button (default - "Reset")   myTF.btnResetText = 'Clear';
btnResetHtml string defines 'reset' button HTML if btnReset property set true (default - null) note that the onclick event is added automatically to the html element and overwrites any eventual onclick attribute myTF.btnResetHtml = '<input type="button" value="reset" class="pgInp" />';
btnResetCssClass string defines the css class of the reset button   myTF.btnResetCssClass = 'myClass';
onBeforeReset 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
 myTF.onBeforeReset = function(o, filterValues){ alert('Filters values to be cleared: '+filterValues); };
onAfterReset 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
 myTF.onBeforeReset = function(o){ alert('Filters are cleared'); };
Top of page

Status bar

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

 

 myTF.statusBar = true;
statusBarTgtId string defines the id of the element that will contain the status bar   myTF.statusBarTgtId = 'myContainerId';
statusBarText string sets the text of the label preceding the "status" message (default - "")   myTF.statusBarText = 'Status: ';
statusBarCssClass string defines the css class of the status' container element  (default - 'status')   myTF.statusBarCssClass = 'myClass';
msgFilter string text to display during filtering operation (default - 'Filtering data...')   myTF.msgFilter = 'Processing...';
msgPopulate string text to display when drop-downs are populated (default - 'Populating filters...')   myTF.msgPopulate = 'Loading column(s) values';
msgChangePage string text to display when pagination page is changed (default - 'Collecting paging data...')   myTF.msgChangePage = 'Loading page...';
msgClear string text to display when filters are cleared (default - 'Clearing filters...')   myTF.msgClear = 'Clearing grid...';
msgChangeResults string text to display when the number of results per page is changed (default - 'Changing results per page...')   myTF.msgChangeResults = 'Calculating results per page...';
onBeforeShowMsg 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
 myTF.onBeforeShowMsg = function(o, msg){ alert(msg); };
onAfterShowMsg 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
 myTF.onAfterShowMsg = function(o, msg){ alert(msg); };
Top of page

Date and numeric data

Property Type Description Remarks Example
defaultDateType 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
 myTF.defaultDateType = 'MDY';
thousandsSeparator string defines default thousands separator, 2 possible values: '.' (EU) or ',' (US) (default - ',')   myTF.thousandsSeparator = '.';
decimalSeparator string defines default decimal separator, 2 possible values: ',' (EU) or '.' (US) (default - '.')   myTF.decimalSeparator = ',';
colNbFormat 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)   myTF.colNbFormat = [null,'eu','eu', 'ipaddress'];
colDateType 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)   myTF.colDateType = [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 integrate it to this script.

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 myTF.sort = true;
sortConfig object this optional literal object is used to configure the sorting feature.

It needs the following properties:

  • sortConfig["name"] defines the name of the object (string, default - 'sortabletable')
  • sortConfig["src"] defines the sort script filename to load (string, default - 'sortabletable.js')
  • sortConfig["adapterSrc"] loads an eventual sort script adapter (string, default - 'tfAdapter.sortabletable.js')
  • sortConfig["initialize"] defines the method to call once script is imported (function - default - function(o){ if(o.SetSortTable) o.SetSortTable(); })
  • sortConfig["sortTypes"] 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)
  • sortConfig["sortCol"] sorts a column at load in ascending or descending manner: [colnumber,boolean] (default - null)
  • sortConfig["asyncSort"] enables/disables an asynchronous sorting (boolean, default - false)
  • sortConfig["triggerIds"] 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.adapterSrc 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 sortTypes property of the sortConfig object in order to define the column data types, or alternatively, define the colNbFormat and the colDateType. Note that there is a column data type resolution mechanism: if the sortTypes property is not defined then the script will look for the colNbFormat and colDateType in order to resolve the column types. If there are no column types defined, the default value is 'String'.

Check this example.

 myTF.sortConfig = {
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']
}
msgSort string text displayed when a table column is sorted (default - 'Sorting data...')   myTF.msgSort = 'Sorting...';
onSortLoaded 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
 myTF.onSortLoaded = function(o, st){ alert(st); };
onBeforeSort 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
 myTF.onBeforeSort = function(o, colIndex){ alert('column index '+ colIndex) };
onAfterSort 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
 myTF.onAfterSort: function(o, colIndex){ alert('column index '+ colIndex) };
sortImgPath string sets the images path for this extension (default - 'TF_Themes/'   myTF.sortImgPath = 'myImages/';
sortImgBlank string sets the default sort indicator image (default - 'blank.png')   myTF.sortImgBlank = 'myImage.gif';
sortCustomKey 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 myTF.sortCustomKey = '_mySortKey';
sortImgClassName 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 myTF.sortCustomKey = '_mySortKey';
sortImgAscClassName 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 myTF.sortImgAscClassName = 'myClass';
sortImgDescClassName 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 myTF.sortImgDescClassName = 'myClass';
Top of page

Help

Customised instructions can be displayed in the help container.

Property Type Description Remarks Example
helpInstructions 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 myTF.helpInstructions = false;
helpInstrTgtId string defines the id of the element containing the instructions button (?) (default - null) By default the ? is generated in the top toolbar myTF.helpInstrTgtId = 'myContainerId';
helpInstrContTgtId string defines the id of the container element for instructions content (default - null)   myTF.helpInstrContTgtId = 'myContainerId';
helpInstrText string sets the help/instructions text (default - 'Use the filters above each column to filter and limit table data.')   myTF.helpInstrText = 'My Help text here...';
helpInstrHtml string sets the help/instructions HTML (default - null)   myTF.helpInstrHtml: '<p>My Help text here...</p><p>Hello world!</p>';
helpInstrBtnText string sets the help/instructions button text (default - '?')   myTF.helpInstrBtnText = 'Help';
helpInstrBtnHtml 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 myTF.helpInstrBtnHtml = '<button>Help</button>';
helpInstrBtnCssClass string defines the css class of the help/instructions button (default - 'helpBtn')   myTF.helpInstrBtnCssClass = 'myCssClass';
helpInstrContCssClass string defines the css class of the help/instructions container (default - 'helpBtn')   myTF.helpInstrContCssClass = '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
popUpFilters boolean

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

 myTF.popUpFilters = true;
popUpImgFlt string sets the path of the filter icon placed in the header that toggles popup filters (default - 'TF_Themes/icn_filter.gif')   myTF.popUpImgFlt = 'myDir/my_filterIcon.png';
popUpImgFltActive string sets the path of the filter icon when active (default - 'TF_Themes/icn_filterActive.gif')   myTF.popUpImgFltActive = 'myDir/my_filterIconActive.png';
popUpImgFltHtml 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 myTF.popUpImgFltHtml ='<img src="myDir/my_filterIcon.png" alt="Toggle filters"/>';
popUpDivCssClass string defines the css class of the popup container (default - 'popUpFilter')   myTF.popUpDivCssClass ='myCssClass';
onBeforePopUpOpen 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
 myTF.onBeforePopUpOpen = function(o,popupElm,colIndex){alert(o +' '+ popupElm +' '+ colIndex); };
onAfterPopUpOpen 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
 myTF.onAfterPopUpOpen = function(o,popupElm,colIndex){alert(o +' '+ popupElm +' '+ colIndex); };
onBeforePopUpClose 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
 myTF.onBeforePopUpClose = function(o,popupElm,colIndex){alert(o +' '+ popupElm +' '+ colIndex); };
onAfterPopUpClose 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
 myTF.onAfterPopUpClose = 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
ezEditTableConfig 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.

 myTF.ezEditTableConfig = { name:'ez', src:'myFolder/ez.js',
loadStylesheet: true, stylesheet:'myFolder/ez.css', 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 myTF.selectable = true; myTF.ezEditTableConfig = { 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 myTF.editable: true;
myTF.ezEditTableConfig = { default_selection: 'both', editor_model: 'cell' };
Top of page
E.n.j.o.y. ads-free content!
ezEditTable | © Max Guglielmi
GitHub repo