HTML Table Filter Generator

This demo shows how to use this script in AJAX environment (prototype framework). The table is refreshed upon validation.


 Paging:
 
Choose a group.
 
	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