UNPKG

3.38 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
35 /* EXAMPLE 1
36 *********************** */
37var 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', // defaults to '.' for decimal and ',' for thousands
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
84var tf = new TableFilter('demo-tot', tfConfig);
85tf.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<!-- @import partials/dummy-table.html -->
96<script data-config>
97 /* EXAMPLE 2
98 *********************** */
99var 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
117var tf2 = new TableFilter('demo', tf2Config);
118tf2.init();
119</script>
120
121<!-- @import partials/pre-inline-script.html -->
122</body>
123</html>