Examples

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

  • Table 1: add the filter grid
  • Table 2: add a drop-down filter, define its first option, sort it and remove a filter
  • Table 3: set the starting row for the filtering process and make a row always visible
  • Table 4: disable 'enter' key and "onchange" event of drop-down filters, add a "Filter" button
  • Table 5: enable exact query matches, set alternating rows background color, set column widths, add rows counter and reset button
  • Table 6: set pagination, enable loader, set rows counter and reset button
  • Table 7: set the last row always visible and perform a sum operation on 2 columns
  • Table 8: perform actions and retrieve information from the grid by using public functions
  • Table 9: set pagination buttons HTML, number of results per page and loader HTML
  • Table 10: set numeric ascending/descending order for drop-down menu filters and enable refreshing filters behavior
  • Table 11: position filters under headers, make filters case sensitive, remember filters' values across page re-loads
  • Table 12: enable the single filter feature, the search as you type behavior, row selection and highlight searched keyword

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 %

View Fiddle

<script language="javascript" type="text/javascript">
//<![CDATA[
	var tf1 = setFilterGrid("table1");
//]]>
</script>
Top of page

TABLE 2

Add a drop-down filter, 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 %

View Fiddle

<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

Set the starting row for the 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

View Fiddle

<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 and "onchange" event of drop-down filters, add a "Filter" button

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 %

View Fiddle

<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 %

View Fiddle

<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
				};
	var tf5 = setFilterGrid( "table5",table5_Props );
//]]>
</script>
Top of page

TABLE 6

Set pagination, 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 %

View Fiddle

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

View Fiddle

<script language="javascript" type="text/javascript">
//<![CDATA[
var totRowIndex = tf_Tag(tf_Id('table7'),"tr").length;
	var table7_Props = 	{
					rows_counter: true,
					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 %

View Fiddle

<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 pagination buttons HTML, number of results per page and loader HTML

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 %

View Fiddle

<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 numeric ascending/descending order for drop-down menu filters and enable 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 %

View Fiddle

<script language="javascript" type="text/javascript">
//<![CDATA[
	var table10_Props = {
		paging: true,
		paging_length: 3,
		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

Position filters under headers, make filters case sensitive, remember filters' values across page re-loads

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 %

View Fiddle

<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

Enable the single filter feature, the search as you type behavior, row selection and highlight searched keyword

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 %

View Fiddle

<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
E.n.j.o.y.  ads-free content!