1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<title>HTML Table Filter Generator v1.6 - Examples</title> 5<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 6<style type="text/css" media="screen"> 7/*==================================================== 8 - HTML Table Filter stylesheet 9=====================================================*/ 10@import "filtergrid.css"; 11 12/*==================================================== 13 - General html elements 14=====================================================*/ 15body{ 16 margin:15px; padding:15px; border:1px solid #666; 17 font-family:Arial, Helvetica, sans-serif; font-size:88%; 18} 19h2{ margin-top: 50px; } 20caption{ margin:10px 0 0 5px; padding:10px; text-align:left; } 21pre{ font-size:13px; margin:5px; padding:5px; background-color:#f4f4f4; border:1px solid #ccc; } 22.mytable{ 23 width:100%; font-size:12px; 24 border:1px solid #ccc; 25} 26div.tools{ margin:5px; } 27div.tools input{ background-color:#f4f4f4; border:2px outset #f4f4f4; margin:2px; } 28th{ background-color:#003366; color:#FFF; padding:2px; border:1px solid #ccc; } 29td{ padding:2px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; } 30 31</style> 32<script language="javascript" type="text/javascript" src="actb.js"></script><!-- External script --> 33<script language="javascript" type="text/javascript" src="tablefilter.js"></script> 34</head> 35 36<body> 37<a name="top" id="top"></a> 38<h1>HTML Table Filter Generator v1.6 examples</h1> 39<p>In this page you will find a collection of examples showing how to use the HTML Table Filter Generator properties and public functions.</p> 40<div id="toc"> 41 <ul> 42 <li><a href="#tbl1">Table 1: add the filter grid</a></li> 43 <li><a href="#tbl2">Table 2: add a drop-down list, define its first option, sort it and remove a filter</a></li> 44 <li><a href="#tbl3">Table 3: define a start row for filtering process and make a row always visible</a></li> 45 <li><a href="#tbl4">Table 4: disable 'enter' key detection, disable "onchange" event on combo-box, add "go" button and call another function upon validation...</a></li> 46 <li><a href="#tbl5">Table 5: enable exact query matches, set alternating rows background color, set column widths, add rows counter and reset button</a></li> 47 <li><a href="#tbl6">Table 6: set paging, enable loader, set rows counter and reset button</a></li> 48 <li><a href="#tbl7">Table 7: disable filter grid and set paging</a></li> 49 <li><a href="#tbl8">Table 8: set the last row always visible and perform a sum operation on 2 columns</a></li> 50 <li><a href="#tbl9">Table 9: perform actions and retrieve information from the grid by using public functions</a></li> 51 <li><a href="#tbl10">Table 10: add an autocomplete feature to 1st column by binding an external script</a></li> 52 </ul> 53</div> 54<p>Here you have a regular HTML table:</p> 55<table class="mytable" > 56 <caption>WORLD INTERNET USAGE AND POPULATION STATISTICS</caption> 57 <tr> 58 <th>World Regions</th> 59 <th>Population ( 2007 Est.)</th> 60 <th>Population % of World</th> 61 <th>Internet Usage, Latest Data</th> 62 <th>% Population ( Penetration )</th> 63 <th>Usage % of World</th> 64 <th>Usage Growth 2000-2007</th> 65 </tr> 66 <tr> 67 <td>Africa</td> 68 <td>933,448,292</td> 69 <td>14.2 %</td> 70 <td>32,765,700</td> 71 <td>3.5 %</td> 72 <td>3.0 %</td> 73 <td>625.8%</td> 74 </tr> 75 <tr> 76 <td>Asia</td> 77 <td>3,712,527,624</td> 78 <td>56.5 %</td> 79 <td>389,392,288</td> 80 <td>10.5 %</td> 81 <td>35.6 %</td> 82 <td>240.7 %</td> 83 </tr> 84 <tr> 85 <td>Europe</td> 86 <td>809,624,686</td> 87 <td>12.3 %</td> 88 <td>312,722,892</td> 89 <td>38.6 %</td> 90 <td>28.6 %</td> 91 <td>197.6 %</td> 92 </tr> 93 <tr> 94 <td>Middle East</td> 95 <td>193,452,727</td> 96 <td>2.9 %</td> 97 <td>19,382,400</td> 98 <td>10.0 %</td> 99 <td>1.8 %</td> 100 <td>490.1 %</td> 101 </tr> 102 <tr> 103 <td>North America</td> 104 <td>334,538,018</td> 105 <td>5.1 %</td> 106 <td>232,057,067</td> 107 <td>69.4 %</td> 108 <td>21.2 %</td> 109 <td>114.7 %</td> 110 </tr> 111 <tr> 112 <td>Latin America / Caribbean</td> 113 <td>556,606,627</td> 114 <td>8.5 %</td> 115 <td>88,778,986</td> 116 <td>16.0 %</td> 117 <td>8.1 %</td> 118 <td>391.3 %</td> 119 </tr> 120 <tr> 121 <td>Oceania / Australia</td> 122 <td>34,468,443</td> 123 <td>0.5 %</td> 124 <td>18,430,359</td> 125 <td>53.5 %</td> 126 <td>1.7 %</td> 127 <td>141.9 %</td> 128 </tr> 129</table> 130<p>Below some examples of how to apply the filter grid to the same table:</p> 131<h2><a name="tbl1" id="tbl1"></a>TABLE 1</h2> 132<p>Add the filter grid</p> 133<table id="table1" class="mytable" > 134 <tr> 135 <th>World Regions</th> 136 <th>Population ( 2007 Est.)</th> 137 <th>Population % of World</th> 138 <th>Internet Usage, Latest Data</th> 139 <th>% Population ( Penetration )</th> 140 <th>Usage % of World</th> 141 <th>Usage Growth 2000-2007</th> 142 </tr> 143 <tr> 144 <td>Africa</td> 145 <td>933,448,292</td> 146 <td>14.2 %</td> 147 <td>32,765,700</td> 148 <td>3.5 %</td> 149 <td>3.0 %</td> 150 <td>625.8%</td> 151 </tr> 152 <tr> 153 <td>Asia</td> 154 <td>3,712,527,624</td> 155 <td>56.5 %</td> 156 <td>389,392,288</td> 157 <td>10.5 %</td> 158 <td>35.6 %</td> 159 <td>240.7 %</td> 160 </tr> 161 <tr> 162 <td>Europe</td> 163 <td>809,624,686</td> 164 <td>12.3 %</td> 165 <td>312,722,892</td> 166 <td>38.6 %</td> 167 <td>28.6 %</td> 168 <td>197.6 %</td> 169 </tr> 170 <tr> 171 <td>Middle East</td> 172 <td>193,452,727</td> 173 <td>2.9 %</td> 174 <td>19,382,400</td> 175 <td>10.0 %</td> 176 <td>1.8 %</td> 177 <td>490.1 %</td> 178 </tr> 179 <tr> 180 <td>North America</td> 181 <td>334,538,018</td> 182 <td>5.1 %</td> 183 <td>232,057,067</td> 184 <td>69.4 %</td> 185 <td>21.2 %</td> 186 <td>114.7 %</td> 187 </tr> 188 <tr> 189 <td>Latin America / Caribbean</td> 190 <td>556,606,627</td> 191 <td>8.5 %</td> 192 <td>88,778,986</td> 193 <td>16.0 %</td> 194 <td>8.1 %</td> 195 <td>391.3 %</td> 196 </tr> 197 <tr> 198 <td>Oceania / Australia</td> 199 <td>34,468,443</td> 200 <td>0.5 %</td> 201 <td>18,430,359</td> 202 <td>53.5 %</td> 203 <td>1.7 %</td> 204 <td>141.9 %</td> 205 </tr> 206</table> 207<pre> 208<code><script language="javascript" type="text/javascript"> 209//<![CDATA[ 210 setFilterGrid("table1"); 211//]]> 212</script></code> 213</pre> 214<script language="javascript" type="text/javascript"> 215//<![CDATA[ 216 setFilterGrid( "table1" ); 217//]]> 218</script> 219<a href="#top">Top of page</a> 220<hr/> 221<h2><a name="tbl2" id="tbl2"></a>TABLE 2</h2> 222<p>Add a drop-down list, define its first option, sort it and remove a filter</p> 223<table id="table2" class="mytable" > 224 <tr> 225 <th>World Regions</th> 226 <th>Population ( 2007 Est.)</th> 227 <th>Population % of World</th> 228 <th>Internet Usage, Latest Data</th> 229 <th>% Population ( Penetration )</th> 230 <th>Usage % of World</th> 231 <th>Usage Growth 2000-2007</th> 232 </tr> 233 <tr> 234 <td>Africa</td> 235 <td>933,448,292</td> 236 <td>14.2 %</td> 237 <td>32,765,700</td> 238 <td>3.5 %</td> 239 <td>3.0 %</td> 240 <td>625.8%</td> 241 </tr> 242 <tr> 243 <td>Asia</td> 244 <td>3,712,527,624</td> 245 <td>56.5 %</td> 246 <td>389,392,288</td> 247 <td>10.5 %</td> 248 <td>35.6 %</td> 249 <td>240.7 %</td> 250 </tr> 251 <tr> 252 <td>Europe</td> 253 <td>809,624,686</td> 254 <td>12.3 %</td> 255 <td>312,722,892</td> 256 <td>38.6 %</td> 257 <td>28.6 %</td> 258 <td>197.6 %</td> 259 </tr> 260 <tr> 261 <td>Middle East</td> 262 <td>193,452,727</td> 263 <td>2.9 %</td> 264 <td>19,382,400</td> 265 <td>10.0 %</td> 266 <td>1.8 %</td> 267 <td>490.1 %</td> 268 </tr> 269 <tr> 270 <td>North America</td> 271 <td>334,538,018</td> 272 <td>5.1 %</td> 273 <td>232,057,067</td> 274 <td>69.4 %</td> 275 <td>21.2 %</td> 276 <td>114.7 %</td> 277 </tr> 278 <tr> 279 <td>Latin America / Caribbean</td> 280 <td>556,606,627</td> 281 <td>8.5 %</td> 282 <td>88,778,986</td> 283 <td>16.0 %</td> 284 <td>8.1 %</td> 285 <td>391.3 %</td> 286 </tr> 287 <tr> 288 <td>Oceania / Australia</td> 289 <td>34,468,443</td> 290 <td>0.5 %</td> 291 <td>18,430,359</td> 292 <td>53.5 %</td> 293 <td>1.7 %</td> 294 <td>141.9 %</td> 295 </tr> 296</table> 297<pre><code><script language="javascript" type="text/javascript"> 298//<![CDATA[ 299 var table2_Props = { 300 col_0: "select", 301 col_5: "none", 302 display_all_text: " [ Show all ] ", 303 sort_select: true 304 }; 305 setFilterGrid( "table2",table2_Props ); 306//]]> 307</script></code></pre> 308<script language="javascript" type="text/javascript"> 309//<![CDATA[ 310 var table2_Props = { 311 col_0: "select", 312 col_5: "none", 313 display_all_text: " [ Show all ] ", 314 sort_select: true 315 }; 316 setFilterGrid( "table2",table2_Props ); 317//]]> 318</script> 319<a href="#top">Top of page</a> 320<hr/> 321<h2><a name="tbl3" id="tbl3"></a>TABLE 3</h2> 322<p>Define a start row for filtering process and make a row always visible</p> 323<table id="table3" class="mytable" > 324 <tr> 325 <td colspan="7">Additional row</td> 326 </tr> 327 <tr> 328 <th>World Regions</th> 329 <th>Population ( 2007 Est.)</th> 330 <th>Population % of World</th> 331 <th>Internet Usage, Latest Data</th> 332 <th>% Population ( Penetration )</th> 333 <th>Usage % of World</th> 334 <th>Usage Growth 2000-2007</th> 335 </tr> 336 <tr> 337 <td colspan="7">Additional row</td> 338 </tr> 339 <tr> 340 <td>Africa</td> 341 <td>933,448,292</td> 342 <td>14.2 %</td> 343 <td>32,765,700</td> 344 <td>3.5 %</td> 345 <td>3.0 %</td> 346 <td>625.8%</td> 347 </tr> 348 <tr> 349 <td>Asia</td> 350 <td>3,712,527,624</td> 351 <td>56.5 %</td> 352 <td>389,392,288</td> 353 <td>10.5 %</td> 354 <td>35.6 %</td> 355 <td>240.7 %</td> 356 </tr> 357 <tr> 358 <td>Europe</td> 359 <td>809,624,686</td> 360 <td>12.3 %</td> 361 <td>312,722,892</td> 362 <td>38.6 %</td> 363 <td>28.6 %</td> 364 <td>197.6 %</td> 365 </tr> 366 <tr> 367 <td>Middle East</td> 368 <td>193,452,727</td> 369 <td>2.9 %</td> 370 <td>19,382,400</td> 371 <td>10.0 %</td> 372 <td>1.8 %</td> 373 <td>490.1 %</td> 374 </tr> 375 <tr> 376 <td>North America</td> 377 <td>334,538,018</td> 378 <td>5.1 %</td> 379 <td>232,057,067</td> 380 <td>69.4 %</td> 381 <td>21.2 %</td> 382 <td>114.7 %</td> 383 </tr> 384 <tr> 385 <td>Latin America / Caribbean</td> 386 <td>556,606,627</td> 387 <td>8.5 %</td> 388 <td>88,778,986</td> 389 <td>16.0 %</td> 390 <td>8.1 %</td> 391 <td>391.3 %</td> 392 </tr> 393 <tr> 394 <td colspan="7" style="background-color:#FFFFCC;">This row is always visible</td> 395 </tr> 396 <tr> 397 <td>Oceania / Australia</td> 398 <td>34,468,443</td> 399 <td>0.5 %</td> 400 <td>18,430,359</td> 401 <td>53.5 %</td> 402 <td>1.7 %</td> 403 <td>141.9 %</td> 404 </tr> 405 <tr> 406 <td colspan="7" style="background-color:#FFFFCC;">Last row is always visible</td> 407 </tr> 408</table> 409<pre><code><script language="javascript" type="text/javascript"> 410//<![CDATA[ 411 var table3_Props = { rows_always_visible:[10,12] }; 412 setFilterGrid( "table3",table3_Props,2 ); 413//]]> 414</script></code></pre> 415<script language="javascript" type="text/javascript"> 416//<![CDATA[ 417 var table3_Props = { 418 rows_always_visible:[10,12] 419 }; 420 setFilterGrid( "table3",table3_Props,2 ); 421//]]> 422</script> 423<a href="#top">Top of page</a> 424<hr/> 425<h2><a name="tbl4" id="tbl4"></a>TABLE 4</h2> 426<p>Disable 'enter' key detection, disable "onchange" event on combo-box, add "go" button and call another function upon validation...</p> 427<table id="table4" class="mytable" > 428 <tr> 429 <th>World Regions</th> 430 <th>Population ( 2007 Est.)</th> 431 <th>Population % of World</th> 432 <th>Internet Usage, Latest Data</th> 433 <th>% Population ( Penetration )</th> 434 <th>Usage % of World</th> 435 <th>Usage Growth 2000-2007</th> 436 </tr> 437 <tr> 438 <td>Africa</td> 439 <td>933,448,292</td> 440 <td>14.2 %</td> 441 <td>32,765,700</td> 442 <td>3.5 %</td> 443 <td>3.0 %</td> 444 <td>625.8%</td> 445 </tr> 446 <tr> 447 <td>Asia</td> 448 <td>3,712,527,624</td> 449 <td>56.5 %</td> 450 <td>389,392,288</td> 451 <td>10.5 %</td> 452 <td>35.6 %</td> 453 <td>240.7 %</td> 454 </tr> 455 <tr> 456 <td>Europe</td> 457 <td>809,624,686</td> 458 <td>12.3 %</td> 459 <td>312,722,892</td> 460 <td>38.6 %</td> 461 <td>28.6 %</td> 462 <td>197.6 %</td> 463 </tr> 464 <tr> 465 <td>Middle East</td> 466 <td>193,452,727</td> 467 <td>2.9 %</td> 468 <td>19,382,400</td> 469 <td>10.0 %</td> 470 <td>1.8 %</td> 471 <td>490.1 %</td> 472 </tr> 473 <tr> 474 <td>North America</td> 475 <td>334,538,018</td> 476 <td>5.1 %</td> 477 <td>232,057,067</td> 478 <td>69.4 %</td> 479 <td>21.2 %</td> 480 <td>114.7 %</td> 481 </tr> 482 <tr> 483 <td>Latin America / Caribbean</td> 484 <td>556,606,627</td> 485 <td>8.5 %</td> 486 <td>88,778,986</td> 487 <td>16.0 %</td> 488 <td>8.1 %</td> 489 <td>391.3 %</td> 490 </tr> 491 <tr> 492 <td>Oceania / Australia</td> 493 <td>34,468,443</td> 494 <td>0.5 %</td> 495 <td>18,430,359</td> 496 <td>53.5 %</td> 497 <td>1.7 %</td> 498 <td>141.9 %</td> 499 </tr> 500</table> 501<pre><code><script language="javascript" type="text/javascript"> 502//<![CDATA[ 503 var table4_Props = { 504 col_0: "select", 505 on_change: false, 506 btn: true, 507 btn_text: "go", 508 enter_key: false, 509 mod_filter_fn: function(){ alert('Another function is called upon validation'); TF_Filter('table4'); }; 510 } 511 setFilterGrid( "table4",table4_Props ); 512//]]> 513</script></code></pre> 514<script language="javascript" type="text/javascript"> 515//<![CDATA[ 516 var table4_Props = { 517 col_0: "select", 518 on_change: false, 519 btn: true, 520 btn_text: "go", 521 enter_key: false, 522 mod_filter_fn: function(){ alert('Another function is called upon validation'); TF_Filter('table4'); } 523 }; 524 setFilterGrid( "table4",table4_Props ); 525//]]> 526</script> 527<a href="#top">Top of page</a> 528<hr/> 529<h2><a name="tbl5" id="tbl5"></a>TABLE 5</h2> 530<p>Enable exact query matches, set alternating rows background color, set column widths, add rows counter and reset button</p> 531<table id="table5" class="mytable" > 532 <tr> 533 <th>World Regions</th> 534 <th>Population ( 2007 Est.)</th> 535 <th>Population % of World</th> 536 <th>Internet Usage, Latest Data</th> 537 <th>% Population ( Penetration )</th> 538 <th>Usage % of World</th> 539 <th>Usage Growth 2000-2007</th> 540 </tr> 541 <tr> 542 <td>Africa</td> 543 <td>933,448,292</td> 544 <td>14.2 %</td> 545 <td>32,765,700</td> 546 <td>3.5 %</td> 547 <td>3.0 %</td> 548 <td>625.8%</td> 549 </tr> 550 <tr> 551 <td>Asia</td> 552 <td>3,712,527,624</td> 553 <td>56.5 %</td> 554 <td>389,392,288</td> 555 <td>10.5 %</td> 556 <td>35.6 %</td> 557 <td>240.7 %</td> 558 </tr> 559 <tr> 560 <td>Europe</td> 561 <td>809,624,686</td> 562 <td>12.3 %</td> 563 <td>312,722,892</td> 564 <td>38.6 %</td> 565 <td>28.6 %</td> 566 <td>197.6 %</td> 567 </tr> 568 <tr> 569 <td>Middle East</td> 570 <td>193,452,727</td> 571 <td>2.9 %</td> 572 <td>19,382,400</td> 573 <td>10.0 %</td> 574 <td>1.8 %</td> 575 <td>490.1 %</td> 576 </tr> 577 <tr> 578 <td>North America</td> 579 <td>334,538,018</td> 580 <td>5.1 %</td> 581 <td>232,057,067</td> 582 <td>69.4 %</td> 583 <td>21.2 %</td> 584 <td>114.7 %</td> 585 </tr> 586 <tr> 587 <td>Latin America / Caribbean</td> 588 <td>556,606,627</td> 589 <td>8.5 %</td> 590 <td>88,778,986</td> 591 <td>16.0 %</td> 592 <td>8.1 %</td> 593 <td>391.3 %</td> 594 </tr> 595 <tr> 596 <td>Oceania / Australia</td> 597 <td>34,468,443</td> 598 <td>0.5 %</td> 599 <td>18,430,359</td> 600 <td>53.5 %</td> 601 <td>1.7 %</td> 602 <td>141.9 %</td> 603 </tr> 604</table> 605<pre><code> 606<script language="javascript" type="text/javascript"> 607//<![CDATA[ 608 var table5_Props = { 609 exact_match: true, 610 alternate_rows: true, 611 col_width: ["250px","200px"],//prevents column width variations 612 rows_counter: true, 613 rows_counter_text: "Total rows: ", 614 btn_reset: true, 615 bnt_reset_text: "Clear all " 616 }; 617 setFilterGrid( "table5",table5_Props ); 618//]]> 619</script></code></pre> 620<script language="javascript" type="text/javascript"> 621//<![CDATA[ 622 var table5_Props = { 623 exact_match: true, 624 alternate_rows: true, 625 col_width: ["250px","200px"], 626 rows_counter: true, 627 rows_counter_text: "Total rows: ", 628 btn_reset: true, 629 bnt_reset_text: "Clear all " 630 }; 631 setFilterGrid( "table5",table5_Props ); 632//]]> 633</script> 634<a href="#top">Top of page</a> 635<hr/> 636 637<h2><a name="tbl6" id="tbl6"></a>TABLE 6</h2> 638<p>Set paging, enable loader, set rows counter and reset button</p> 639<table id="table6" class="mytable" > 640 <tr> 641 <th>World Regions</th> 642 <th>Population ( 2007 Est.)</th> 643 <th>Population % of World</th> 644 <th>Internet Usage, Latest Data</th> 645 <th>% Population ( Penetration )</th> 646 <th>Usage % of World</th> 647 <th>Usage Growth 2000-2007</th> 648 </tr> 649 <tr> 650 <td>Africa</td> 651 <td>933,448,292</td> 652 <td>14.2 %</td> 653 <td>32,765,700</td> 654 <td>3.5 %</td> 655 <td>3.0 %</td> 656 <td>625.8%</td> 657 </tr> 658 <tr> 659 <td>Asia</td> 660 <td>3,712,527,624</td> 661 <td>56.5 %</td> 662 <td>389,392,288</td> 663 <td>10.5 %</td> 664 <td>35.6 %</td> 665 <td>240.7 %</td> 666 </tr> 667 <tr> 668 <td>Europe</td> 669 <td>809,624,686</td> 670 <td>12.3 %</td> 671 <td>312,722,892</td> 672 <td>38.6 %</td> 673 <td>28.6 %</td> 674 <td>197.6 %</td> 675 </tr> 676 <tr> 677 <td>Middle East</td> 678 <td>193,452,727</td> 679 <td>2.9 %</td> 680 <td>19,382,400</td> 681 <td>10.0 %</td> 682 <td>1.8 %</td> 683 <td>490.1 %</td> 684 </tr> 685 <tr> 686 <td>North America</td> 687 <td>334,538,018</td> 688 <td>5.1 %</td> 689 <td>232,057,067</td> 690 <td>69.4 %</td> 691 <td>21.2 %</td> 692 <td>114.7 %</td> 693 </tr> 694 <tr> 695 <td>Latin America / Caribbean</td> 696 <td>556,606,627</td> 697 <td>8.5 %</td> 698 <td>88,778,986</td> 699 <td>16.0 %</td> 700 <td>8.1 %</td> 701 <td>391.3 %</td> 702 </tr> 703 <tr> 704 <td>Oceania / Australia</td> 705 <td>34,468,443</td> 706 <td>0.5 %</td> 707 <td>18,430,359</td> 708 <td>53.5 %</td> 709 <td>1.7 %</td> 710 <td>141.9 %</td> 711 </tr> 712</table> 713<pre><code> 714<script language="javascript" type="text/javascript"> 715//<![CDATA[ 716 var table6_Props = { 717 paging: true, 718 paging_length: 3, 719 rows_counter: true, 720 btn_reset: true, 721 loader: true, 722 loader_text: "Filtering data..." 723 }; 724 setFilterGrid( "table6",table6_Props ); 725//]]> 726</script></code></pre> 727<script language="javascript" type="text/javascript"> 728//<![CDATA[ 729 var table6_Props = { 730 paging: true, 731 paging_length: 3, 732 rows_counter: true, 733 btn_reset: true, 734 loader: true, 735 loader_text: "Filtering data..." 736 }; 737 setFilterGrid( "table6",table6_Props ); 738//]]> 739</script> 740<a href="#top">Top of page</a> 741<hr/> 742 743<h2><a name="tbl7" id="tbl7"></a>TABLE 7</h2> 744<p>Disable filter grid and set paging</p> 745<table id="table7" class="mytable" > 746 <tr> 747 <th>World Regions</th> 748 <th>Population ( 2007 Est.)</th> 749 <th>Population % of World</th> 750 <th>Internet Usage, Latest Data</th> 751 <th>% Population ( Penetration )</th> 752 <th>Usage % of World</th> 753 <th>Usage Growth 2000-2007</th> 754 </tr> 755 <tr> 756 <td>Africa</td> 757 <td>933,448,292</td> 758 <td>14.2 %</td> 759 <td>32,765,700</td> 760 <td>3.5 %</td> 761 <td>3.0 %</td> 762 <td>625.8%</td> 763 </tr> 764 <tr> 765 <td>Asia</td> 766 <td>3,712,527,624</td> 767 <td>56.5 %</td> 768 <td>389,392,288</td> 769 <td>10.5 %</td> 770 <td>35.6 %</td> 771 <td>240.7 %</td> 772 </tr> 773 <tr> 774 <td>Europe</td> 775 <td>809,624,686</td> 776 <td>12.3 %</td> 777 <td>312,722,892</td> 778 <td>38.6 %</td> 779 <td>28.6 %</td> 780 <td>197.6 %</td> 781 </tr> 782 <tr> 783 <td>Middle East</td> 784 <td>193,452,727</td> 785 <td>2.9 %</td> 786 <td>19,382,400</td> 787 <td>10.0 %</td> 788 <td>1.8 %</td> 789 <td>490.1 %</td> 790 </tr> 791 <tr> 792 <td>North America</td> 793 <td>334,538,018</td> 794 <td>5.1 %</td> 795 <td>232,057,067</td> 796 <td>69.4 %</td> 797 <td>21.2 %</td> 798 <td>114.7 %</td> 799 </tr> 800 <tr> 801 <td>Latin America / Caribbean</td> 802 <td>556,606,627</td> 803 <td>8.5 %</td> 804 <td>88,778,986</td> 805 <td>16.0 %</td> 806 <td>8.1 %</td> 807 <td>391.3 %</td> 808 </tr> 809 <tr> 810 <td>Oceania / Australia</td> 811 <td>34,468,443</td> 812 <td>0.5 %</td> 813 <td>18,430,359</td> 814 <td>53.5 %</td> 815 <td>1.7 %</td> 816 <td>141.9 %</td> 817 </tr> 818</table> 819<pre><code> 820<script language="javascript" type="text/javascript"> 821//<![CDATA[ 822 var table7_Props = { 823 grid: false, 824 paging: true, 825 paging_length: 3, 826 rows_counter: true, 827 loader: true, 828 loader_text: "Filtering data..." 829 }; 830 setFilterGrid( "table7",table7_Props,-1 ); 831 /*** Note *** 832 Since grid row is not generated, use -1 as start row index for paging. 833 *** ***/ 834//]]> 835</script></code></pre> 836<script language="javascript" type="text/javascript"> 837//<![CDATA[ 838 var table7_Props = { 839 grid: false, 840 paging: true, 841 paging_length: 3, 842 rows_counter: true, 843 loader: true, 844 loader_text: "Filtering data..." 845 }; 846 setFilterGrid( "table7",table7_Props,-1 ); 847//]]> 848</script> 849<a href="#top">Top of page</a> 850<hr/> 851 852<h2><a name="tbl8" id="tbl8"></a>TABLE 8</h2> 853<p>Set the last row always visible and perform a sum operation on 2 columns</p> 854<table id="table8" class="mytable" > 855 <tr> 856 <th>World Regions</th> 857 <th>Population ( 2007 Est.)</th> 858 <th>Population % of World</th> 859 <th>Internet Usage, Latest Data</th> 860 <th>% Population ( Penetration )</th> 861 <th>Usage % of World</th> 862 <th>Usage Growth 2000-2007</th> 863 </tr> 864 <tr> 865 <td>Africa</td> 866 <td>933,448,292</td> 867 <td>14.2 %</td> 868 <td>32,765,700</td> 869 <td>3.5 %</td> 870 <td>3.0 %</td> 871 <td>625.8%</td> 872 </tr> 873 <tr> 874 <td>Asia</td> 875 <td>3,712,527,624</td> 876 <td>56.5 %</td> 877 <td>389,392,288</td> 878 <td>10.5 %</td> 879 <td>35.6 %</td> 880 <td>240.7 %</td> 881 </tr> 882 <tr> 883 <td>Europe</td> 884 <td>809,624,686</td> 885 <td>12.3 %</td> 886 <td>312,722,892</td> 887 <td>38.6 %</td> 888 <td>28.6 %</td> 889 <td>197.6 %</td> 890 </tr> 891 <tr> 892 <td>Middle East</td> 893 <td>193,452,727</td> 894 <td>2.9 %</td> 895 <td>19,382,400</td> 896 <td>10.0 %</td> 897 <td>1.8 %</td> 898 <td>490.1 %</td> 899 </tr> 900 <tr> 901 <td>North America</td> 902 <td>334,538,018</td> 903 <td>5.1 %</td> 904 <td>232,057,067</td> 905 <td>69.4 %</td> 906 <td>21.2 %</td> 907 <td>114.7 %</td> 908 </tr> 909 <tr> 910 <td>Latin America / Caribbean</td> 911 <td>556,606,627</td> 912 <td>8.5 %</td> 913 <td>88,778,986</td> 914 <td>16.0 %</td> 915 <td>8.1 %</td> 916 <td>391.3 %</td> 917 </tr> 918 <tr> 919 <td>Oceania / Australia</td> 920 <td>34,468,443</td> 921 <td>0.5 %</td> 922 <td>18,430,359</td> 923 <td>53.5 %</td> 924 <td>1.7 %</td> 925 <td>141.9 %</td> 926 </tr> 927 <tr> 928 <td colspan="2">Total:</td> 929 <td id="table8Tot1" style="background-color:#FFFFCC;"></td> 930 <td colspan="2"></td> 931 <td><input id="table8Tot2" type="text" /></td> 932 <td></td> 933 </tr> 934</table> 935<pre><code> 936<script language="javascript" type="text/javascript"> 937//<![CDATA[ 938 var table8_Props = { 939 rows_counter: true, 940 loader: true, 941 loader_text: "Filtering data...", 942 col_operation: { 943 id: ["table8Tot1","table8Tot2"], 944 col: [2,5], 945 operation: ["sum","sum"], 946 write_method: ["innerHTML","setValue"] 947 }, 948 rows_always_visible: [grabTag(grabEBI('table8'),"tr").length] 949 }; 950 setFilterGrid( "table8",table8_Props ); 951 /*** Note *** 952 You can also write operation results in elements outside the table. 953 *** ***/ 954//]]> 955</script></code></pre> 956<script language="javascript" type="text/javascript"> 957//<![CDATA[ 958 var table8_Props = { 959 rows_counter: true, 960 loader: true, 961 loader_text: "Filtering data...", 962 col_operation: { 963 id: ["table8Tot1","table8Tot2"], 964 col: [2,5], 965 operation: ["sum","sum"], 966 write_method: ["innerHTML","setValue"] 967 }, 968 rows_always_visible: [grabTag(grabEBI('table8'),"tr").length] 969 }; 970 setFilterGrid( "table8",table8_Props ); 971//]]> 972</script> 973<a href="#top">Top of page</a> 974<hr/> 975 976<h2><a name="tbl9" id="tbl9"></a>TABLE 9</h2> 977<p>Perform actions and retrieve information from the grid by using public functions</p> 978<div class="tools"> 979 <table class="mytable"> 980 <tr> 981 <td colspan="2"><input type="button" value="Show grid ids" onclick="alert( TF_GetFilterIds() );" /></td> 982 </tr> 983 <tr> 984 <td> 985 Choose table and perform action: 986 <select id="slcEx"> 987 <option value="table1">table1</option> 988 <option value="table2">table2</option> 989 <option value="table3">table3</option> 990 <option value="table4">table4</option> 991 <option value="table5">table5</option> 992 <option value="table6">table6</option> 993 <option value="table7">table7</option> 994 <option value="table8">table8</option> 995 <option value="table9" selected="">table9</option> 996 <option value="table10">table10</option> 997 <option value="table11">table11</option> 998 <option value="table12">table12</option> 999 </select> 1000 1001 </td> 1002 <td> 1003 <input type="button" value="Check if it has grid" onclick="alert( TF_HasGrid( grabEBI('slcEx').value ) );" /> 1004 <input type="button" value="Filter table" onclick="TF_Filter( grabEBI('slcEx').value );" /> 1005 <input type="button" value="Clear grid" onclick="TF_ClearFilters(grabEBI('slcEx').value); TF_Filter(grabEBI('slcEx').value);" /> 1006 <input type="button" value="Remove grid" onclick="TF_RemoveFilterGrid(grabEBI('slcEx').value);" /> 1007 <input type="button" value="Reset filter grid" 1008 onclick=" var gid=grabEBI('slcEx').value; 1009 if( grabEBI( gid )!=null ) 1010 setFilterGrid( 1011 gid, 1012 grabEBI( gid ).tf_Obj, 1013 grabEBI( gid ).tf_ref_row 1014 ); 1015 " /> 1016 <input type="button" value="Return starting row" onclick="alert( TF_GetStartRow(grabEBI('slcEx').value) );" /> 1017 <input type="button" value="Get filters ids" onclick="alert( TF_GetFilters(grabEBI('slcEx').value) );" /> 1018 <input type="button" value="Set filter value" onclick="TF_SetFilterValue(grabEBI('slcEx').value,2,'Search string here');" /> 1019 <input type="button" value="Return column values" onclick="alert( TF_GetColValues(grabEBI('slcEx').value,0) );" /> 1020 1021 </td> 1022 </tr> 1023 </table> 1024</div> 1025<table id="table9" class="mytable" > 1026 <tr> 1027 <th>World Regions</th> 1028 <th>Population ( 2007 Est.)</th> 1029 <th>Population % of World</th> 1030 <th>Internet Usage, Latest Data</th> 1031 <th>% Population ( Penetration )</th> 1032 <th>Usage % of World</th> 1033 <th>Usage Growth 2000-2007</th> 1034 </tr> 1035 <tr> 1036 <td>Africa</td> 1037 <td>933,448,292</td> 1038 <td>14.2 %</td> 1039 <td>32,765,700</td> 1040 <td>3.5 %</td> 1041 <td>3.0 %</td> 1042 <td>625.8%</td> 1043 </tr> 1044 <tr> 1045 <td>Asia</td> 1046 <td>3,712,527,624</td> 1047 <td>56.5 %</td> 1048 <td>389,392,288</td> 1049 <td>10.5 %</td> 1050 <td>35.6 %</td> 1051 <td>240.7 %</td> 1052 </tr> 1053 <tr> 1054 <td>Europe</td> 1055 <td>809,624,686</td> 1056 <td>12.3 %</td> 1057 <td>312,722,892</td> 1058 <td>38.6 %</td> 1059 <td>28.6 %</td> 1060 <td>197.6 %</td> 1061 </tr> 1062 <tr> 1063 <td>Middle East</td> 1064 <td>193,452,727</td> 1065 <td>2.9 %</td> 1066 <td>19,382,400</td> 1067 <td>10.0 %</td> 1068 <td>1.8 %</td> 1069 <td>490.1 %</td> 1070 </tr> 1071 <tr> 1072 <td>North America</td> 1073 <td>334,538,018</td> 1074 <td>5.1 %</td> 1075 <td>232,057,067</td> 1076 <td>69.4 %</td> 1077 <td>21.2 %</td> 1078 <td>114.7 %</td> 1079 </tr> 1080 <tr> 1081 <td>Latin America / Caribbean</td> 1082 <td>556,606,627</td> 1083 <td>8.5 %</td> 1084 <td>88,778,986</td> 1085 <td>16.0 %</td> 1086 <td>8.1 %</td> 1087 <td>391.3 %</td> 1088 </tr> 1089 <tr> 1090 <td>Oceania / Australia</td> 1091 <td>34,468,443</td> 1092 <td>0.5 %</td> 1093 <td>18,430,359</td> 1094 <td>53.5 %</td> 1095 <td>1.7 %</td> 1096 <td>141.9 %</td> 1097 </tr> 1098</table> 1099<pre><code> 1100<script language="javascript" type="text/javascript"> 1101//<![CDATA[ 1102 var table9_Props = { 1103 col_0: "select" 1104 }; 1105 setFilterGrid( "table9",table9_Props ); 1106//]]> 1107</script> 1108<!-- buttons code below --> 1109 1110<input type="button" value="Show grid ids" onclick="alert( TF_GetFilterIds() );" /> 1111 1112<select id="slcEx"><br /> <option value="table1">table1</option> 1113 <option value="table2">table2</option> 1114 <option value="table3">table3</option> 1115 <option value="table4">table4</option> 1116 <option value="table5">table5</option> 1117 <option value="table6">table6</option> 1118 <option value="table7">table7</option> 1119 <option value="table8">table8</option> 1120 <option value="table9" selected="">table9</option> 1121 <option value="table10">table10</option> 1122 <option value="table11">table11</option> 1123 <option value="table12">table12</option> 1124</select> 1125 1126<input type="button" value="Check if it has grid" onclick="alert( TF_HasGrid( grabEBI('slcEx').value ) );" /> 1127 1128<input type="button" value="Filter table" onclick="TF_Filter( grabEBI('slcEx').value );" /> 1129 1130<input type="button" value="Clear grid" onclick="TF_ClearFilters(grabEBI('slcEx').value); TF_Filter(grabEBI('slcEx').value);" /> 1131 1132<input type="button" value="Remove grid" onclick="TF_RemoveFilterGrid(grabEBI('slcEx').value);" /> 1133<input type="button" value="Reset filter grid" 1134 onclick="var gid=grabEBI('slcEx').value; 1135 if( grabEBI( gid )!=null ) 1136 setFilterGrid( gid, grabEBI( gid ).tf_Obj, grabEBI( gid ).tf_ref_row ); " /> 1137 1138<input type="button" value="Return starting row" onclick="alert( TF_GetStartRow(grabEBI('slcEx').value) );" /> 1139 1140<input type="button" value="Get filters ids" onclick="alert( TF_GetFilters(grabEBI('slcEx').value) );" /> 1141 1142<input type="button" value="Set filter value" onclick="TF_SetFilterValue(grabEBI('slcEx').value,2,'Search string here');" /> 1143 1144<input type="button" value="Return column values" onclick="alert( TF_GetColValues(grabEBI('slcEx').value,0) );" /> 1145 </code></pre> 1146<script language="javascript" type="text/javascript"> 1147//<![CDATA[ 1148 var table9_Props = { 1149 col_0: "select" 1150 }; 1151 setFilterGrid( "table9",table9_Props ); 1152//]]> 1153</script> 1154<a href="#top">Top of page</a> 1155<hr/> 1156<h2><a name="tbl10" id="tbl10"></a>TABLE 10</h2> 1157<p>Add an autocomplete feature to 1st column by binding an external script</p> 1158<table id="table10" class="mytable" > 1159 <tr> 1160 <th>World Regions</th> 1161 <th>Population ( 2007 Est.)</th> 1162 <th>Population % of World</th> 1163 <th>Internet Usage, Latest Data</th> 1164 <th>% Population ( Penetration )</th> 1165 <th>Usage % of World</th> 1166 <th>Usage Growth 2000-2007</th> 1167 </tr> 1168 <tr> 1169 <td>Africa</td> 1170 <td>933,448,292</td> 1171 <td>14.2 %</td> 1172 <td>32,765,700</td> 1173 <td>3.5 %</td> 1174 <td>3.0 %</td> 1175 <td>625.8%</td> 1176 </tr> 1177 <tr> 1178 <td>Asia</td> 1179 <td>3,712,527,624</td> 1180 <td>56.5 %</td> 1181 <td>389,392,288</td> 1182 <td>10.5 %</td> 1183 <td>35.6 %</td> 1184 <td>240.7 %</td> 1185 </tr> 1186 <tr> 1187 <td>Europe</td> 1188 <td>809,624,686</td> 1189 <td>12.3 %</td> 1190 <td>312,722,892</td> 1191 <td>38.6 %</td> 1192 <td>28.6 %</td> 1193 <td>197.6 %</td> 1194 </tr> 1195 <tr> 1196 <td>Middle East</td> 1197 <td>193,452,727</td> 1198 <td>2.9 %</td> 1199 <td>19,382,400</td> 1200 <td>10.0 %</td> 1201 <td>1.8 %</td> 1202 <td>490.1 %</td> 1203 </tr> 1204 <tr> 1205 <td>North America</td> 1206 <td>334,538,018</td> 1207 <td>5.1 %</td> 1208 <td>232,057,067</td> 1209 <td>69.4 %</td> 1210 <td>21.2 %</td> 1211 <td>114.7 %</td> 1212 </tr> 1213 <tr> 1214 <td>Latin America / Caribbean</td> 1215 <td>556,606,627</td> 1216 <td>8.5 %</td> 1217 <td>88,778,986</td> 1218 <td>16.0 %</td> 1219 <td>8.1 %</td> 1220 <td>391.3 %</td> 1221 </tr> 1222 <tr> 1223 <td>Oceania / Australia</td> 1224 <td>34,468,443</td> 1225 <td>0.5 %</td> 1226 <td>18,430,359</td> 1227 <td>53.5 %</td> 1228 <td>1.7 %</td> 1229 <td>141.9 %</td> 1230 </tr> 1231</table> 1232<pre><code> 1233<script language="javascript" type="text/javascript"> 1234//<![CDATA[ 1235 var table10_Props = { 1236 bind_script:{ name:"autocomplete", target_fn: setAutoComplete } 1237 }; 1238 setFilterGrid( "table10",table10_Props ); 1239 //Refer to 'bind an external script' section. Those fns do not belong to the filter grid script. 1240 //You may need to develop intermediate fns to interface with external scripts. 1241//]]> 1242</script></code></pre> 1243<script language="javascript" type="text/javascript"> 1244//<![CDATA[ 1245 var table10_Props = { 1246 bind_script:{ name:"autocomplete", target_fn: setAutoComplete } 1247 }; 1248 setFilterGrid( "table10",table10_Props ); 1249//]]> 1250</script> 1251<a href="#top">Top of page</a> 1252<hr/> 1253</body> 1254</html> 1255