HTML Table Filter Generator v1.7 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: ["150px","180px"],//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 );	
//]]>
</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 totRowIndex = tf_Tag(tf_Id('table8'),"tr").length;
	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"],
								exclude_row: [totRowIndex],
								decimal_precision: [1,0]
							},
					rows_always_visible: [totRowIndex]						
				};
	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="Return starting row" onclick="alert( TF_GetStartRow(tf_Id('slcEx').value) );" />	
<input type="button" value="Get filters ids" onclick="alert( TF_GetFilters(tf_Id('slcEx').value) );" />
<input type="button" value="Get filter value" onclick="alert(TF_GetFilterValue(tf_Id('slcEx').value,2));" />
<input type="button" value="Set filter value" onclick="TF_SetFilterValue(tf_Id('slcEx').value,2,'Search string here');" />
<input type="button" value="Return column values" onclick="alert( TF_GetColValues(tf_Id('slcEx').value,0) );" />
<input type="button" value="Set next page" onclick="TF_SetPage(tf_Id('slcEx').value,'next');" />
<input type="button" value="Set previous page" onclick="TF_SetPage(tf_Id('slcEx').value,'previous');" />			
<input type="button" value="Return table data" onclick="alert( TF_GetTableData(tf_Id('slcEx').value) );" />

TABLE 10

Set 'reset' button HTML, loader HTML, paging buttons HTML and number of results per page

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table10_Props = {
				paging: true,
				results_per_page: ['# rows per page',[2,4,6]],
				rows_counter: true,
				btn_reset: true,
				btn_reset_html: '<input type="button" value="reset" class="pgInp" />',
				btn_next_page_html: '<a href="javascript:;" style="margin:3px;">Next ></a>',
				btn_prev_page_html: '<a href="javascript:;" style="margin:3px;">< Previous</a>',
				btn_last_page_html: '<a href="javascript:;" style="margin:3px;"> Last >|</a>',
				btn_first_page_html: '<a href="javascript:;" style="margin:3px;"><| First</a>',
				loader: true,
				loader_html: '<h4 style="color:red;">Loading, please wait...</h4>'
						};
	setFilterGrid( "table10",table10_Props );
//]]>
</script>

TABLE 11

Set paging buttons text, numeric ascending/descending order for drop-down menus, refreshing filters behavior

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table11_Props = {
				paging: true,
				paging_length: 3,
				btn_next_page_text: 'Next >',
				btn_prev_page_text: '< Prev',
				btn_last_page_text: 'Last >>',
				btn_first_page_text: '<< First',
				col_2: 'select',
				col_4: 'select',
				sort_num_asc: [2],
				sort_num_desc: [4],
				refresh_filters: true
						};
	setFilterGrid( "table11",table11_Props );
//]]>
</script>

TABLE 12

Set filters under table headers, make filters case sensitive, remember filters' values on page re-load

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table12_Props = {
				filters_row_index: 1,
				match_case: true,
				remember_grid_values: true
						};
	setFilterGrid( "table12",table12_Props );
//]]>
</script>