Examples

In this page you will find a collection of examples showing how to configure the HTML Table Filter Generator script.

---

Here you have a regular HTML table:

WORLD INTERNET USAGE AND POPULATION STATISTICS

World Regions	Population ( 2007 Est.)	Population % of World	% Population ( Penetration )	Usage % of World
Africa	933,448,292	14.2 %	3.5 %	3.0 %
Asia	3,712,527,624	56.5 %	10.5 %	35.6 %
Europe	809,624,686	12.3 %	38.6 %	28.6 %
Middle East	193,452,727	2.9 %	10.0 %	1.8 %
North America	334,538,018	5.1 %	69.4 %	21.2 %
Latin America / Caribbean	556,606,627	8.5 %	16.0 %	8.1 %
Oceania / Australia	34,468,443	0.5 %	53.5 %	1.7 %

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	% Population ( Penetration )	Usage % of World
Africa	933,448,292	14.2 %	3.5 %	3.0 %
Asia	3,712,527,624	56.5 %	10.5 %	35.6 %
Europe	809,624,686	12.3 %	38.6 %	28.6 %
Middle East	193,452,727	2.9 %	10.0 %	1.8 %
North America	334,538,018	5.1 %	69.4 %	21.2 %
Latin America / Caribbean	556,606,627	8.5 %	16.0 %	8.1 %
Oceania / Australia	34,468,443	0.5 %	53.5 %	1.7 %

<script language="javascript" type="text/javascript">
//<![CDATA[
	var tf1 = 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	% Population ( Penetration )	Usage % of World
Africa	933,448,292	14.2 %	3.5 %	3.0 %
Asia	3,712,527,624	56.5 %	10.5 %	35.6 %
Europe	809,624,686	12.3 %	38.6 %	28.6 %
Middle East	193,452,727	2.9 %	10.0 %	1.8 %
North America	334,538,018	5.1 %	69.4 %	21.2 %
Latin America / Caribbean	556,606,627	8.5 %	16.0 %	8.1 %
Oceania / Australia	34,468,443	0.5 %	53.5 %	1.7 %

<script language="javascript" type="text/javascript">
//<![CDATA[	
	var table2_Props = 	{					
					col_0: "select",
					col_4: "none",
					display_all_text: " [ Show all ] ",
					sort_select: true
				};
	var tf2 = 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	% Population ( Penetration )	Usage % of World
Additional row
Africa	933,448,292	14.2 %	3.5 %	3.0 %
Asia	3,712,527,624	56.5 %	10.5 %	35.6 %
Europe	809,624,686	12.3 %	38.6 %	28.6 %
Middle East	193,452,727	2.9 %	10.0 %	1.8 %
North America	334,538,018	5.1 %	69.4 %	21.2 %
Latin America / Caribbean	556,606,627	8.5 %	16.0 %	8.1 %
This row is always visible
Oceania / Australia	34,468,443	0.5 %	53.5 %	1.7 %
Last row is always visible

<script language="javascript" type="text/javascript">
//<![CDATA[	
	var table3_Props = { rows_always_visible:[10,12] };	
	var tf3 = setFilterGrid( "table3",table3_Props,3 );
//]]>
</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	Usage % of World
Africa	933,448,292	14.2 %	3.0 %
Asia	3,712,527,624	56.5 %	35.6 %
Europe	809,624,686	12.3 %	28.6 %
Middle East	193,452,727	2.9 %	1.8 %
North America	334,538,018	5.1 %	21.2 %
Latin America / Caribbean	556,606,627	8.5 %	8.1 %
Oceania / Australia	34,468,443	0.5 %	1.7 %

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table4_Props = 	{
					col_0: "select",
					on_change: false,
					btn: true,
					enter_key: false
				}
	var tf4 = 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	% Population ( Penetration )	Usage % of World
Africa	933,448,292	14.2 %	3.5 %	3.0 %
Asia	3,712,527,624	56.5 %	10.5 %	35.6 %
Europe	809,624,686	12.3 %	38.6 %	28.6 %
Middle East	193,452,727	2.9 %	10.0 %	1.8 %
North America	334,538,018	5.1 %	69.4 %	21.2 %
Latin America / Caribbean	556,606,627	8.5 %	16.0 %	8.1 %
Oceania / Australia	34,468,443	0.5 %	53.5 %	1.7 %

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table5_Props = 	{
					exact_match: true,
					alternate_rows: true,
					col_width: ["120px","170px",null,null,null],//prevents column width variations
					rows_counter: true,
					rows_counter_text: "Total rows: ",
					btn_reset: true,
					btn_reset_text: "Clear all "
				};
	var tf5 = 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	% Population ( Penetration )	Usage % of World
Africa	933,448,292	14.2 %	3.5 %	3.0 %
Asia	3,712,527,624	56.5 %	10.5 %	35.6 %
Europe	809,624,686	12.3 %	38.6 %	28.6 %
Middle East	193,452,727	2.9 %	10.0 %	1.8 %
North America	334,538,018	5.1 %	69.4 %	21.2 %
Latin America / Caribbean	556,606,627	8.5 %	16.0 %	8.1 %
Oceania / Australia	34,468,443	0.5 %	53.5 %	1.7 %

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

Top of page

---

TABLE 7

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

World Regions	Population ( 2007 Est.)	Population % of World	% Population ( Penetration )	Usage % of World
Africa	933,448,292	14.2 %	3.5 %	3.0 %
Asia	3,712,527,624	56.5 %	10.5 %	35.6 %
Europe	809,624,686	12.3 %	38.6 %	28.6 %
Middle East	193,452,727	2.9 %	10.0 %	1.8 %
North America	334,538,018	5.1 %	69.4 %	21.2 %
Latin America / Caribbean	556,606,627	8.5 %	16.0 %	8.1 %
Oceania / Australia	34,468,443	0.5 %	53.5 %	1.7 %
Total:

<script language="javascript" type="text/javascript">
//<![CDATA[
var totRowIndex = tf_Tag(tf_Id('table7'),"tr").length;
	var table7_Props = 	{
					rows_counter: true,
					loader: true,
					loader_text: "Filtering data...",
					col_operation: { 
								id: ["table8Tot1","table8Tot2"],
								col: [2,4],
								operation: ["sum","sum"],
								write_method: ["innerHTML","setValue"],
								exclude_row: [totRowIndex],
								decimal_precision: [1,0]
							},
					rows_always_visible: [totRowIndex]						
				};
var tf7 = setFilterGrid( "table7",table7_Props );
//*** Note ***
//You can also write operation results in elements outside the table.	
//]]>
</script>

Top of page

---

TABLE 8

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

World Regions	Population ( 2007 Est.)	Population % of World	% Population ( Penetration )	Usage % of World
Africa	933,448,292	14.2 %	3.5 %	3.0 %
Asia	3,712,527,624	56.5 %	10.5 %	35.6 %
Europe	809,624,686	12.3 %	38.6 %	28.6 %
Middle East	193,452,727	2.9 %	10.0 %	1.8 %
North America	334,538,018	5.1 %	69.4 %	21.2 %
Latin America / Caribbean	556,606,627	8.5 %	16.0 %	8.1 %
Oceania / Australia	34,468,443	0.5 %	53.5 %	1.7 %

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table8_Props = 	{
					col_0: "select"
				};
	var tf8 = etFilterGrid( "table8",table8_Props );
//]]>
</script>

<!-- buttons code below -->
<input type="button" value="Check if it has grid" onclick="alert( tf_table8.HasGrid() );" /> 
<input type="button" value="Filter table" onclick="tf_table8.Filter();" />
<input type="button" value="Clear grid" onclick="tf_table8.ClearFilters(); tf_table8.Filter();" />
<input type="button" value="Remove grid" onclick="tf_table8.RemoveGrid();" />
<input type="button" value="Reset filter grid" onclick="tf_table8.AddGrid();" />
<input type="button" value="Get starting row index" onclick="alert( tf_table8.GetStartRowIndex() );" />
<input type="button" value="Get last row index" onclick="alert( tf_table8.GetLastRowIndex() );" />
<input type="button" value="Get valid rows index" onclick="alert( tf_table8.GetValidRowsIndex() );" />
<input type="button" value="Get filters ids" onclick="alert( tf_table8.GetFiltersId() );" />
<input type="button" value="Get filter value col 2" onclick="alert( tf_table8.GetFilterValue(2) ); " />
<input type="button" value="Set filter value col 2" onclick="tf_table8.SetFilterValue(2,'keyword here');" />
<input type="button" value="Return column 0 values" onclick="alert( tf_table8.GetColValues(0,false) );" />
<input type="button" value="Return table data" onclick="alert( tf_table8.GetTableData() );" />

Top of page

---

TABLE 9

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

World Regions	Population ( 2007 Est.)	Population % of World	% Population ( Penetration )	Usage % of World
Africa	933,448,292	14.2 %	3.5 %	3.0 %
Asia	3,712,527,624	56.5 %	10.5 %	35.6 %
Europe	809,624,686	12.3 %	38.6 %	28.6 %
Middle East	193,452,727	2.9 %	10.0 %	1.8 %
North America	334,538,018	5.1 %	69.4 %	21.2 %
Latin America / Caribbean	556,606,627	8.5 %	16.0 %	8.1 %
Oceania / Australia	34,468,443	0.5 %	53.5 %	1.7 %

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table9_Props = {
					paging: true,
					paging_length: 2,
					results_per_page: ['# rows per page',[2,4,6]],
					rows_counter: true,
					rows_counter_text: "Rows:",
					btn_reset: true,
					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>'
				};
	var tf9 = setFilterGrid( "table9",table9_Props );
//]]>
</script>

Top of page

---

TABLE 10

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

World Regions	Population ( 2007 Est.)	Population % of World	% Population ( Penetration )	Usage % of World
Africa	933 448 292	14.2	3.5	3.0 %
Asia	3 712 527 624	56.5	10.5	35.6 %
Europe	809 624 686	12.3	38.6	28.6 %
Middle East	193 452 727	2.9	10.0	1.8 %
North America	334 538 018	5.1	69.4	21.2 %
Latin America / Caribbean	556 606 627	8.5	16.0	8.1 %
Oceania / Australia	34 468 443	0.5	53.5	1.7 %

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table10_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_3: 'select',
					sort_num_asc: [2],
					sort_num_desc: [3],
					refresh_filters: true
				};
	var tf10 = setFilterGrid( "table10",table10_Props );
//]]>
</script>

Top of page

---

TABLE 11

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

World Regions	Population ( 2007 Est.)	Population % of World	% Population ( Penetration )	Usage % of World
Africa	933 448 292	14.2	3.5	3.0 %
Asia	3 712 527 624	56.5	10.5	35.6 %
Europe	809 624 686	12.3	38.6	28.6 %
Middle East	193 452 727	2.9	10.0	1.8 %
North America	334 538 018	5.1	69.4	21.2 %
Latin America / Caribbean	556 606 627	8.5	16.0	8.1 %
Oceania / Australia	34 468 443	0.5	53.5	1.7 %

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

Top of page

---

TABLE 12

Set a single filter feature, highlight searched keyword and enable the search as you type feature, enable row selection

World Regions	Population ( 2007 Est.)	Population % of World	% Population ( Penetration )	Usage % of World
Africa	933 448 292	14.2	3.5	3.0 %
Asia	3 712 527 624	56.5	10.5	35.6 %
Europe	809 624 686	12.3	38.6	28.6 %
Middle East	193 452 727	2.9	10.0	1.8 %
North America	334 538 018	5.1	69.4	21.2 %
Latin America / Caribbean	556 606 627	8.5	16.0	8.1 %
Oceania / Australia	34 468 443	0.5	53.5	1.7 %

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table12_Props = {
				highlight_keywords: true,
				on_keyup: true,
				on_keyup_delay: 1500,
				single_search_filter: true,
				selectable: true
			};
	var tf12 = setFilterGrid( "table11",table12_Props );
//]]>
</script>

Top of page

---