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 | /* EXAMPLE 1
|
36 | *********************** */
|
37 | var tfConfig = {
|
38 | base_path: '../dist/tablefilter/',
|
39 | filters_row_index: 1,
|
40 | alternate_rows: true,
|
41 | rows_counter: true,
|
42 | btn_reset: true,
|
43 | loader: true,
|
44 | status_bar: true,
|
45 | col_types: [
|
46 | 'string',
|
47 | 'string',
|
48 | 'string',
|
49 | { type: 'formatted-number', decimal: ',', thousands: '.' },
|
50 | 'formatted-number',
|
51 | 'string',
|
52 | { type: 'date', locale: 'fr' },
|
53 | { type: 'date', locale: 'en', format: '{dd}-{MM}-{yyyy|yy}' },
|
54 | { type: 'date', locale: 'en', format: ['{dd}-{months}-{yyyy|yy}'] },
|
55 | 'ipaddress'
|
56 | ],
|
57 | rows_always_visible: [totRowIndex],
|
58 | on_filters_loaded: function(tf){
|
59 | tf.setFilterValue(3, '>1.000');
|
60 | tf.setFilterValue(4, '<2,500');
|
61 | tf.setFilterValue(6, '>23-01-95');
|
62 | tf.setFilterValue(8, '<2000');
|
63 | tf.filter();
|
64 | },
|
65 | extensions:[
|
66 | { name: 'sort' },
|
67 | {
|
68 | name: 'colOps',
|
69 | id: ['sum1', 'sum2'],
|
70 | col: [3, 4],
|
71 | operation: ['sum', 'sum'],
|
72 | write_method: ['innerhtml', 'innerhtml'],
|
73 | exclude_row: [totRowIndex],
|
74 | decimal_precision: [2, 2],
|
75 | tot_row_index: [totRowIndex],
|
76 | format_result: [
|
77 | { prefix: '€ ' },
|
78 | { prefix: '$ ' }
|
79 | ]
|
80 | }
|
81 | ]
|
82 | };
|
83 |
|
84 | var tf = new TableFilter('demo-tot', tfConfig);
|
85 | tf.init();
|
86 |
|
87 | </script>
|
88 |
|
89 | <p>
|
90 | Below an example of ISO date support ({yyyy|yy}/{MM}/{dd}).
|
91 | Use <code>locale</code> to set a locale globally
|
92 | (defaults to 'en').
|
93 | </p>
|
94 |
|
95 |
|
96 | <script data-config>
|
97 | /* EXAMPLE 2
|
98 | *********************** */
|
99 | var tf2Config = {
|
100 | base_path: '../dist/tablefilter/',
|
101 | alternate_rows: true,
|
102 | rows_counter: true,
|
103 | btn_reset: true,
|
104 | loader: true,
|
105 | status_bar: true,
|
106 | locale: 'en-US',
|
107 | col_types: [
|
108 | 'string', 'number', 'string',
|
109 | 'number', 'string', 'date'
|
110 | ],
|
111 | on_filters_loaded: function(tf){
|
112 | tf.setFilterValue(5, '>95-05-18');
|
113 | tf.filter();
|
114 | }
|
115 | };
|
116 |
|
117 | var tf2 = new TableFilter('demo', tf2Config);
|
118 | tf2.init();
|
119 | </script>
|
120 |
|
121 |
|
122 | </body>
|
123 | </html>
|