UNPKG

4.11 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>{NAME} v{VERSION} - Data types Demo</title>
5 <!-- @import partials/style.html -->
6</head>
7<body>
8<h1>{NAME} v{VERSION}</h1>
9<h2>Data types demo</h2>
10
11<p>
12 This example shows how to define column types with the
13 <code>col_types</code> option and specifically numeric formats with:
14</p>
15<ul>
16 <li>"." thousands separator and "," decimal separator for &euro; column</li>
17 <li>"," thousands separator and "." decimal separator for US$ column</li>
18</ul>
19<p>
20 along with date types with <code>locale</code> and <code>format</code> specified on
21 a column basis.
22</p>
23
24<!-- @import partials/pre.html -->
25<!-- @import partials/dummy-table-with-totals-footer.html -->
26
27<!-- @import partials/tablefilter-script.html -->
28<script data-config>
29var id = function (id){
30 return document.getElementById(id);
31};
32var table = id('demo-tot');
33var totRowIndex = table.getElementsByTagName('tr').length;
34
35function addCommas(nStr){
36 nStr += '';
37 var x = nStr.split('.');
38 var x1 = x[0];
39 var x2 = x.length > 1 ? '.' + x[1] : '';
40 var rgx = /(\d+)(\d{3})/;
41 while (rgx.test(x1)) {
42 x1 = x1.replace(rgx, '$1' + ',' + '$2');
43 }
44 return x1 + x2;
45}
46
47function addDots(nStr){
48 nStr += '';
49 var x = nStr.split('.');
50 var x1 = x[0];
51 var x2 = x.length > 1 ? ',' + x[1] : '';
52 var rgx = /(\d+)(\d{3})/;
53 while (rgx.test(x1)) {
54 x1 = x1.replace(rgx, '$1' + '.' + '$2');
55 }
56 return x1 + x2;
57}
58
59function formatTotals(){
60 var tot1 = id('sum1').innerHTML;
61 tot1 = addDots(tot1);
62 id('sum1').innerHTML = tot1;
63
64 var tot2 = id('sum2').innerHTML;
65 tot2 = addCommas(tot2);
66 id('sum2').innerHTML = tot2;
67}
68
69 /* EXAMPLE 1
70 *********************** */
71var tfConfig = {
72 base_path: '../dist/tablefilter/',
73 filters_row_index: 1,
74 alternate_rows: true,
75 rows_counter: true,
76 btn_reset: true,
77 loader: true,
78 status_bar: true,
79 col_types: [
80 'string',
81 'string',
82 'string',
83 { type: 'formatted-number', decimal: ',', thousands: '.' },
84 'formatted-number', // defaults to '.' for decimal and ',' for thousands
85 'string',
86 { type: 'date', locale: 'fr' },
87 { type: 'date', locale: 'en', format: '{dd}-{MM}-{yyyy|yy}' },
88 { type: 'date', locale: 'en', format: ['{dd}-{months}-{yyyy|yy}'] },
89 'ipaddress'
90 ],
91 rows_always_visible: [totRowIndex],
92 on_filters_loaded: function(tf){
93 tf.setFilterValue(3, '>1.000');
94 tf.setFilterValue(4, '<2,500');
95 tf.setFilterValue(6, '>23-01-95');
96 tf.setFilterValue(8, '<2000');
97 tf.filter();
98 },
99 extensions:[
100 { name: 'sort' },
101 {
102 name: 'colOps',
103 id: ['sum1', 'sum2'],
104 col: [3, 4],
105 operation: ['sum', 'sum'],
106 write_method: ['innerhtml', 'innerhtml'],
107 exclude_row: [totRowIndex],
108 decimal_precision: [2, 2],
109 tot_row_index: [totRowIndex],
110 on_after_operation: formatTotals
111 }
112 ]
113};
114
115var tf = new TableFilter('demo-tot', tfConfig);
116tf.init();
117
118</script>
119
120<p>
121 Below an example of ISO date support ({yyyy|yy}/{MM}/{dd}).
122 Use <code>locale</code> to set a locale globally
123 (defaults to 'en').
124</p>
125
126<!-- @import partials/dummy-table.html -->
127<script data-config>
128 /* EXAMPLE 2
129 *********************** */
130var tf2Config = {
131 base_path: '../dist/tablefilter/',
132 alternate_rows: true,
133 rows_counter: true,
134 btn_reset: true,
135 loader: true,
136 status_bar: true,
137 locale: 'en-US',
138 col_types: [
139 'string', 'number', 'string',
140 'number', 'string', 'date'
141 ],
142 on_filters_loaded: function(tf){
143 tf.setFilterValue(5, '>95-05-18');
144 tf.filter();
145 }
146};
147
148var tf2 = new TableFilter('demo', tf2Config);
149tf2.init();
150</script>
151
152<!-- @import partials/pre-inline-script.html -->
153</body>
154</html>