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

World Regions	Population ( 2007 Est.)	Population % of World	% Population ( Penetration )	Usage % of World
Additional row
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

Search results

Examples

TABLE 1

TABLE 2

TABLE 3

TABLE 4

TABLE 5

TABLE 6

TABLE 7

TABLE 8

TABLE 9

TABLE 10

TABLE 11

TABLE 12