1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <title>{NAME} v{VERSION} - Theme Roller Demo</title>
|
5 |
|
6 | </head>
|
7 | <body>
|
8 | <h1>{NAME} v{VERSION}</h1>
|
9 | <h2>Theme roller demo</h2>
|
10 | <p>
|
11 | This demo shows how to implement a theme roller.
|
12 | </p>
|
13 |
|
14 |
|
15 |
|
16 | <div>
|
17 | Theme:
|
18 | <select onchange="javascript:changeTheme(this.value);">
|
19 | <option value="default" selected="selected">default</option>
|
20 | <option value="mytheme">mytheme</option>
|
21 | <option value="skyblue">skyblue</option>
|
22 | <option value="transparent">transparent</option>
|
23 | </select>
|
24 | </div>
|
25 |
|
26 |
|
27 |
|
28 | <script data-config>
|
29 | var tfConfig = {
|
30 | base_path: '../dist/tablefilter/',
|
31 | filters_row_index: 2,
|
32 | headers_row_index: 1,
|
33 | sort: true,
|
34 | col_types: [
|
35 | 'string', 'string', 'number',
|
36 | 'string', 'string', 'date'
|
37 | ],
|
38 | rows_counter: true,
|
39 | rows_counter_text: 'Books: ',
|
40 | alternate_rows: true,
|
41 | btn_reset: true,
|
42 | mark_active_columns: true,
|
43 |
|
44 |
|
45 | col_3: 'select',
|
46 | col_4: 'select',
|
47 |
|
48 |
|
49 | custom_cell_data_cols: [3],
|
50 | custom_cell_data: function(o, cell, colIndex){
|
51 | if(colIndex === 3){
|
52 | var chk = cell.getElementsByTagName('input')[0];
|
53 | if(!chk){
|
54 | return '';
|
55 | }
|
56 | if(chk.checked){
|
57 | return 'yes';
|
58 | } else {
|
59 | return 'no';
|
60 | }
|
61 | }
|
62 | },
|
63 |
|
64 |
|
65 | custom_options: {
|
66 | cols: [4],
|
67 | texts: [
|
68 | ['1 Hour','12 Hours','24 Hours','2 Days','na']
|
69 | ],
|
70 | values: [
|
71 | ['1 Hour','12 Hours','24 Hours','2 Days','na']
|
72 | ],
|
73 | sorts: [false]
|
74 | },
|
75 |
|
76 |
|
77 | themes: [{ name: 'default' }],
|
78 |
|
79 | extensions: [{ name: 'sort' }]
|
80 | };
|
81 |
|
82 | var tf = new TableFilter('books', tfConfig, 2);
|
83 | tf.init();
|
84 |
|
85 |
|
86 | var THEMES = {
|
87 | 'default': tf.themesPath + 'default/default.css',
|
88 | 'mytheme': tf.themesPath + 'mytheme/mytheme.css',
|
89 | 'skyblue': tf.themesPath + 'skyblue/skyblue.css',
|
90 | 'transparent': tf.themesPath + 'transparent/transparent.css'
|
91 | };
|
92 |
|
93 | function changeTheme(name){
|
94 | var stylesheet = tf.getStylesheet('default');
|
95 | stylesheet.href = THEMES[name];
|
96 | }
|
97 | </script>
|
98 |
|
99 |
|
100 | </body>
|
101 | </html>
|