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