HTML Table Filter Generator v1.6 examples

In this page you will find a collection of examples showing how to use the HTML Table Filter Generator properties and public functions.

Here you have a regular HTML table:

Below some examples of how to apply the filter grid to the same table:

TABLE 1

Add the filter grid

<script language="javascript" type="text/javascript">
//<![CDATA[
	setFilterGrid("table1");
//]]>
</script>

TABLE 2

Add a drop-down list, define its first option, sort it and remove a filter

<script language="javascript" type="text/javascript">
//<![CDATA[	
	var table2_Props = 	{					
					col_0: "select",
					col_5: "none",
					display_all_text: " [ Show all ] ",
					sort_select: true
				};
	setFilterGrid( "table2",table2_Props );
//]]>
</script>

TABLE 3

Define a start row for filtering process and make a row always visible

<script language="javascript" type="text/javascript">
//<![CDATA[	
	var table3_Props = { rows_always_visible:[10,12] };	
	setFilterGrid( "table3",table3_Props,2 );
//]]>
</script>

TABLE 4

Disable 'enter' key detection, disable "onchange" event on combo-box, add "go" button and call another function upon validation...

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table4_Props = 	{
					col_0: "select",
					on_change: false,
					btn: true,
					btn_text: "go",
					enter_key: false,
					mod_filter_fn: function(){ alert('Another function is called upon validation'); TF_Filter('table4'); };
				}
	setFilterGrid( "table4",table4_Props );
//]]>
</script>

TABLE 5

Enable exact query matches, set alternating rows background color, set column widths, add rows counter and reset button

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table5_Props = 	{
					exact_match: true,
					alternate_rows: true,
					col_width: ["250px","200px"],//prevents column width variations
					rows_counter: true,
					rows_counter_text: "Total rows: ",
					btn_reset: true,
					bnt_reset_text: "Clear all "
				};
	setFilterGrid( "table5",table5_Props );
//]]>
</script>

TABLE 6

Set paging, enable loader, set rows counter and reset button

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table6_Props = 	{
					paging: true,
					paging_length: 3,
					rows_counter: true,
					btn_reset: true,
					loader: true,
					loader_text: "Filtering data..."
				};
	setFilterGrid( "table6",table6_Props );
//]]>
</script>

TABLE 7

Disable filter grid and set paging

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table7_Props = 	{
						grid: false,
						paging: true,
						paging_length: 3,
						rows_counter: true,
						loader: true,
						loader_text: "Filtering data..."
				};
	setFilterGrid( "table7",table7_Props,-1 );
	/*** Note ***
		Since grid row is not generated, use -1 as start row index for paging.
	*** ***/	
//]]>
</script>

TABLE 8

Set the last row always visible and perform a sum operation on 2 columns

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table8_Props = 	{
					rows_counter: true,
					loader: true,
					loader_text: "Filtering data...",
					col_operation: { 
								id: ["table8Tot1","table8Tot2"],
								col: [2,5],
								operation: ["sum","sum"],
								write_method: ["innerHTML","setValue"] 
							},
					rows_always_visible: [grabTag(grabEBI('table8'),"tr").length]						
				};
	setFilterGrid( "table8",table8_Props );
	/*** Note ***
		You can also write operation results in elements outside the table.
	*** ***/	
//]]>
</script>

TABLE 9

Perform actions and retrieve information from the grid by using public functions

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table9_Props = 	{
					col_0: "select"
				};
	setFilterGrid( "table9",table9_Props );
//]]>
</script>
<!-- buttons code below -->

<input type="button" value="Show grid ids" onclick="alert( TF_GetFilterIds() );" />

<select id="slcEx">
	<option value="table1">table1</option>
	<option value="table2">table2</option>
	<option value="table3">table3</option>
	<option value="table4">table4</option>
	<option value="table5">table5</option>
	<option value="table6">table6</option>
	<option value="table7">table7</option>
	<option value="table8">table8</option>
	<option value="table9" selected="">table9</option>
	<option value="table10">table10</option>
	<option value="table11">table11</option>	
	<option value="table12">table12</option>
</select>

<input type="button" value="Check if it has grid" onclick="alert( TF_HasGrid( grabEBI('slcEx').value ) );" />

<input type="button" value="Filter table" onclick="TF_Filter( grabEBI('slcEx').value );" />

<input type="button" value="Clear grid" onclick="TF_ClearFilters(grabEBI('slcEx').value); TF_Filter(grabEBI('slcEx').value);" />

<input type="button" value="Remove grid" onclick="TF_RemoveFilterGrid(grabEBI('slcEx').value);" />
<input type="button" value="Reset filter grid" 
	onclick="var gid=grabEBI('slcEx').value;
				if( grabEBI( gid )!=null )
				setFilterGrid( gid, grabEBI( gid ).tf_Obj, grabEBI( gid ).tf_ref_row ); " />

<input type="button" value="Return starting row" onclick="alert( TF_GetStartRow(grabEBI('slcEx').value) );" />

<input type="button" value="Get filters ids" onclick="alert( TF_GetFilters(grabEBI('slcEx').value) );" />

<input type="button" value="Set filter value" onclick="TF_SetFilterValue(grabEBI('slcEx').value,2,'Search string here');" />

<input type="button" value="Return column values" onclick="alert( TF_GetColValues(grabEBI('slcEx').value,0) );" />
 

TABLE 10

Add an autocomplete feature to 1st column by binding an external script

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table10_Props = 	{
					bind_script:{ name:"autocomplete", target_fn: setAutoComplete }
				};
	setFilterGrid( "table10",table10_Props );
	//Refer to 'bind an external script' section. Those fns do not belong to the filter grid script. 
	//You may need to develop intermediate fns to interface with external scripts.
//]]>
</script>