tablefilter
Version:
A Javascript library making HTML tables filterable and a bit more
92 lines (83 loc) • 2.34 kB
HTML
<html lang="en">
<head>
<title>{NAME} v{VERSION} - Filter and Sort Images Demo</title>
<!-- @import partials/style.html -->
</head>
<body>
<h1>{NAME} v{VERSION}</h1>
<h2>Filter and sort images demo</h2>
<p>
This demo shows how to filter and sort a column containing images by using
the <code>custom_cell_data</code> delegate and the
<code>data-tf-sortKey</code> attribute.
</p>
<!-- @import partials/pre.html -->
<!-- @import partials/books-table-with-images.html -->
<!-- @import partials/tablefilter-script.html -->
<script data-config>
var tfConfig = {
base_path: '../dist/tablefilter/',
filters_row_index: 2,
headers_row_index: 1,
col_types: [
'string', 'string', 'string',
'number', 'string', 'string', 'date'
],
rows_counter: {
text: 'Books: '
},
alternate_rows: true,
btn_reset: true,
/* filter types*/
col_0: 'select',
col_4: 'select',
col_5: 'select',
/* cell parser for filtering images in a column */
cell_parser: {
cols: [0, 4],
parse: function(o, cell, colIndex){
if(colIndex === 0){
var img = cell.getElementsByTagName('img')[0];
if(!img){
return '';
}
return img.alt;
} else if(colIndex === 4){
var chk = cell.getElementsByTagName('input')[0];
if(chk.checked){
return 'yes';
} else {
return 'no';
}
}
}
},
/* Custom options for 'Shipping' column */
custom_options: {
cols: [5],
texts: [
[
'1 Hour', '12 Hours', '24 Hours',
'2 Days', 'na'
]
],
values: [
[
'1 Hour', '12 Hours', '24 Hours',
'2 Days', 'na'
]
],
sorts: [false]
},
/* SkyBlue theme */
themes: [{ name: 'skyblue'}],
/* Sorting feature */
extensions: [{ name: 'sort' }]
};
var tf = new TableFilter('demo', 2, tfConfig);
tf.init();
</script>
<!-- @import partials/pre-inline-script.html -->
</body>
</html>