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 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:
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
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
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
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
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: ["150px","180px"],//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
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
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 );
//]]>
</script>
Top of page
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 totRowIndex = tf_Tag(tf_Id('table8'),"tr").length;
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"],
exclude_row: [totRowIndex],
decimal_precision: [1,0]
},
rows_always_visible: [totRowIndex]
};
setFilterGrid( "table8",table8_Props );
/*** Note ***
You can also write operation results in elements outside the table.
*** ***/
//]]>
</script>
Top of page
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="Return starting row" onclick="alert( TF_GetStartRow(tf_Id('slcEx').value) );" />
<input type="button" value="Get filters ids" onclick="alert( TF_GetFilters(tf_Id('slcEx').value) );" />
<input type="button" value="Get filter value" onclick="alert(TF_GetFilterValue(tf_Id('slcEx').value,2));" />
<input type="button" value="Set filter value" onclick="TF_SetFilterValue(tf_Id('slcEx').value,2,'Search string here');" />
<input type="button" value="Return column values" onclick="alert( TF_GetColValues(tf_Id('slcEx').value,0) );" />
<input type="button" value="Set next page" onclick="TF_SetPage(tf_Id('slcEx').value,'next');" />
<input type="button" value="Set previous page" onclick="TF_SetPage(tf_Id('slcEx').value,'previous');" />
<input type="button" value="Return table data" onclick="alert( TF_GetTableData(tf_Id('slcEx').value) );" />
Top of page
Set 'reset' button HTML, loader HTML, paging buttons HTML and number of results per page
| 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 = {
paging: true,
results_per_page: ['# rows per page',[2,4,6]],
rows_counter: true,
btn_reset: true,
btn_reset_html: '<input type="button" value="reset" class="pgInp" />',
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>'
};
setFilterGrid( "table10",table10_Props );
//]]>
</script>
Top of page
Set paging buttons text, numeric ascending/descending order for drop-down menus, refreshing filters behavior
| 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 table11_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_4: 'select',
sort_num_asc: [2],
sort_num_desc: [4],
refresh_filters: true
};
setFilterGrid( "table11",table11_Props );
//]]>
</script>
Top of page
Set filters under table headers, make filters case sensitive, remember filters' values on page re-load
| 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 table12_Props = {
filters_row_index: 1,
match_case: true,
remember_grid_values: true
};
setFilterGrid( "table12",table12_Props );
//]]>
</script>
Top of page