Examples

HTML Table Filter Generator is no longer maintained, it is now replaced by the TableFilter project. Don't hesitate to check the demos out in their new location along with exhaustive documentation in the project's WIKI.

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!