1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <title>{NAME} v{VERSION} - Data types Demo</title>
|
5 |
|
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 € 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 |
|
25 |
|
26 |
|
27 |
|
28 | <script data-config>
|
29 | var id = function (id){
|
30 | return document.getElementById(id);
|
31 | };
|
32 | var table = id('demo-tot');
|
33 | var totRowIndex = table.getElementsByTagName('tr').length;
|
34 |
|
35 | function 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 |
|
47 | function 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 |
|
59 | function 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 | *********************** */
|
71 | var 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',
|
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 |
|
115 | var tf = new TableFilter('demo-tot', tfConfig);
|
116 | tf.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 |
|
127 | <script data-config>
|
128 | /* EXAMPLE 2
|
129 | *********************** */
|
130 | var 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 |
|
148 | var tf2 = new TableFilter('demo', tf2Config);
|
149 | tf2.init();
|
150 | </script>
|
151 |
|
152 |
|
153 | </body>
|
154 | </html>
|