HTML Table Filter Generator

This demo shows how to use this script in AJAX environment (prototype framework). The table is refreshed when a group is changed.



Keep Ctrl key pressed for multiple selections






Keep Ctrl key pressed for multiple selections





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