UNPKG

2.67 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>{NAME} v{VERSION} - Theme Roller Demo</title>
5 <!-- @import partials/style.html -->
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<!-- @import partials/pre.html -->
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<!-- @import partials/books.html -->
26
27<!-- @import partials/tablefilter-script.html -->
28<script data-config>
29var 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 /* Filter types*/
48 col_3: 'select',
49 col_4: 'select',
50
51 /* cell parser for 'In store' column */
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 /* Custom options for 'Shipping' column */
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 /* theme */
82 themes: [{ name: 'default' }],
83
84 extensions: [{ name: 'sort' }]
85};
86
87var tf = new TableFilter('books', tfConfig, 2);
88tf.init();
89
90// TableFilter themes
91var 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
98function changeTheme(name){
99 var stylesheet = tf.getStylesheet('default');
100 stylesheet.href = THEMES[name];
101}
102</script>
103
104<!-- @import partials/pre-inline-script.html -->
105</body>
106</html>