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