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</title> 5<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 6<style type="text/css" media="screen"> 7 8/*==================================================== 9 - HTML Table Filter stylesheet 10=====================================================*/ 11@import "filtergrid.css"; 12 13/*==================================================== 14 - General html elements 15=====================================================*/ 16body{ 17 margin:15px; padding:15px; border:1px solid #666; 18 font-family:Arial, Helvetica, sans-serif; font-size:88%; 19} 20h2{ margin-top: 50px; } 21caption{ margin:10px 0 0 5px; padding:10px; text-align:left; } 22pre{ font-size:13px; margin:5px; padding:5px; background-color:#f4f4f4; border:1px solid #ccc; } 23.mytable{ 24 width:100%; font-size:12px; 25 border:1px solid #ccc; 26} 27th{ background-color:#003366; color:#FFF; padding:2px; border:1px solid #ccc; } 28td{ padding:2px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; } 29</style> 30<script language="javascript" type="text/javascript" src="tablefilter.js"></script> 31</head> 32<body> 33 34<h1>HTML Table Filter Generator v1.6</h1> 35<h2>Description</h2> 36<p>This script adds to any html table a "filter by column" feature that 37 enables users to filter and limit the data displayed within a long table. It 38 even works on tables with uneven rows. The script automatically adds a filter 39 grid bar at the top of the desired table. Users can use the following operators 40 to filter columns containing numeric data: <strong><</strong>, <strong><=</strong>, 41 <strong>></strong>, <strong>>=</strong>.</p> 42<p>- Description page at:<br/> 43<a href="http://mguglielmi.free.fr/scripts/TableFilter/?l=en" target="_blank">mguglielmi.free.fr/scripts/TableFilter/?l=en</a> 44</p> 45<p>- Demo pages at:<br/> 46<a href="http://mguglielmi.free.fr/scripts/TableFilter/datademo.htm" target="_blank">mguglielmi.free.fr/scripts/TableFilter/datademo.htm</a><br/> 47<a href="http://mguglielmi.free.fr/scripts/TableFilter/datademo2.htm" target="_blank">mguglielmi.free.fr/scripts/TableFilter/datademo2.htm</a> 48</p> 49<h2>How does it work?</h2> 50<p>You just need to define the <code>id</code> attribute of a table and insert a piece of javascript code in the <code>head</code> of the html document or in an external ".js" file.</p> 51<p>Here you have an example of a regular html table: </p> 52 53 54<table cellspacing="0" class="mytable" > 55<tr> 56<td><strong>From</strong></td> 57<td><strong>Destination</strong></td> 58 59<td><strong>Road Distance (km)</strong></td> 60<td><strong>By Air (hrs)</strong></td> 61<td width="10%"><strong>By Car/Coach (hrs)</strong></td> 62<td><strong>By Rail (hrs)</strong></td> 63</tr> 64 65 66<tr> 67<td><strong>Sydney</strong></td> 68<td>Adelaide</td> 69<td>1412</td> 70 71<td>1.4</td> 72<td>24</td> 73<td>25.3</td> 74</tr> 75 76<tr> 77<td><strong>Sydney</strong></td> 78<td>Brisbane</td> 79<td>982</td> 80<td>1.5</td> 81 82<td>17</td> 83<td>16</td> 84</tr> 85 86<tr> 87<td><strong>Sydney</strong></td> 88<td>Canberra</td> 89<td>286</td> 90<td>.6</td> 91<td>4.2</td> 92 93<td>4.3</td> 94</tr> 95 96<tr> 97<td><strong>Sydney</strong></td> 98<td>Melbourne</td> 99<td>872</td> 100<td>1.1</td> 101<td>14.3</td> 102<td>10.5</td> 103 104</tr> 105 106<tr> 107<td><strong>Adelaide</strong></td> 108<td>Perth</td> 109<td>2781</td> 110<td>3.1</td> 111<td>35</td> 112<td>38</td> 113</tr> 114 115<tr> 116<td><strong>Adelaide</strong></td> 117<td>Alice Springs</td> 118<td>1533</td> 119<td>2</td> 120<td>20</td> 121<td>20.25</td> 122</tr> 123 124<tr> 125<td><strong>Adelaide</strong></td> 126 127<td>Brisbane</td> 128<td>2045</td> 129<td>2.15</td> 130<td>33.3</td> 131<td>40</td> 132</tr> 133 134</table> 135 136 137<p>Below the same table with a filtering grid generated automatically: </p> 138 139<table id="table1" cellspacing="0" class="mytable" width="800" > 140<tr> 141<th><strong>From</strong></th> 142<th><strong>Destination</strong></th> 143<th><strong>Road Distance (km)</strong></th> 144<th><strong>By Air (hrs)</strong></th> 145<th><strong>By Car/Coach (hrs)</strong></th> 146<th><strong>By Rail (hrs)</strong></th> 147</tr> 148 149 150<tr> 151<td><strong>Sydney</strong></td> 152<td>Adelaide</td> 153<td>1412</td> 154 155<td>1.4</td> 156<td>24</td> 157<td>25.3</td> 158</tr> 159 160<tr> 161<td><strong>Sydney</strong></td> 162<td>Brisbane</td> 163<td>982</td> 164<td>1.5</td> 165 166<td>17</td> 167<td>16</td> 168</tr> 169 170<tr> 171<td><strong>Sydney</strong></td> 172<td>Canberra</td> 173<td>286</td> 174<td>.6</td> 175<td>4.2</td> 176 177<td>4.3</td> 178</tr> 179 180<tr> 181<td><strong>Sydney</strong></td> 182<td>Melbourne</td> 183<td>872</td> 184<td>1.1</td> 185<td>14.3</td> 186<td>10.5</td> 187 188</tr> 189 190<tr> 191<td><strong>Adelaide</strong></td> 192<td>Perth</td> 193<td>2781</td> 194<td>3.1</td> 195<td>35</td> 196<td>38</td> 197</tr> 198 199<tr> 200<td><strong>Adelaide</strong></td> 201<td>Alice Springs</td> 202<td>1533</td> 203<td>2</td> 204<td>20</td> 205<td>20.25</td> 206</tr> 207 208<tr> 209<td><strong>Adelaide</strong></td> 210 211<td>Brisbane</td> 212<td>2045</td> 213<td>2.15</td> 214<td>33.3</td> 215<td>40</td> 216</tr> 217</table> 218 219<script language="javascript" type="text/javascript"> 220//<![CDATA[ 221 setFilterGrid("table1"); 222//]]> 223</script> 224 225<p>By adding an <code>id</code> (<code>id="table1"</code>) to the table and inserting the script below in the <code><body></code> section:</p> 226 227<pre><code><script language="javascript" type="text/javascript"> 228 setFilterGrid("table1"); 229</script> </code></pre> 230 231<p>the grid will be generated automatically. The number of filters (<code><input></code>) 232 is equal to the number of columns (<code><td></code>). If your document 233 contains several tables (like this page), it is important to define unique ids, 234 otherwise the script will not work properly.</p> 235<p>The <code>setFilterGrid()</code> function accepts 2 additional parameters that 236 will be explained in the next tables. In the example below, by specifing a row 237 number as a "reference" row, we tell the function which row to use 238 in order to generate the right number of filters: </p> 239 240<table id="table2" cellspacing="0" class="mytable"> 241 <tr> 242 <td colspan="6"><strong>This is the table caption </strong></td> 243 </tr> 244 <tr class="sortHeader"> 245 <th>From</th> 246 <th>Destination</th> 247 <th>Road Distance (km)</th> 248 <th>By Air (hrs)</th> 249 <th width="10%">By Car/Coach (hrs)</th> 250 <th width="30%">By Rail (hrs)</th> 251 </tr> 252 <tr> 253 <td><strong>Sydney</strong></td> 254 <td>Adelaide (AUS)</td> 255 <td>1412</td> 256 <td>1.4</td> 257 <td>24</td> 258 <td>25.3</td> 259 </tr> 260 <tr> 261 <td><strong>Sydney</strong></td> 262 <td>Brisbane</td> 263 <td>982</td> 264 <td>1.5</td> 265 <td>17</td> 266 <td>16</td> 267 </tr> 268 <tr> 269 <td><strong>Sydney</strong></td> 270 <td>Canberra</td> 271 <td>286</td> 272 <td>.6</td> 273 <td>4.2</td> 274 <td>4.3</td> 275 </tr> 276 <tr> 277 <td><strong>Sydney</strong></td> 278 <td>Melbourne</td> 279 <td>872</td> 280 <td>1.1</td> 281 <td>14.3</td> 282 <td>10.5</td> 283 </tr> 284 <tr> 285 <td><strong>Adelaide</strong></td> 286 <td>Perth</td> 287 <td>2781</td> 288 <td>3.1</td> 289 <td>35</td> 290 <td>38</td> 291 </tr> 292 <tr> 293 <td><strong>Adelaide</strong></td> 294 <td>Alice Springs</td> 295 <td>1533</td> 296 <td>2</td> 297 <td>20</td> 298 <td>20.25</td> 299 </tr> 300 <tr> 301 <td><strong>Adelaide</strong></td> 302 <td colspan="2" bgcolor="#FFFFCC">Brisbane2045</td> 303 <td>2.15</td> 304 <td>33.3</td> 305 <td>40ttt</td> 306 </tr> 307</table> 308 309<script language="javascript" type="text/javascript"> 310//<![CDATA[ 311 setFilterGrid("table2",1); 312//]]> 313</script> 314<pre><code> setFilterGrid("table2",<strong>1</strong>);</code> 315</pre> 316 317<p>Here we have specified row number <strong>1</strong>, that is the second row 318 from the top. The 1st row is number <strong>0</strong>. Since the 1st row doesn't 319 contain the right number of columns, we need to pass the mentioned parameter 320 in order to calculate the right number of columns and also define from which 321 row should start the filtering process. Note that merged cells (<code><td 322 colspan="2"></code>) are simply skipped.</p> 323<p>By default, the script adds text boxes (<code><input></code>). As you 324 will see in the next example, you may also decide to use a <strong>drop-down 325 lists</strong> (<code><select></code>) instead of text boxes:</p> 326 327 328<table id="table_3" cellspacing="0" class="mytable" > 329 <tr> 330 <td colspan="7"><strong>This is the table caption </strong></td> 331 </tr> 332 <tr> 333 <th width="1%"> </th> 334 <th width="15%"><strong>From</strong></th> 335 <th width="15%"><strong>Destination</strong></th> 336 <th><strong>Road Distance (km)</strong></th> 337 <th><strong>By Air (hrs)</strong></th> 338 <th><strong>By Car/Coach (hrs)</strong></th> 339 <th><strong>By Rail (hrs)</strong></th> 340 </tr> 341 <tr> 342 <td>1.</td> 343 <td><strong>Sydney</strong></td> 344 <td>Adelaide</td> 345 <td>1412</td> 346 <td>1.4</td> 347 <td>24</td> 348 <td>25.3</td> 349 </tr> 350 <tr> 351 <td>2.</td> 352 <td><strong>Sydney</strong></td> 353 <td>Brisbane</td> 354 <td>982</td> 355 <td>1.5</td> 356 <td>17</td> 357 <td>16</td> 358 </tr> 359 <tr> 360 <td>3.</td> 361 <td><strong>Sydney</strong></td> 362 <td>Canberra</td> 363 <td>286</td> 364 <td>.6</td> 365 <td>4.2</td> 366 <td>4.3</td> 367 </tr> 368 <tr> 369 <td>4.</td> 370 <td><strong>Sydney</strong></td> 371 <td>Melbourne</td> 372 <td>872</td> 373 <td>1.1</td> 374 <td>14.3</td> 375 <td>10.5</td> 376 </tr> 377 <tr> 378 <td>5.</td> 379 <td><strong>Adelaide (AUS)</strong></td> 380 <td>Perth</td> 381 <td>2781</td> 382 <td>3.1</td> 383 <td>35</td> 384 <td>38</td> 385 </tr> 386 <tr> 387 <td>6.</td> 388 <td><strong>DeAdelaide</strong></td> 389 <td>Alice Springs</td> 390 <td>1533</td> 391 <td>2</td> 392 <td>20</td> 393 <td>20.25</td> 394 </tr> 395 <tr> 396 <td>7.</td> 397 <td><strong>Adelaide</strong></td> 398 <td>Brisbane</td> 399 <td>2045</td> 400 <td>2.15</td> 401 <td>33.3</td> 402 <td>40</td> 403 </tr> 404</table> 405 406<script language="javascript" type="text/javascript"> 407//<![CDATA[ 408 var table3Filters = { 409 btn: true, 410 col_0: "none", 411 col_1: "select", 412 btn_text: " > " 413 } 414 setFilterGrid("table_3",1,table3Filters); 415//]]> 416</script> 417<p>To do that you just need to declare an <code>Array</code> in which you specify which filters should not be displayed or displayed as drop-down lists:</p> 418 419<pre><code><script language="javascript" type="text/javascript"> 420 var table3Filters = { 421 <strong>btn</strong>: <strong>true</strong>, 422<strong> col_0</strong>: "<strong>none</strong>", 423<strong> col_2</strong>: "<strong>select</strong>", 424 <strong>btn_text</strong>: " > " 425 } 426 setFilterGrid("table3",1,<strong>table3Filters</strong>); 427</script></code></pre> 428 429<p>You can name the <code>Array</code> as you want, but don't forget to add it 430 to the parameters of the <code>setFilterGrid</code>() function. It is important 431 to respect the syntax and naming convention as shown above. There are only 2 432 values for <code>col_n</code>: <code>"<strong>none</strong>"</code> 433 hides the text box for the designated column and <code>"<strong>select</strong>"</code> 434 creates a drop-down list with only 1 occurrence of each cell data. Similarly 435 to row designation, here the first column is column number <strong>0</strong>: 436 <code><strong>col_0</strong></code>.</p> 437<p>The button "go" in the grid can also be changed. By adding the <code><strong>btn_text</strong></code> property with 438 a desired value, you can modify the text of the button. Below you will find an exhaustive list of properties you can define. </p> 439 440 441<h2>Properties table </h2> 442<p>In the following table you will find all the elements you can define in the grid:</p> 443<table id="recap" cellspacing="0" class="mytable" > 444 <tr> 445 <th >Property Name</th> 446 <th >Type</th> 447 <th >Description</th> 448 <th >Example</th> 449 </tr> 450 <tr> 451 <td><strong>col_0</strong></td> 452 <td>string</td> 453 <td>hides text box (input) for a desired column</td> 454 <td><code> var MyTableFilter = { <strong> </strong>col_0: "none" 455 }</code></td> 456 </tr> 457 <tr> 458 <td><strong>col_3</strong></td> 459 <td>string</td> 460 <td>generates a drop-down list for a desired column</td> 461 <td><code> var MyTableFilter = { <strong> </strong>col_3: "select" 462 }</code></td> 463 </tr> 464 <tr> 465 <td><strong>btn</strong></td> 466 <td>boolean</td> 467 <td>if set true shows "Go" button in the grid (default - false) </td> 468 <td><code>var MyTableFilter = { <strong> </strong>btn: true }</code></td> 469 </tr> 470 <tr> 471 <td><strong>btn_text</strong></td> 472 <td>string</td> 473 <td>changes the text of the button</td> 474 <td><code>var MyTableFilter = { <strong> </strong>btn_text: "Filter" 475 }</code></td> 476 </tr> 477 <tr> 478 <td><strong>enter_key</strong></td> 479 <td>boolean</td> 480 <td>disables "enter" key (default - true) </td> 481 <td><code>var MyTableFilter = { <strong> </strong>enter_key: false }</code></td> 482 </tr> 483 <tr> 484 <td><strong>mod_filter_fn</strong></td> 485 <td>function</td> 486 <td>calls another function instead of the default function ( Filter('mytable') 487 ) at submission </td> 488 <td><code>var MyTableFilter = { <strong> </strong>mod_filter_fn: function(){ 489 alert('Calls another function!!!'); Filter('table_3'); }}</code></td> 490 </tr> 491 <tr> 492 <td><strong>display_all_text</strong></td> 493 <td>string</td> 494 <td>sets message for "display all" in drop-down list; (default - 495 empty)</td> 496 <td><code> var MyTableFilter = { <strong> </strong>display_all_text: "Display 497 all towns" }</code></td> 498 </tr> 499 <tr> 500 <td><strong>on_change</strong></td> 501 <td>boolean</td> 502 <td> filters the table as you change the value of a drop-down 503 list (default - true)</td> 504 <td><code>var MyTableFilter = { <strong> </strong>on_change: false }</code></td> 505 </tr> 506 <tr> 507 <td><strong>rows_counter</strong></td> 508 <td>boolean</td> 509 <td>if set true, it will display the total # of rows displayed at the top 510 of the table in left corner (default - false) </td> 511 <td><code>var MyTableFilter = { <strong> </strong>rows_counter: true }</code></td> 512 </tr> 513 <tr> 514 <td><strong>rows_counter_text</strong></td> 515 <td>string</td> 516 <td>sets text of the label for total # of rows displayed (default - "Data 517 rows: ") </td> 518 <td><code>var MyTableFilter = { <strong> </strong>rows_counter_text: "Total 519 items: " }</code></td> 520 </tr> 521 <tr> 522 <td><strong>btn_reset</strong></td> 523 <td>boolean</td> 524 <td>if set true, it will show a "Reset" button at the top of the 525 table in right corner (default - false) allowing users to re-initialise 526 the table </td> 527 <td><code>var MyTableFilter = { <strong> </strong>btn_reset: true }</code></td> 528 </tr> 529 <tr> 530 <td><strong>btn_reset_text</strong></td> 531 <td>string</td> 532 <td>sets text for the "Reset" button (default - "Reset") 533 </td> 534 <td><code>var MyTableFilter = { <strong> </strong>btn_reset_text: "Clear" 535 }</code></td> 536 </tr> 537 <tr> 538 <td><strong>sort_select</strong></td> 539 <td>boolean</td> 540 <td>if set true, it will sort options in the drop-down list(s) (default - 541 false) </td> 542 <td><code>var MyTableFilter = { <strong> </strong>sort_select: true }</code></td> 543 </tr> 544 <tr> 545 <td><strong>paging</strong></td> 546 <td>boolean</td> 547 <td>if set true, it will generate a paging feature </td> 548 <td><code>var MyTableFilter = { <strong> </strong>paging: true }</code></td> 549 </tr> 550 <tr> 551 <td><strong>paging_length</strong></td> 552 <td>number</td> 553 <td>sets # of rows displayed in a page (default - 10) </td> 554 <td><code>var MyTableFilter = { <strong> </strong>paging_length: 50 }</code></td> 555 </tr> 556 <tr> 557 <td><strong>loader</strong></td> 558 <td>boolean</td> 559 <td>if set true, it will display a "loading" message (default - 560 false) </td> 561 <td><code>var MyTableFilter = { <strong> </strong>loader: true }</code></td> 562 </tr> 563 <tr> 564 <td><strong>loader_text</strong></td> 565 <td>string</td> 566 <td>sets text for "loading" message (default - "Loading...") 567 </td> 568 <td><code>var MyTableFilter = { <strong> </strong>loader_text: "Filtering 569 data..." }</code></td> 570 </tr> 571 <tr> 572 <td><strong>exact_match</strong></td> 573 <td>boolean</td> 574 <td>if set true, only exact matches will be displayed (default - false)</td> 575 <td><code>var MyTableFilter = { <strong> </strong>exact_match: true }</code></td> 576 </tr> 577 <tr> 578 <td><strong>grid</strong></td> 579 <td>boolean</td> 580 <td>enables / disables filter grid generation (default - true) </td> 581 <td><code>var MyTableFilter = { <strong> </strong>grid: false }</code></td> 582 </tr> 583 <tr> 584 <td><strong>alternate_rows</strong></td> 585 <td>boolean</td> 586 <td>if set true, it enables alternating rows background color (default - false) 587 </td> 588 <td><code>var MyTableFilter = { <strong> </strong>alternate_rows: true }</code></td> 589 </tr> 590 <tr> 591 <td><strong>col_operation</strong></td> 592 <td>object</td> 593 <td>this object calculates the values of a column (sum,mean). It works with 594 the following properties: 595 <ul> 596 <li> <em>colOperation["id"]</em> contains the ids of elements 597 <br /> 598 showing result (array)</li> 599 <li> <em>colOperation["col"]</em> contains index of <br /> 600 columns (array)</li> 601 <li> <em>colOperation["operation"]</em> contains operation<br /> 602 type (array, values: 'sum', 'mean')</li> 603 <li> <em>colOperation["write_method"]</em> array defines <br /> 604 which method to use for displaying the <br /> 605 result ('innerHTML', 'setValue', 'createTextNode').<br /> 606 Note that innerHTML is the default value. </li> 607 </ul></td> 608 <td><code> var MyTableFilter = { <br /> 609 col_operation: { <br /> 610 id: ["table8Tot1","table8Tot2"], 611 <br /> 612 col: [2,5],<br /> 613 operation: ["sum","mean"],<br /> 614 write_method: ["innerHTML","setValue"] 615 <br /> 616 }<br /> 617 } </code></td> 618 </tr> 619 <tr> 620 <td><strong>rows_always_visible</strong></td> 621 <td>array</td> 622 <td>this property makes desired rows always visible. It accepts an array definining 623 the row indexes to be displayed ([1,2,3..]) </td> 624 <td><code>var MyTableFilter = { <strong> </strong>rows_always_visible: [9,10] 625 }</code></td> 626 </tr> 627 <tr> 628 <td><strong>col_width</strong></td> 629 <td>array</td> 630 <td>this property defines column widths. It accepts an array containing width 631 values (['150px','10%']) </td> 632 <td><code>var MyTableFilter = { <strong> </strong>col_width: ["150px","15%",null,null] 633 }</code></td> 634 </tr> 635 <tr> 636 <td><strong>bind_script</strong></td> 637 <td>object</td> 638 <td>this property designs a function that will be called after grid generation. 639 This function will interact with another script in order to merge the filter 640 generator with other script(s). Note that the invoked function needs to 641 developed. It accepts an object with the following properties: 642 <ul> 643 <li><em>bind_script["name"]</em> contains an identifier for 644 the script (string)</li> 645 <li><em>bind_script["target_fn"]</em> designs the function to 646 invoke (function) </li> 647 </ul></td> 648 <td><code>var table10_Props = {<br /> 649 bind_script:{ name:"autocomplete", target_fn: 650 setAutoComplete }<br /> 651 };</code></td> 652 </tr> 653</table> 654<script language="javascript" type="text/javascript"> 655//<![CDATA[ 656 var recapFilters = { 657 sort_select: true, 658 loader: true, 659 col_1: "select", 660 on_change: true, 661 display_all_text: " [ Show all ] ", 662 rows_counter: true, 663 btn_reset: true, 664 alternate_rows: true, 665 btn_reset_text: "Clear", 666 col_width: ["150px","150px",null,null] 667 } 668 setFilterGrid("recap",recapFilters); 669//]]> 670</script> 671 672<h2>Public functions</h2> 673<p>These are the functions developers should use in order to interact with the filter grid:</p> 674<table id="fns" cellspacing="0" class="mytable"> 675 <tr> 676 <th>Fn name</th> 677 <th>Description</th> 678 <th>Example</th> 679 </tr> 680 <tr> 681 <td><strong>TF_GetFilterIds()</strong></td> 682 <td>Returns an array containing filter grid ids of the page</td> 683 <td> <code>var gridIds = TF_GetFilterIds();</code> </td> 684 </tr> 685 <tr> 686 <td><strong>TF_HasGrid(id)</strong></td> 687 <td>Checks if the table designated by the argument has a filter grid. It returns 688 a boolean</td> 689 <td><code>var hasTFGrid = TF_HasGrid("myTableId");</code> </td> 690 </tr> 691 <tr> 692 <td><strong>TF_GetFilters(id)</strong></td> 693 <td>Returns an array containing filter ids of a specified grid</td> 694 <td><code>var filterIds = TF_GetFilters("myTableId");</code> </td> 695 </tr> 696 <tr> 697 <td><strong>TF_GetStartRow(id)</strong></td> 698 <td>Returns the index of the row from which will start the filtering process</td> 699 <td><code>var startRow = TF_GetStartRow("myTableId");</code> </td> 700 </tr> 701 <tr> 702 <td><strong>TF_GetColValues(id,colindex,num)</strong></td> 703 <td>Returns an array containing cell values of a column. It needs following 704 args: 705 <ul> 706 <li>a table id (string)</li> 707 <li>a column index (number)</li> 708 <li>a boolean set to true if we want only numbers to be returned (optional)</li> 709 </ul></td> 710 <td><code>var myColValues = TF_GetColValues("myTableId",0);</code> 711 </td> 712 </tr> 713 <tr> 714 <td><strong>TF_Filter(id)</strong></td> 715 <td>Filters a table</td> 716 <td><code>TF_Filter("myTableId");</code></td> 717 </tr> 718 <tr> 719 <td><strong>TF_RemoveFilterGrid(id)</strong></td> 720 <td>Removes a filter grid. Note that all the properties attached to the filter 721 table will not be removed. This will make it easier to reset the filter 722 (if needed) since all the properties are still available</td> 723 <td><code>TF_RemoveFilterGrid("myTableId");</code> </td> 724 </tr> 725 <tr> 726 <td><strong>TF_ClearFilters(id)</strong></td> 727 <td>Clears the grid filters only. Note that the table will not be filtered</td> 728 <td><code>TF_ClearFilters(id);</code> </td> 729 </tr> 730 <tr> 731 <td><strong>TF_SetFilterValue(id,index,searcharg)</strong></td> 732 <td>Inserts a value in a specified filter. It accepts the following arguments: 733 <ul> 734 <li>a table id (string)</li> 735 <li>a filter column index (numeric value)</li> 736 <li>a search string</li> 737 </ul></td> 738 <td><code>TF_SetFilterValue("myTableId",2,'Search string here');</code> 739 </td> 740 </tr> 741</table> 742<script language="javascript" type="text/javascript"> 743//<![CDATA[ 744 var fnsFilters = { 745 sort_select: true, 746 loader: true, 747 col_0: "select", 748 on_change: true, 749 display_all_text: " [ Show all ] ", 750 rows_counter: true, 751 btn_reset: true, 752 alternate_rows: true, 753 btn_reset_text: "Clear", 754 col_width: ["220px",null,"280px"] 755 } 756 setFilterGrid("fns",fnsFilters); 757//]]> 758</script> 759 760<h2>Last thing...</h2> 761<p>I hope you will find this script useful. Feel free to use and change this script, 762 however I will be grateful if you could <a href="mailto:maxgug@hotmail.com?subject=HTML Table Filter Generator">inform 763 me</a> about any usage or modification. </p> 764 765<h2>Enough words</h2> 766<ul> 767 <li><a href="tablefilter.js">Download the .js file</a></li> 768 <li><a href="filtergrid.css">Download the .css file</a></li> 769</ul> 770<hr /> 771 772 773</body> 774</html> 775