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: {
|
39 | text: 'Books: '
|
40 | },
|
41 | alternate_rows: true,
|
42 | btn_reset: true,
|
43 | mark_active_columns: {
|
44 | highlight_column: true
|
45 | },
|
46 |
|
47 |
|
48 | col_3: 'select',
|
49 | col_4: 'select',
|
50 |
|
51 |
|
52 | cell_parser: {
|
53 | cols: [3],
|
54 | parse: function(o, cell, colIndex){
|
55 | if(colIndex === 3){
|
56 | var chk = cell.getElementsByTagName('input')[0];
|
57 | if(!chk){
|
58 | return '';
|
59 | }
|
60 | if(chk.checked){
|
61 | return 'yes';
|
62 | } else {
|
63 | return 'no';
|
64 | }
|
65 | }
|
66 | }
|
67 | },
|
68 |
|
69 |
|
70 | custom_options: {
|
71 | cols: [4],
|
72 | texts: [
|
73 | ['1 Hour','12 Hours','24 Hours','2 Days','na']
|
74 | ],
|
75 | values: [
|
76 | ['1 Hour','12 Hours','24 Hours','2 Days','na']
|
77 | ],
|
78 | sorts: [false]
|
79 | },
|
80 |
|
81 |
|
82 | themes: [{ name: 'default' }],
|
83 |
|
84 | extensions: [{ name: 'sort' }]
|
85 | };
|
86 |
|
87 | var tf = new TableFilter('books', tfConfig, 2);
|
88 | tf.init();
|
89 |
|
90 |
|
91 | var THEMES = {
|
92 | 'default': tf.themesPath + 'default/default.css',
|
93 | 'mytheme': tf.themesPath + 'mytheme/mytheme.css',
|
94 | 'skyblue': tf.themesPath + 'skyblue/skyblue.css',
|
95 | 'transparent': tf.themesPath + 'transparent/transparent.css'
|
96 | };
|
97 |
|
98 | function changeTheme(name){
|
99 | var stylesheet = tf.getStylesheet('default');
|
100 | stylesheet.href = THEMES[name];
|
101 | }
|
102 | </script>
|
103 |
|
104 |
|
105 | </body>
|
106 | </html>
|