This demo shows how to use this script in AJAX environment (prototype framework). The table is refreshed when a group is changed.
var props = {// filter grid configuration external_flt_grid: true, external_flt_grid_ids: ['slcCountry','slcCode','slcYear','inpPop'], alternate_rows: true, rows_counter: true, rows_counter_text: "Displayed rows: ", loader: true, loader_text: "Filtering data...", loader_html: 'Loading...', loader_css_class: 'myLoader', status: true, status_bar: true, status_bar_target_id: 'loadLabel2', col_0: "multiple", col_1: "select", col_2: "multiple" } var TFC = Class.create(); TFC.prototype = { initialize: function() { this.content = $('content'); this.grp01 = 'group1.htm'; this.grp02 = 'group2.htm'; this.grp03 = 'group3.htm'; this.loader = props.loader_html; this.tableId = 'demo'; this.loadLabel = $('loadLabel'); this.isLoaded = false; }, ajaxReq: function( url,id ) { this.loadLabel.update('Loading data...'); $(id).update(this.loader); var _this = this; function applyReq() { _this.setFilterGrid(_this.tableId,props); _this.loadLabel.update(''); } var req = new Ajax.Updater(id, url, { method: "get", onComplete: applyReq, onException: function() { $(id).update('Could not load data!'); } }); }, setFilterGrid: function(id,config) { this.loadLabel.update('Creating filters...'); setFilterGrid(id,config); this.isLoaded = true; $('btnFlt').onclick = function(){ eval('tf_'+id+'.Filter();'); } $('btnClr').onclick = function(){ eval('tf_'+id+'.ClearFilters(); tf_'+id+'.Filter();'); } }, removeFilterGrid: function(id) { if( !tf_isObject( 'tf_'+id ) ) return; this.loadLabel.update('Removing filters...'); eval( 'tf_'+id+'.RemoveGrid();' ); }, removeExternalFilters: function(id) { if(!this.isLoaded) return; //this.removeFilterGrid(id); this.loadLabel.update('Removing external filters...'); eval('tf_'+id+'.RemoveExternalFlts();'); $('btnFlt').onclick = null; $('btnClr').onclick = null; this.loadLabel.update(''); } }//TFC