1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <title>{NAME} v{VERSION} - External Filters Demo</title>
|
5 |
|
6 | </head>
|
7 | <body>
|
8 | <h1>{NAME} v{VERSION}</h1>
|
9 | <h2>External filters demo</h2>
|
10 | <p>
|
11 | This demo shows how generate the column filters in an external container.
|
12 | </p>
|
13 |
|
14 | <div id="extGrid" class="panel">
|
15 | <label>Choose Country:</label><br>
|
16 | <span id="slcCountry"></span><br>
|
17 | <span>Keep Ctrl/Cmd key pressed for multiple selections</span><br><br>
|
18 | <label>Choose Country code:</label><br>
|
19 | <span id="slcCode"></span><br><br>
|
20 | <label>Choose year:</label><br>
|
21 | <span id="slcYear"></span><br><br>
|
22 | <label for="inpPop">POP:</label><br>
|
23 | <span id="inpPop"></span><br><br>
|
24 |
|
25 | <form id="frmRadioInps" name="frmRadioInps">
|
26 | <label for="rdoXRat">XRAT:</label><br>
|
27 | <input type="checkbox" id="rdoXRat" name="rdoXRat" value="!NA"
|
28 | onclick="
|
29 | if(this.checked){
|
30 | tf.setFilterValue(4, this.value);
|
31 | } else tf.setFilterValue(4, '');
|
32 | tf.filter();" >Not NA
|
33 |
|
34 | <br><br>
|
35 |
|
36 | <label for="chkCI">CI:</label><br>
|
37 | <input type="radio" id="chkCI" name="chkCI" value=">0 && <=10"
|
38 | onclick="
|
39 | if(this.checked){
|
40 | tf.setFilterValue(8, this.value);
|
41 | tf.filter();
|
42 | }" > 0 - 10
|
43 | <input type="radio" id="chkCI" name="chkCI" value=">10 && <=20"
|
44 | onclick="
|
45 | if(this.checked){
|
46 | tf.setFilterValue(8, this.value);
|
47 | tf.filter();
|
48 | }" > 10 - 20
|
49 | <input type="radio" id="chkCI" name="chkCI" value=">20 && <=30"
|
50 | onclick="
|
51 | if(this.checked){
|
52 | tf.setFilterValue(8, this.value);
|
53 | tf.filter();
|
54 | }" > 20 - 30
|
55 |
|
56 | </form>
|
57 |
|
58 | <hr>
|
59 |
|
60 | <div style="float:left;">
|
61 | <input id="btnFlt" value="Filter" type="button"
|
62 | onclick="tf.filter();" >
|
63 | <input id="btnClr" value="Clear" type="button"
|
64 | onclick="tf.clearFilters();
|
65 | //clears radio btns
|
66 | for( var o=frmRadioInps.elements, p=o.length - 1; p > -1; p--) {
|
67 | if ( o[p].type ){
|
68 | o[p].checked = false;
|
69 | }
|
70 | }
|
71 | " >
|
72 | </div>
|
73 | <div id="statusDiv"></div>
|
74 | <div style="clear:both;"></div>
|
75 | </div>
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 | <script data-config>
|
82 | var tfConfig = {
|
83 | base_path: '../dist/tablefilter/',
|
84 | alternate_rows: true,
|
85 | rows_counter: {
|
86 | text: 'Displayed rows: '
|
87 | },
|
88 | loader: true,
|
89 | status: true,
|
90 | status_bar: true,
|
91 | status_bar_target_id: 'statusDiv',
|
92 | col_types: [
|
93 | 'string', 'string', 'number',
|
94 | 'number', 'number', 'number',
|
95 | 'number', 'number', 'number'
|
96 | ],
|
97 | clear_filter_text: [
|
98 | ' [ Show all ] ',
|
99 | '<Clear>',
|
100 | 'Clear:'
|
101 | ],
|
102 | col_0: "multiple",
|
103 | col_1: "select",
|
104 | col_2: "checklist",
|
105 | col_4: "none",
|
106 | col_8: "none",
|
107 |
|
108 |
|
109 | external_flt_ids: [
|
110 | 'slcCountry',
|
111 | 'slcCode',
|
112 | 'slcYear',
|
113 | 'inpPop'
|
114 | ],
|
115 |
|
116 |
|
117 | extensions: [{ name: 'sort' }]
|
118 | };
|
119 |
|
120 | var tf = new TableFilter('demo', tfConfig);
|
121 | tf.init();
|
122 | </script>
|
123 |
|
124 | </body>
|
125 | </html>
|