# 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:

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: ["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>

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,-1 );
    	/*** Note ***
    		Since grid row is not generated, use -1 as start row index for paging.
    	*** ***/
    //]]>
    </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 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>

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="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) );" />

Top of page

## TABLE 10

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

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 = 	{
    					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>

Top of page