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:

WORLD INTERNET USAGE AND POPULATION STATISTICS
World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %

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

TABLE 1

Add the filter grid

World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %
<script language="javascript" type="text/javascript">
//<![CDATA[
	setFilterGrid("table1");
//]]>
</script>
Top of page

TABLE 2

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

World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %
<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>
Top of page

TABLE 3

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

Additional row
World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Additional row
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
This row is always visible
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %
Last row is always visible
<script language="javascript" type="text/javascript">
//<![CDATA[	
	var table3_Props = { rows_always_visible:[10,12] };	
	setFilterGrid( "table3",table3_Props,2 );
//]]>
</script>
Top of page

TABLE 4

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

World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %
<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>
Top of page

TABLE 5

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

World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %

<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>
Top of page

TABLE 6

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

World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %

<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>
Top of page

TABLE 7

Disable filter grid and set paging

World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %

<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>
Top of page

TABLE 8

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

World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %
Total:

<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>
Top of page

TABLE 9

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

Choose table and perform action:
World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %

<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) );" />
Top of page

TABLE 10

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

World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933,448,292 14.2 % 32,765,700 3.5 % 3.0 % 625.8%
Asia 3,712,527,624 56.5 % 389,392,288 10.5 % 35.6 % 240.7 %
Europe 809,624,686 12.3 % 312,722,892 38.6 % 28.6 % 197.6 %
Middle East 193,452,727 2.9 % 19,382,400 10.0 % 1.8 % 490.1 %
North America 334,538,018 5.1 % 232,057,067 69.4 % 21.2 % 114.7 %
Latin America / Caribbean 556,606,627 8.5 % 88,778,986 16.0 % 8.1 % 391.3 %
Oceania / Australia 34,468,443 0.5 % 18,430,359 53.5 % 1.7 % 141.9 %

<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>
Top of page

TABLE 11

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

World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933 448 292 14.2 32,765,700 3.5 3.0 % 625.8%
Asia 3 712 527 624 56.5 389,392,288 10.5 35.6 % 240.7 %
Europe 809 624 686 12.3 312,722,892 38.6 28.6 % 197.6 %
Middle East 193 452 727 2.9 19,382,400 10.0 1.8 % 490.1 %
North America 334 538 018 5.1 232,057,067 69.4 21.2 % 114.7 %
Latin America / Caribbean 556 606 627 8.5 88,778,986 16.0 8.1 % 391.3 %
Oceania / Australia 34 468 443 0.5 18,430,359 53.5 1.7 % 141.9 %

<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>
Top of page

TABLE 12

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

World Regions Population ( 2007 Est.) Population % of World Internet Usage, Latest Data % Population ( Penetration ) Usage % of World Usage Growth 2000-2007
Africa 933 448 292 14.2 32,765,700 3.5 3.0 % 625.8%
Asia 3 712 527 624 56.5 389,392,288 10.5 35.6 % 240.7 %
Europe 809 624 686 12.3 312,722,892 38.6 28.6 % 197.6 %
Middle East 193 452 727 2.9 19,382,400 10.0 1.8 % 490.1 %
North America 334 538 018 5.1 232,057,067 69.4 21.2 % 114.7 %
Latin America / Caribbean 556 606 627 8.5 88,778,986 16.0 8.1 % 391.3 %
Oceania / Australia 34 468 443 0.5 18,430,359 53.5 1.7 % 141.9 %

<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>
Top of page