2015-06-21 14:10:24 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>{NAME} v{VERSION} - Theme Roller Demo</title>
|
|
|
|
|
<!-- @import partials/style.html -->
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>{NAME} v{VERSION}</h1>
|
|
|
|
|
<h2>Theme roller demo</h2>
|
|
|
|
|
<p>
|
|
|
|
|
This demo shows how to implement a theme roller.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<!-- @import partials/pre.html -->
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
Theme:
|
|
|
|
|
<select onchange="javascript:changeTheme(this.value);">
|
|
|
|
|
<option value="default" selected="selected">default</option>
|
|
|
|
|
<option value="mytheme">mytheme</option>
|
|
|
|
|
<option value="skyblue">skyblue</option>
|
2016-11-19 13:42:37 +01:00
|
|
|
<option value="transparent">transparent</option>
|
2015-06-21 14:10:24 +02:00
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- @import partials/books.html -->
|
|
|
|
|
|
|
|
|
|
<!-- @import partials/tablefilter-script.html -->
|
|
|
|
|
<script data-config>
|
|
|
|
|
var tfConfig = {
|
|
|
|
|
base_path: '../dist/tablefilter/',
|
|
|
|
|
filters_row_index: 2,
|
|
|
|
|
headers_row_index: 1,
|
|
|
|
|
sort: true,
|
2016-09-10 16:07:46 +02:00
|
|
|
col_types: [
|
|
|
|
|
'string', 'string', 'number',
|
2016-09-21 07:35:45 +02:00
|
|
|
'string', 'string', 'date'
|
2015-06-21 14:10:24 +02:00
|
|
|
],
|
2017-05-02 14:31:02 +02:00
|
|
|
rows_counter: {
|
|
|
|
|
text: 'Books: '
|
|
|
|
|
},
|
2015-06-21 14:10:24 +02:00
|
|
|
alternate_rows: true,
|
|
|
|
|
btn_reset: true,
|
2017-11-01 12:11:24 +01:00
|
|
|
mark_active_columns: {
|
|
|
|
|
highlight_column: true
|
|
|
|
|
},
|
2015-06-21 14:10:24 +02:00
|
|
|
|
|
|
|
|
/* Filter types*/
|
|
|
|
|
col_3: 'select',
|
|
|
|
|
col_4: 'select',
|
|
|
|
|
|
2017-02-26 11:43:36 +01:00
|
|
|
/* cell parser for 'In store' column */
|
|
|
|
|
cell_parser: {
|
|
|
|
|
cols: [3],
|
|
|
|
|
parse: function(o, cell, colIndex){
|
|
|
|
|
if(colIndex === 3){
|
|
|
|
|
var chk = cell.getElementsByTagName('input')[0];
|
|
|
|
|
if(!chk){
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
if(chk.checked){
|
|
|
|
|
return 'yes';
|
|
|
|
|
} else {
|
|
|
|
|
return 'no';
|
|
|
|
|
}
|
2015-06-21 14:10:24 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/* Custom options for 'Shipping' column */
|
|
|
|
|
custom_options: {
|
|
|
|
|
cols: [4],
|
|
|
|
|
texts: [
|
|
|
|
|
['1 Hour','12 Hours','24 Hours','2 Days','na']
|
|
|
|
|
],
|
|
|
|
|
values: [
|
|
|
|
|
['1 Hour','12 Hours','24 Hours','2 Days','na']
|
|
|
|
|
],
|
|
|
|
|
sorts: [false]
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/* theme */
|
|
|
|
|
themes: [{ name: 'default' }],
|
|
|
|
|
|
|
|
|
|
extensions: [{ name: 'sort' }]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var tf = new TableFilter('books', tfConfig, 2);
|
|
|
|
|
tf.init();
|
|
|
|
|
|
|
|
|
|
// TableFilter themes
|
|
|
|
|
var THEMES = {
|
|
|
|
|
'default': tf.themesPath + 'default/default.css',
|
|
|
|
|
'mytheme': tf.themesPath + 'mytheme/mytheme.css',
|
2016-11-19 13:42:37 +01:00
|
|
|
'skyblue': tf.themesPath + 'skyblue/skyblue.css',
|
|
|
|
|
'transparent': tf.themesPath + 'transparent/transparent.css'
|
2015-06-21 14:10:24 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function changeTheme(name){
|
2015-06-27 16:47:13 +02:00
|
|
|
var stylesheet = tf.getStylesheet('default');
|
|
|
|
|
stylesheet.href = THEMES[name];
|
2015-06-21 14:10:24 +02:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- @import partials/pre-inline-script.html -->
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
