This demo shows how to use this script in AJAX environment (prototype framework). The table is refreshed upon validation.
var props = {// filter grid configuration filters_row_index: 1, alternate_rows: true, rows_counter: true, rows_counter_text: "Displayed rows: ", loader: true, loader_html: 'Loading...', loader_css_class: 'myLoader', btn_reset: true, status: true, status_bar: true, status_bar_target_id: 'loadLabel2', col_1: "select", col_2: "select", remember_grid_values: true, col_width: ["150px","100px","100px","70px","70px","70px","70px","70px","70px"], //Column resize feature extensions: { name:['ColumnsResizer'], src:['TableFilter/TFExt_ColsResizer/TFExt_ColsResizer.js'], description:['Columns Resizing'], initialize:[function(o){o.SetColsResizer();}] }, col_resizer_all_cells: true } 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'); }, loadContent: function() { this.loadLabel.update('Loading data...'); var grp = tf_Id('slcGrp').value; this.removeFilterGrid(this.tableId);//if filter already exists if( grp!='' ) { if(tf_Id('chkPaging').checked) this.setPaging(props); else this.removePaging(props); this.ajaxReq( this[grp],this.content ); } else { this.content.update("Choose a group."); this.loadLabel.update(''); } }, 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); }, removeFilterGrid: function(id) { if( !tf_isObject( 'tf_'+id ) ) return; this.loadLabel.update('Removing filters...'); eval( 'tf_'+id+'.RemoveGrid();' ); }, removePaging: function(config) { config.paging = false; }, setPaging: function(config) { config.paging = true; config.results_per_page = ['Results per page',[25,50,100]]; } }//TFC