tablefilter
Version:
A Javascript library making HTML tables filterable and a bit more
107 lines (94 loc) • 2.67 kB
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>
<option value="transparent">transparent</option>
</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,
col_types: [
'string', 'string', 'number',
'string', 'string', 'date'
],
rows_counter: {
text: 'Books: '
},
alternate_rows: true,
btn_reset: true,
mark_active_columns: {
highlight_column: true
},
/* Filter types*/
col_3: 'select',
col_4: 'select',
/* 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';
}
}
}
},
/* 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',
'skyblue': tf.themesPath + 'skyblue/skyblue.css',
'transparent': tf.themesPath + 'transparent/transparent.css'
};
function changeTheme(name){
var stylesheet = tf.getStylesheet('default');
stylesheet.href = THEMES[name];
}
</script>
<!-- @import partials/pre-inline-script.html -->
</body>
</html>