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 &quot;filter by column&quot; 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>&lt;</strong>, <strong>&lt;=</strong>,
41  <strong>&gt;</strong>, <strong>&gt;=</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 &quot;.js&quot; 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=&quot;table1&quot;</code>) to the table and inserting the script below in the <code>&lt;body&gt;</code> section:</p>
226
227<pre><code>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
228	setFilterGrid(&quot;table1&quot;);
229&lt;/script&gt; </code></pre>
230
231<p>the grid will be generated automatically. The number of filters (<code>&lt;input&gt;</code>)
232  is equal to the number of columns (<code>&lt;td&gt;</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 &quot;reference&quot; 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(&quot;table2&quot;,<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>&lt;td
322  colspan=&quot;2&quot;&gt;</code>) are simply skipped.</p>
323<p>By default, the script adds text boxes (<code>&lt;input&gt;</code>). As you
324  will see in the next example, you may also decide to use a <strong>drop-down
325  lists</strong> (<code>&lt;select&gt;</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%">&nbsp;</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>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;
420	var table3Filters = {
421		<strong>btn</strong>: <strong>true</strong>,
422<strong>		col_0</strong>: &quot;<strong>none</strong>&quot;,
423<strong>		col_2</strong>: &quot;<strong>select</strong>&quot;,
424		<strong>btn_text</strong>: &quot;  &gt;  &quot;
425	}
426	setFilterGrid(&quot;table3&quot;,1,<strong>table3Filters</strong>);
427&lt;/script&gt;</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>&quot;<strong>none</strong>&quot;</code>
433  hides the text box for the designated column and <code>&quot;<strong>select</strong>&quot;</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 &quot;go&quot; 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: &quot;none&quot;
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: &quot;select&quot;
462      }</code></td>
463  </tr>
464  <tr>
465    <td><strong>btn</strong></td>
466    <td>boolean</td>
467    <td>if set true shows &quot;Go&quot; 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: &quot;Filter&quot;
475      }</code></td>
476  </tr>
477  <tr>
478    <td><strong>enter_key</strong></td>
479    <td>boolean</td>
480    <td>disables &quot;enter&quot; 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 &quot;display all&quot; in drop-down list; (default -
495      empty)</td>
496    <td><code> var MyTableFilter = { <strong> </strong>display_all_text: &quot;Display
497      all towns&quot; }</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 - &quot;Data
517      rows: &quot;) </td>
518    <td><code>var MyTableFilter = { <strong> </strong>rows_counter_text: &quot;Total
519      items: &quot; }</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 &quot;Reset&quot; 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 &quot;Reset&quot; button (default - &quot;Reset&quot;)
533    </td>
534    <td><code>var MyTableFilter = { <strong> </strong>btn_reset_text: &quot;Clear&quot;
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 &quot;loading&quot; 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 &quot;loading&quot; message (default - &quot;Loading...&quot;)
567    </td>
568    <td><code>var MyTableFilter = { <strong> </strong>loader_text: &quot;Filtering
569      data...&quot; }</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[&quot;id&quot;]</em> contains the ids of elements
597          <br />
598          showing result (array)</li>
599        <li> <em>colOperation[&quot;col&quot;]</em> contains index of <br />
600          columns (array)</li>
601        <li> <em>colOperation[&quot;operation&quot;]</em> contains operation<br />
602          type (array, values: 'sum', 'mean')</li>
603        <li> <em>colOperation[&quot;write_method&quot;]</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      &nbsp;&nbsp;&nbsp; col_operation: { <br />
610      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id: [&quot;table8Tot1&quot;,&quot;table8Tot2&quot;],
611      <br />
612      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; col: [2,5],<br />
613      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;operation: [&quot;sum&quot;,&quot;mean&quot;],<br />
614      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; write_method: [&quot;innerHTML&quot;,&quot;setValue&quot;]
615      <br />
616      &nbsp;&nbsp;&nbsp; }<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: [&quot;150px&quot;,&quot;15%&quot;,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[&quot;name&quot;]</em> contains an identifier for
644          the script (string)</li>
645        <li><em>bind_script[&quot;target_fn&quot;]</em> designs the function to
646          invoke (function) </li>
647      </ul></td>
648    <td><code>var table10_Props = {<br />
649      &nbsp;&nbsp;&nbsp; bind_script:{ name:&quot;autocomplete&quot;, 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(&quot;myTableId&quot;);</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(&quot;myTableId&quot;);</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(&quot;myTableId&quot;);</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(&quot;myTableId&quot;,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(&quot;myTableId&quot;);</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(&quot;myTableId&quot;);</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(&quot;myTableId&quot;,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