Added no filters test

examples/dev.html

@@ -97,14 +97,17 @@
             col_2: 'checklist',
             col_3: 'select',
             base_path: '../build/tablefilter/',
+            // fill_slc_on_demand: true,
             rows_counter: true,
             // enable_default_theme: true,
-            help_instructions: true,
+            // help_instructions: true,
             mark_active_columns: true,
-            on_keyup: false,
+            // auto_filter: false,
+            auto_filter_delay: 200,
             loader: true,
             themes: [{ name: 'skyblue'}],
             paging: false,
+            paging_length: 3,
             alternate_rows: true,
             highlight_keywords: true,
             match_case: false,

src-es6/extensions/advancedGrid/adapterEzEditTable.js

@@ -15,7 +15,7 @@ export default class AdapterEzEditTable {
         this.name = 'ezEditTable.js';
         this.vendorPath = this.cfg.vendor_path || tf.extensionsPath +
             'ezEditTable/';
-        this.loadStylesheet = this.cfg.loadStylesheet===true ? true : false;
+        this.loadStylesheet = Boolean(this.cfg.loadStylesheet);
         this.stylesheet = this.cfg.stylesheet || this.vendorPath +
             'ezEditTable.css';
         this.stylesheetName = this.cfg.stylesheetName || 'ezEditTableCss';
@@ -237,8 +237,9 @@ export default class AdapterEzEditTable {
 
             //Selected row needs to be visible when paging is activated
             if(tf.paging){
-                tf.Cpt.paging.onAfterChangePage = function(tf){
+                tf.Cpt.paging.onAfterChangePage = function(paging){
-                    var et = tf.ExtRegistry.ezEditTable;
+                    var advGrid = paging.tf.ExtRegistry.advancedGrid;
+                    var et = advGrid._ezEditTable;
                     var slc = et.Selection;
                     var row = slc.GetActiveRow();
                     if(row){

src-es6/modules/checkList.js

@@ -47,7 +47,10 @@ export class CheckList{
 
     // TODO: move event here
     onChange(evt){
-        this.tf.Evt.onSlcChange(evt);
+        let elm = evt.target;
+        this.tf.activeFilterId = elm.getAttribute('id');
+        this.tf.activeFlt = Dom.id(this.tf.activeFilterId);
+        this.tf.Evt.onSlcChange.call(this.tf, evt);
     }
 
     optionClick(evt){

src-es6/modules/dropdown.js

@@ -13,7 +13,8 @@ export class Dropdown{
         // Configuration object
         var f = tf.config();
 
-        this.enableSlcResetFilter = f.enable_slc_reset_filter ? false : true;
+        this.enableSlcResetFilter = f.enable_slc_reset_filter===false ?
+            false : true;
         //defines empty option text
         this.nonEmptyText = f.non_empty_text || '(Non empty)';
         //sets select filling method: 'innerHTML' or 'createElement'

src-es6/modules/paging.js

@@ -330,7 +330,7 @@ export class Paging{
             this.setPagingInfo();
         }
         if(!tf.fltGrid){
-            tf.ValidateAllRows();
+            tf.validateAllRows();
             this.setPagingInfo(tf.validRowsIndex);
         }
 

src-es6/tablefilter.js

@@ -116,10 +116,6 @@ export class TableFilter{
             this['col'+j] = col;
         }
 
-        /*** Developer's additional methods ***/
-        this.publicMethods = f.public_methods!==undefined ?
-            f.public_methods : false;
-
         /*** filters' grid properties ***/
 
         //enables/disables filter grid
@@ -127,7 +123,7 @@ export class TableFilter{
 
         /*** Grid layout ***/
         //enables/disables grid layout (fixed headers)
-        this.gridLayout = f.grid_layout ? true : false;
+        this.gridLayout = Boolean(f.grid_layout);
         this.sourceTblHtml = null;
         if(this.gridLayout){
             //Firefox does not support outerHTML property...
@@ -198,12 +194,10 @@ export class TableFilter{
          //enables/disables icons (paging, reset button)
         this.enableIcons = f.enable_icons===false ? false : true;
         //enables/disbles rows alternating bg colors
-        this.alternateBgs = f.alternate_rows===true ? true : false;
+        this.alternateBgs = Boolean(f.alternate_rows);
         //defines widths of columns
         this.hasColWidths = Types.isArray(f.col_widths);
         this.colWidths = this.hasColWidths ? f.col_widths : null;
-        //enables/disables fixed headers
-        this.fixedHeaders = f.fixed_headers===true ? true : false;
         //tbody height if fixed headers enabled
         this.tBodyH = !isNaN(f.tbody_height) ? f.tbody_height : 200;
         //defines css class for filters
@@ -226,29 +220,28 @@ export class TableFilter{
         this.onAfterFilter = Types.isFn(f.on_after_filter) ?
             f.on_after_filter : null;
         //enables/disables case sensitivity
-        this.caseSensitive = f.case_sensitive===true ? true : false;
+        this.caseSensitive = Boolean(f.case_sensitive);
         //enables/disbles exact match for search
-        this.exactMatch = f.exact_match===true ? true : false;
+        this.exactMatch = Boolean(f.exact_match);
         //refreshes drop-down lists upon validation
-        this.linkedFilters = f.linked_filters===true ? true : false;
+        this.linkedFilters = Boolean(f.linked_filters);
         //wheter excluded options are disabled
-        this.disableExcludedOptions = f.disable_excluded_options===true ?
+        this.disableExcludedOptions = Boolean(f.disable_excluded_options);
-            true : false;
         //stores active filter element
         this.activeFlt = null;
         //id of active filter
         this.activeFilterId = null;
         //enables/disbles column operation(sum,mean)
-        this.hasColOperation = f.col_operation ? true : false;
+        this.hasColOperation = Boolean(f.col_operation);
         this.colOperation = null;
         //enables always visible rows
-        this.hasVisibleRows = f.rows_always_visible ? true : false;
+        this.hasVisibleRows = Boolean(f.rows_always_visible);
         //array containing always visible rows
         this.visibleRows = this.hasVisibleRows ? f.rows_always_visible : [];
         //defines search type: include or exclude
         this.searchType = f.search_type || 'include';
         //enables/disables external filters generation
-        this.isExternalFlt = f.external_flt_grid===true ? true : false;
+        this.isExternalFlt = Boolean(f.external_flt_grid);
         //array containing ids of external elements containing filters
         this.externalFltTgtIds = f.external_flt_grid_ids || null;
         //stores filters elements if isExternalFlt is true
@@ -259,7 +252,7 @@ export class TableFilter{
         this.onFiltersLoaded = Types.isFn(f.on_filters_loaded) ?
             f.on_filters_loaded : null;
         //enables/disables single filter search
-        this.singleSearchFlt = f.single_search_filter===true ? true : false;
+        this.singleSearchFlt = Boolean(f.single_search_filter);
         //calls function after row is validated
         this.onRowValidated = Types.isFn(f.on_row_validated) ?
             f.on_row_validated : null;
@@ -277,9 +270,9 @@ export class TableFilter{
         //enables/disables help div
         this.helpInstructions = !f.help_instructions ? false : true;
         //popup filters
-        this.popUpFilters = f.popup_filters===true ? true : false;
+        this.popUpFilters = Boolean(f.popup_filters);
         //active columns color
-        this.markActiveColumns = f.mark_active_columns===true ? true : false;
+        this.markActiveColumns = Boolean(f.mark_active_columns);
         //defines css class for active column header
         this.activeColumnsCssClass = f.active_columns_css_class ||
             'activeHeader';
@@ -294,12 +287,11 @@ export class TableFilter{
         //defines 1st option text
         this.displayAllText = f.display_all_text || '';
         //enables/disables empty option in combo-box filters
-        this.enableEmptyOption = f.enable_empty_option===true ? true : false;
+        this.enableEmptyOption = Boolean(f.enable_empty_option);
         //defines empty option text
         this.emptyText = f.empty_text || '(Empty)';
         //enables/disables non empty option in combo-box filters
-        this.enableNonEmptyOption = f.enable_non_empty_option===true ?
+        this.enableNonEmptyOption = Boolean(f.enable_non_empty_option);
-            true : false;
         //defines empty option text
         this.nonEmptyText = f.non_empty_text || '(Non empty)';
         //enables/disables onChange event on combo-box
@@ -307,13 +299,13 @@ export class TableFilter{
         //enables/disables select options sorting
         this.sortSlc = f.sort_select===false ? false : true;
         //enables/disables ascending numeric options sorting
-        this.isSortNumAsc = f.sort_num_asc===true ? true : false;
+        this.isSortNumAsc = Boolean(f.sort_num_asc);
         this.sortNumAsc = this.isSortNumAsc ? f.sort_num_asc : null;
         //enables/disables descending numeric options sorting
-        this.isSortNumDesc = f.sort_num_desc===true ? true : false;
+        this.isSortNumDesc = Boolean(f.sort_num_desc);
         this.sortNumDesc = this.isSortNumDesc ? f.sort_num_desc : null;
         //enabled selects are populated on demand
-        this.fillSlcOnDemand = f.fill_slc_on_demand===true ? true : false;
+        this.fillSlcOnDemand = Boolean(f.fill_slc_on_demand);
         this.hasCustomOptions = Types.isObj(f.custom_options);
         this.customOptions = f.custom_options;
 
@@ -337,26 +329,26 @@ export class TableFilter{
 
         /*** rows counter ***/
         //show/hides rows counter
-        this.rowsCounter = f.rows_counter===true ? true : false;
+        this.rowsCounter = Boolean(f.rows_counter);
 
         /*** status bar ***/
         //show/hides status bar
-        this.statusBar = f.status_bar===true ? true : false;
+        this.statusBar = Boolean(f.status_bar);
 
         /*** loader ***/
         //enables/disables loader/spinner indicator
-        this.loader = f.loader===true ? true : false;
+        this.loader = Boolean(f.loader);
 
         /*** validation - reset buttons/links ***/
         //show/hides filter's validation button
-        this.displayBtn = f.btn===true ? true : false;
+        this.displayBtn = Boolean(f.btn);
         //defines validation button text
         this.btnText = f.btn_text || (!this.enableIcons ? 'Go' : '');
         //defines css class for validation button
         this.btnCssClass = f.btn_css_class ||
             (!this.enableIcons ? 'btnflt' : 'btnflt_icon');
         //show/hides reset link
-        this.btnReset = f.btn_reset===true ? true : false;
+        this.btnReset = Boolean(f.btn_reset);
         //defines css class for reset button
         this.btnResetCssClass = f.btn_reset_css_class || 'reset';
         //callback function before filters are cleared
@@ -368,13 +360,13 @@ export class TableFilter{
 
         /*** paging ***/
         //enables/disables table paging
-        this.paging = f.paging===true ? true : false;
+        this.paging = Boolean(f.paging);
         this.nbVisibleRows = 0; //nb visible rows
         this.nbHiddenRows = 0; //nb hidden rows
 
         /*** webfx sort adapter ***/
         //enables/disables default table sorting
-        this.sort = f.sort===true ? true : false;
+        this.sort = Boolean(f.sort);
         //indicates if sort is set (used in tfAdapter.sortabletable.js)
         this.isSortEnabled = false;
         this.sortConfig = f.sort_config || {};
@@ -383,8 +375,7 @@ export class TableFilter{
         this.sortConfig.sortTypes = Types.isArray(this.sortConfig.sort_types) ?
             this.sortConfig.sort_types : [];
         this.sortConfig.sortCol = this.sortConfig.sort_col || null;
-        this.sortConfig.asyncSort = this.sortConfig.async_sort===true ?
+        this.sortConfig.asyncSort = Boolean(this.sortConfig.async_sort);
-            true : false;
         this.sortConfig.triggerIds =
             Types.isArray(this.sortConfig.sort_trigger_ids) ?
             this.sortConfig.sort_trigger_ids : [];
@@ -396,17 +387,19 @@ export class TableFilter{
         // this.editable = f.editable===true ? true : false;
 
         /*** onkeyup event ***/
-        //enables/disables onkeyup event, table is filtered when user stops
+        //enables/disables auto filtering, table is filtered when user stops
         //typing
-        this.onKeyUp = f.on_keyup===true ? true : false;
+        this.autoFilter = Boolean(f.auto_filter);
         //onkeyup delay timer (msecs)
-        this.onKeyUpDelay = !isNaN(f.on_keyup_delay) ? f.on_keyup_delay : 900;
+        this.autoFilterDelay = !isNaN(f.auto_filter_delay) ?
-        this.isUserTyping = null; //typing indicator
+            f.auto_filter_delay : 900;
-        this.onKeyUpTimer = undefined;
+        //typing indicator
+        this.isUserTyping = null;
+        this.autoFilterTimer = null;
 
         /*** keyword highlighting ***/
         //enables/disables keyword highlighting
-        this.highlightKeywords = f.highlight_keywords===true ? true : false;
+        this.highlightKeywords = Boolean(f.highlight_keywords);
 
         /*** data types ***/
         //defines default date type (european DMY)
@@ -418,15 +411,14 @@ export class TableFilter{
         //US & javascript = '.' EU = ','
         this.decimalSeparator = f.decimal_separator || '.';
         //enables number format per column
-        this.hasColNbFormat = f.col_number_format===true ? true : false;
+        this.hasColNbFormat = Boolean(f.col_number_format);
         //array containing columns nb formats
         this.colNbFormat = Types.isArray(this.hasColNbFormat) ?
             f.col_number_format : null;
         //enables date type per column
-        this.hasColDateType = f.col_date_type===true ? true : false;
+        this.hasColDateType = Types.isArray(f.col_date_type);
         //array containing columns date type
-        this.colDateType = Types.isArray(this.hasColDateType) ?
+        this.colDateType = this.hasColDateType ? f.col_date_type : null;
-            f.col_date_type : null;
 
         /*** status messages ***/
         //filtering
@@ -484,18 +476,15 @@ export class TableFilter{
         /*** cookies ***/
         this.hasStoredValues = false;
         //remembers filters values on page load
-        this.rememberGridValues = f.remember_grid_values===true ?
+        this.rememberGridValues = Boolean(f.remember_grid_values);
-            true : false;
         //cookie storing filter values
         this.fltsValuesCookie = this.prfxCookieFltsValues + this.id;
         //remembers page nb on page load
-        this.rememberPageNb = this.paging && f.remember_page_number ?
+        this.rememberPageNb = this.paging && f.remember_page_number;
-            true : false;
         //cookie storing page nb
         this.pgNbCookie = this.prfxCookiePageNb + this.id;
         //remembers page length on page load
-        this.rememberPageLen = this.paging && f.remember_page_length ?
+        this.rememberPageLen = this.paging && f.remember_page_length;
-            true : false;
         //cookie storing page length
         this.pgLenCookie = this.prfxCookiePageLen + this.id;
 
@@ -505,10 +494,9 @@ export class TableFilter{
         this.hasExtensions = Types.isArray(this.extensions);
 
         /*** themes ***/
-        this.enableDefaultTheme = f.enable_default_theme===true ?
+        this.enableDefaultTheme = Boolean(f.enable_default_theme);
-            true : false;
         //imports themes
-        this.hasThemes = (f.enable_default_theme || Types.isArray(f.themes));
+        this.hasThemes = (this.enableDefaultTheme || Types.isArray(f.themes));
         this.themes = f.themes || [];
         //themes path
         this.themesPath = f.themes_path || this.basePath + 'themes/';
@@ -537,7 +525,7 @@ export class TableFilter{
         };
 
         /*** TF events ***/
-        let o = this;
+        // let o = this;
         this.Evt = {
             name: {
                 filter: 'Filter',
@@ -558,65 +546,66 @@ export class TableFilter{
                 - Detects <enter> key for a given element
             =====================================================*/
             detectKey(e) {
-                if(!o.enterKey){ return; }
+                if(!this.enterKey){ return; }
                 let _ev = e || global.event;
                 if(_ev){
                     let key = Event.keyCode(_ev);
                     if(key===13){
-                        o._filter();
+                        this.filter();
                         Event.cancel(_ev);
                         Event.stop(_ev);
                     } else {
-                        o.isUserTyping = true;
+                        this.isUserTyping = true;
-                        global.clearInterval(o.onKeyUpTimer);
+                        global.clearInterval(this.autoFilterTimer);
-                        o.onKeyUpTimer = undefined;
+                        this.autoFilterTimer = null;
                     }
                 }
             },
             /*====================================================
-                - onkeyup event for text filters
+                - auto filter for text filters
             =====================================================*/
             onKeyUp(e) {
-                if(!o.onKeyUp){
+                if(!this.autoFilter){
                     return;
                 }
                 let _ev = e || global.event;
                 let key = Event.keyCode(_ev);
-                o.isUserTyping = false;
+                this.isUserTyping = false;
 
                 function filter() {
-                    global.clearInterval(o.onKeyUpTimer);
+                    /*jshint validthis:true */
-                    o.onKeyUpTimer = undefined;
+                    global.clearInterval(this.autoFilterTimer);
-                    if(!o.isUserTyping){
+                    this.autoFilterTimer = null;
-                        o.filter();
+                    if(!this.isUserTyping){
-                        o.isUserTyping = null;
+                        this.filter();
+                        this.isUserTyping = null;
                     }
                 }
 
                 if(key!==13 && key!==9 && key!==27 && key!==38 && key!==40) {
-                    if(o.onKeyUpTimer===undefined){
+                    if(this.autoFilterTimer === null){
-                        o.onKeyUpTimer = global.setInterval(
+                        this.autoFilterTimer = global.setInterval(
-                            filter, o.onKeyUpDelay);
+                            filter.bind(this), this.autoFilterDelay);
                     }
                 } else {
-                    global.clearInterval(o.onKeyUpTimer);
+                    global.clearInterval(this.autoFilterTimer);
-                    o.onKeyUpTimer = undefined;
+                    this.autoFilterTimer = null;
                 }
             },
             /*====================================================
                 - onkeydown event for input filters
             =====================================================*/
             onKeyDown() {
-                if(!o.onKeyUp) { return; }
+                if(!this.autoFilter) { return; }
-                o.isUserTyping = true;
+                this.isUserTyping = true;
             },
             /*====================================================
                 - onblur event for input filters
             =====================================================*/
             onInpBlur() {
-                if(o.onKeyUp){
+                if(this.autoFilter){
-                    o.isUserTyping = false;
+                    this.isUserTyping = false;
-                    global.clearInterval(o.onKeyUpTimer);
+                    global.clearInterval(this.autoFilterTimer);
                 }
                 // if(o.ezEditTable){
                 //     if(o.editable){
@@ -632,9 +621,10 @@ export class TableFilter{
             =====================================================*/
             onInpFocus(e) {
                 let _ev = e || global.event;
-                o.activeFilterId = this.getAttribute('id');
+                let elm = Event.target(_ev);
-                o.activeFlt = Dom.id(o.activeFilterId);
+                this.activeFilterId = elm.getAttribute('id');
-                if(o.popUpFilters){
+                this.activeFlt = Dom.id(this.activeFilterId);
+                if(this.popUpFilters){
                     Event.cancel(_ev);
                     Event.stop(_ev);
                 }
@@ -652,14 +642,15 @@ export class TableFilter{
             =====================================================*/
             onSlcFocus(e) {
                 let _ev = e || global.event;
-                o.activeFilterId = this.getAttribute('id');
+                let elm = Event.target(_ev);
-                o.activeFlt = Dom.id(o.activeFilterId);
+                this.activeFilterId = elm.getAttribute('id');
+                this.activeFlt = Dom.id(this.activeFilterId);
                 // select is populated when element has focus
-                if(o.fillSlcOnDemand && this.getAttribute('filled') === '0'){
+                if(this.fillSlcOnDemand && elm.getAttribute('filled') === '0'){
-                    let ct = this.getAttribute('ct');
+                    let ct = elm.getAttribute('ct');
-                    o.Cpt.dropdown._build(ct);
+                    this.Cpt.dropdown._build(ct);
                 }
-                if(o.popUpFilters){
+                if(this.popUpFilters){
                     Event.cancel(_ev);
                     Event.stop(_ev);
                 }
@@ -667,64 +658,37 @@ export class TableFilter{
             /*====================================================
                 - onchange event for select filters
             =====================================================*/
-            onSlcChange(e) {
+            onSlcChange(e) {console.log('onSlcChange',this.activeFlt);
-                if(!o.activeFlt){ return; }
+                if(!this.activeFlt){ return; }
                 // let colIndex = o.activeFlt.getAttribute('colIndex');
                 //Checks filter is a checklist and caller is not null
                 // if(o.activeFlt && colIndex &&
                 //     o['col'+colIndex]===o.fltTypeCheckList &&
                 //     !o.Evt.onSlcChange.caller){ return; }
                 let _ev = e || global.event;
-                if(o.popUpFilters){ Event.stop(_ev); }
+                if(this.popUpFilters){ Event.stop(_ev); }
-                if(o.onSlcChange){ o.filter(); }
+                if(this.onSlcChange){ this.filter(); }
             },
-            /*====================================================
-                - onblur event for select filters
-            =====================================================*/
-            // _OnSlcBlur: function(e) {},
             /*====================================================
                 - onclick event for checklist filters
             =====================================================*/
-            onCheckListClick() {
+            onCheckListClick(e) {
-                if(o.fillSlcOnDemand && this.getAttribute('filled') === '0'){
+                let _ev = e || global.event;
-                    let ct = this.getAttribute('ct');
+                let elm = Event.target(_ev);
-                    o.Cpt.checkList._build(ct);
+                if(this.fillSlcOnDemand && elm.getAttribute('filled') === '0'){
-                    o.Cpt.checkList.checkListDiv[ct].onclick = null;
+                    let ct = elm.getAttribute('ct');
-                    o.Cpt.checkList.checkListDiv[ct].title = '';
+                    this.Cpt.checkList._build(ct);
+                    this.Cpt.checkList.checkListDiv[ct].onclick = null;
+                    this.Cpt.checkList.checkListDiv[ct].title = '';
                 }
             },
-            /*====================================================
-                - onclick event for checklist filter container
-            =====================================================*/
-            onCheckListFocus() {
-                o.activeFilterId = this.firstChild.getAttribute('id');
-                o.activeFlt = Dom.id(o.activeFilterId);
-            },
             /*====================================================
                 - onclick event for validation button
                 (btn property)
             =====================================================*/
             onBtnClick() {
-                o.filter();
+                this.filter();
             }
-            // ,
-            // _OnSlcPagesChangeEvt: null, //used by sort adapter
-            /*====================================================
-                - onclick event slc parent node (enables filters)
-                IE only
-            =====================================================*/
-            // _EnableSlc: function() {
-            //     this.firstChild.disabled = false;
-            //     this.firstChild.focus();
-            //     this.onclick = null;
-            // },
-
-            // _Paging: { //used by sort adapter
-            //     nextEvt: null,
-            //     prevEvt: null,
-            //     lastEvt: null,
-            //     firstEvt: null
-            // }
         };
     }
 
@@ -906,9 +870,11 @@ export class TableFilter{
                             dropdown._build(i);
                         }
 
-                        Event.add(slc, 'keypress', this.Evt.detectKey);
+                        Event.add(slc, 'keypress',
-                        Event.add(slc, 'change', this.Evt.onSlcChange);
+                            this.Evt.detectKey.bind(this));
-                        Event.add(slc, 'focus', this.Evt.onSlcFocus);
+                        Event.add(slc, 'change',
+                            this.Evt.onSlcChange.bind(this));
+                        Event.add(slc, 'focus', this.Evt.onSlcFocus.bind(this));
                         // Event.add(slc, 'blur', this.Evt._OnSlcBlur);
 
                         //1st option is created here since dropdown.build isn't
@@ -946,13 +912,11 @@ export class TableFilter{
                         }
 
                         if(this.fillSlcOnDemand){
-                            Event.add(
+                            Event.add(divCont, 'click',
-                                divCont, 'click', this.Evt.onCheckListClick);
+                                this.Evt.onCheckListClick.bind(this));
                             divCont.appendChild(
                                 Dom.text(checkList.activateCheckListTxt));
                         }
-
-                        Event.add(divCont, 'click', this.Evt.onCheckListFocus);
                     }
 
                     else{
@@ -969,7 +933,7 @@ export class TableFilter{
                             );
                         }
                         inp.className = inpclass;
-                        inp.onfocus = this.Evt.onInpFocus;
+                        Event.add(inp, 'focus', this.Evt.onInpFocus.bind(this));
 
                         //filter is appended in desired element
                         if(externalFltTgtId){
@@ -981,10 +945,12 @@ export class TableFilter{
 
                         this.fltIds.push(this.prfxFlt+i+'_'+this.id);
 
-                        Event.add(inp, 'keypress', this.Evt.detectKey);
+                        Event.add(inp, 'keypress',
-                        Event.add(inp, 'keydown', this.Evt.onKeyDown);
+                            this.Evt.detectKey.bind(this));
-                        Event.add(inp, 'keyup', this.Evt.onKeyUp);
+                        Event.add(inp, 'keydown',
-                        Event.add(inp, 'blur', this.Evt.onInpBlur);
+                            this.Evt.onKeyDown.bind(this));
+                        Event.add(inp, 'keyup', this.Evt.onKeyUp.bind(this));
+                        Event.add(inp, 'blur', this.Evt.onInpBlur.bind(this));
 
                         if(this.rememberGridValues){
                             let flts_values = this.Cpt.store.getFilterValues(
@@ -1008,7 +974,8 @@ export class TableFilter{
                             fltcell.appendChild(btn);
                         }
 
-                        btn.onclick = this.Evt.onBtnClick;
+                        // btn.onclick = this.Evt.onBtnClick;
+                        Event.add(btn, 'click', this.Evt.onBtnClick.bind(this));
                     }//if
 
                 }// for i

test/libs/polyfill.js

@@ -0,0 +1,10 @@
+
+// PhantomJS doesn't support bind yet
+// https://github.com/ariya/phantomjs/issues/10522
+
+Function.prototype.bind = Function.prototype.bind || function (thisp) {
+    var fn = this;
+    return function () {
+        return fn.apply(thisp, arguments);
+    };
+};

test/test-active-columns.html

@@ -5,6 +5,7 @@
         <title>TableFilter active columns tests</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo">

test/test-alternate-rows.html

@@ -5,6 +5,7 @@
         <title>TableFilter alternate rows tests</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-always-visible-rows.html

@@ -5,6 +5,7 @@
         <title>TableFilter always visible rows tests</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-case-sensitive-query.html

@@ -5,6 +5,7 @@
         <title>TableFilter case sensitive query tests</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-checklist.html

@@ -5,6 +5,7 @@
         <title>TableFilter checklist</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-clear-button.html

@@ -5,6 +5,7 @@
         <title>TableFilter clear button</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-col-ops.html

@@ -5,6 +5,7 @@
         <title>TableFilter column operations tests</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-col-widths.html

@@ -5,6 +5,7 @@
         <title>TableFilter column widths tests</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo">

test/test-config.js

@@ -1,13 +0,0 @@
-(function () {
-
-    // Configure RequireJS so it resolves relative module paths from the `src`
-    // folder.
-    require.config({
-        baseUrl: '../src',
-        paths: {
-            extensions: '../src/extensions'/*,
-            sortabletable: 'extensions/sortabletable/'*/
-        }
-    });
-
-}());

test/test-custom-options.html

@@ -5,6 +5,7 @@
         <title>TableFilter filter with custom options tests</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo">

test/test-disable-enter-key.html

@@ -5,6 +5,7 @@
         <title>TableFilter disable enter key tests</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-dropdown.html

@@ -5,6 +5,7 @@
         <title>TableFilter drop-down filter</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-exact-query-match.html

@@ -5,6 +5,7 @@
         <title>TableFilter enable exact query match tests</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-grid-layout.html

@@ -5,6 +5,7 @@
         <title>TableFilter grid layout</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
 

test/test-help.html

@@ -5,6 +5,7 @@
         <title>TableFilter help pop-up</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-highlight-keywords.html

@@ -5,6 +5,7 @@
         <title>TableFilter basic test</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-loader.html

@@ -5,6 +5,7 @@
         <title>TableFilter basic test</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-no-filters.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>TableFilter no filters tests</title>
+        <link rel="stylesheet" href="libs/qunit/qunit.css">
+        <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
+    </head>
+    <body>
+        <table id="demo">
+            <thead>
+                <tr>
+                    <th>From</th>
+                    <th>Destination</th>
+                    <th>Road Distance (km)</th>
+                    <th>By Air (hrs)</th>
+                    <th>By Rail (hrs)</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><strong>Sydney</strong></td>
+                    <td>Adelaide</td>
+                    <td>1412</td>
+                    <td>1.4</td>
+                    <td>25.3</td>
+                </tr>
+                <tr>
+                    <td><strong>Sydney</strong></td>
+                    <td>Brisbane</td>
+                    <td>982</td>
+                    <td>1.5</td>
+                    <td>16</td>
+                </tr>
+                <tr>
+                    <td><strong>Sydney</strong></td>
+                    <td>Canberra</td>
+                    <td>286</td>
+                    <td>.6</td>
+                    <td>4.3</td>
+                </tr>
+                <tr>
+                    <td><strong>Sydney</strong></td>
+                    <td>Melbourne</td>
+                    <td>872</td>
+                    <td>1.1</td>
+                    <td>10.5</td>
+                </tr>
+                <tr>
+                    <td><strong>Adelaide</strong></td>
+                    <td>Perth</td>
+                    <td>2781</td>
+                    <td>3.1</td>
+                    <td>38</td>
+                </tr>
+                <tr>
+                    <td><strong>Adelaide</strong></td>
+                    <td>Alice Springs</td>
+                    <td>1533</td>
+                    <td>2</td>
+                    <td>20.25</td>
+                </tr>
+                <tr>
+                    <td><strong>Adelaide</strong></td>
+                    <td>Brisbane</td>
+                    <td>2045</td>
+                    <td>2.15</td>
+                    <td>40</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <script src="../dist/tablefilter/tablefilter.js"></script>
+        <script src="test-no-filters.js"></script>
+
+        <div id="qunit"></div>
+        <div id="qunit-fixture"></div>
+    </body>
+</html>

test/test-no-filters.js

@@ -0,0 +1,44 @@
+(function(win, TableFilter){
+
+    var tf = new TableFilter('demo', {
+        base_path: '../dist/tablefilter/',
+        grid: false
+    });
+    tf.init();
+
+    module('Sanity checks');
+    test('No filters', function() {
+        deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
+        deepEqual(tf.getFilterElement(0), null,
+            'No filter element for column 0');
+    });
+
+    test('Paging with no filters', function() {
+        tf.destroy();
+        tf = null;
+        tf = new TableFilter('demo', {
+            base_path: '../dist/tablefilter/',
+            grid: false,
+            paging: true,
+            paging_length: 3
+        });
+        tf.init();
+        deepEqual(tf.getFilterElement(4), null,
+            'No filter element for column 4');
+    });
+
+    test('Grid layout with no filters', function() {
+        tf.destroy();
+        tf = null;
+        tf = new TableFilter('demo', {
+            base_path: '../dist/tablefilter/',
+            grid_enable_default_filters: false,
+            col_width: ['100px','100px','100px','100px','100px'],
+            grid_layout: true
+        });
+        tf.init();
+        deepEqual(tf.getFilterElement(2), null,
+            'No filter element for column 2');
+    });
+
+})(window, TableFilter);

test/test-paging.html

@@ -5,6 +5,7 @@
         <title>TableFilter paging</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-popup-filter.html

@@ -5,6 +5,7 @@
         <title>TableFilter pop-up filter</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-rows-counter.html

@@ -5,6 +5,7 @@
         <title>TableFilter alternate rows tests</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-sort-custom-sorter.html

@@ -5,6 +5,7 @@
         <title>TableFilter sort - custom sorter</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-sort-grid-layout.html

@@ -5,6 +5,7 @@
         <title>TableFilter column sort with grid layout mode</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-sort-key.html

@@ -5,6 +5,7 @@
         <title>TableFilter sort by key</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-sort.html

@@ -5,6 +5,7 @@
         <title>TableFilter column sort</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-status-bar.html

@@ -5,6 +5,7 @@
         <title>TableFilter status bar</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test-store.html

@@ -5,6 +5,7 @@
         <title>TableFilter store</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">

test/test.html

@@ -5,6 +5,7 @@
         <title>TableFilter basic test</title>
         <link rel="stylesheet" href="libs/qunit/qunit.css">
         <script src="libs/qunit/qunit.js"></script>
+        <script src="libs/polyfill.js"></script>
     </head>
     <body>
         <table id="demo" cellpadding="0" cellspacing="0">