UNPKG

3.66 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>{NAME} v{VERSION} - External Filters Demo</title>
5 <!-- @import partials/style.html -->
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();" >&nbsp;
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<!-- @import partials/pre.html -->
78<!-- @import partials/countries-table.html -->
79
80<!-- @import partials/tablefilter-script.html -->
81<script data-config>
82var 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 /* external filters */
109 external_flt_ids: [
110 'slcCountry',
111 'slcCode',
112 'slcYear',
113 'inpPop'
114 ],
115
116 /* sorting feature */
117 extensions: [{ name: 'sort' }]
118};
119
120var tf = new TableFilter('demo', tfConfig);
121tf.init();
122</script>
123<!-- @import partials/pre-inline-script.html -->
124</body>
125</html>