Added filter images demo
|
@ -48,6 +48,12 @@ module.exports = function (grunt) {
|
|||
cwd: 'static/templates',
|
||||
dest: 'examples',
|
||||
expand: true
|
||||
},
|
||||
assets: {
|
||||
src: ['**'],
|
||||
cwd: 'static/examples-assets',
|
||||
dest: 'examples/assets',
|
||||
expand: true
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -153,7 +159,7 @@ module.exports = function (grunt) {
|
|||
// Build examples
|
||||
grunt.registerTask('dev-examples', ['build-examples', 'watch:templates']);
|
||||
grunt.registerTask('build-examples',
|
||||
['copy:templates', 'string-replace:examples']);
|
||||
['copy:templates', 'copy:assets', 'string-replace:examples']);
|
||||
|
||||
// Transpile with Babel
|
||||
grunt.registerTask('dev-modules', ['babel', 'copy:dist']);
|
||||
|
|
8
dist/tablefilter/1-303232cf9e9dfa428c1b.js
vendored
Normal file
7275
dist/tablefilter/tablefilter.js
vendored
BIN
examples/assets/img_best-price.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
examples/assets/img_great-deal.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
examples/assets/img_maintenance.jpg
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
examples/assets/img_new-edition.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
examples/assets/img_sold-out.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
447
examples/filter-images.html
Normal file
|
@ -0,0 +1,447 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>TableFilter v0.0.0 - Filter and Sort Images Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../dist/tablefilter/style/tablefilter.css">
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans,
|
||||
clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
padding: 1em;
|
||||
}
|
||||
pre{
|
||||
margin: auto 1em 1em 1em;
|
||||
padding: 0 1em 1em 1em;
|
||||
float: right;
|
||||
line-height: 1.45;
|
||||
background-color: #F7F7F7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>TableFilter v0.0.0</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>
|
||||
|
||||
<pre></pre>
|
||||
|
||||
|
||||
<table id="demo">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="3">Book</th>
|
||||
<th>Price</th>
|
||||
<th colspan="2">Delivery Items</th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="50"> </th>
|
||||
<th width="210">Title</th>
|
||||
<th width="150">Author</th>
|
||||
<th width="50">$</th>
|
||||
<th width="30">In store</th>
|
||||
<th width="70">Shipping</th>
|
||||
<th width="100">Publication Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-tf-sortKey="new edition">
|
||||
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||
</td>
|
||||
<td>Boris Godunov</td>
|
||||
<td>Alexandr Pushkin</td>
|
||||
<td>
|
||||
<div align="right">7.15</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">01/01/1999</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="sold out">
|
||||
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||
</td>
|
||||
<td>The Rainmaker</td>
|
||||
<td>John Grisham</td>
|
||||
<td>
|
||||
<div align="right">7.99</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="48">2 Days</td>
|
||||
<td>
|
||||
<div align="right">12/01/2001</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="best price">
|
||||
<img src="assets/img_best-price.png" alt="best price" />
|
||||
</td>
|
||||
<td>The Green Mile</td>
|
||||
<td>Stephen King</td>
|
||||
<td>
|
||||
<div align="right">11.10</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="24">24 Hours</td>
|
||||
<td>
|
||||
<div align="right">01/01/1992</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>Misery</td>
|
||||
<td>Stephen King</td>
|
||||
<td>
|
||||
<div align="right">7.70</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="na">na</td>
|
||||
<td>
|
||||
<div align="right">01/01/2003</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>The Dark Half</td>
|
||||
<td>Stephen King</td>
|
||||
<td>
|
||||
<div align="right">0</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="48">2 Days</td>
|
||||
<td>
|
||||
<div align="right">10/30/1999</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="sold out">
|
||||
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||
</td>
|
||||
<td>The Partner</td>
|
||||
<td>John Grisham</td>
|
||||
<td>
|
||||
<div align="right">12.99</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="24">24 Hours</td>
|
||||
<td>
|
||||
<div align="right">01/01/2005</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="sold out">
|
||||
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||
</td>
|
||||
<td>It</td>
|
||||
<td>Stephen King</td>
|
||||
<td>
|
||||
<div align="right">9.70</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="12">12 Hours</td>
|
||||
<td>
|
||||
<div align="right">10/15/2001</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>Cousin Bette</td>
|
||||
<td>Honore de Balzac</td>
|
||||
<td>
|
||||
<div align="right">0</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">12/01/1991</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>The Testament</td>
|
||||
<td>John Grisham</td>
|
||||
<td>
|
||||
<div align="right">19.10</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="48">2 Days</td>
|
||||
<td>
|
||||
<div align="right">12/17/1999</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="new edition">
|
||||
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||
</td>
|
||||
<td>Eugene Onegin</td>
|
||||
<td>Alexandr Pushkin</td>
|
||||
<td>
|
||||
<div align="right">11.20</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="24">24 Hours</td>
|
||||
<td>
|
||||
<div align="right">09/27/2005</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="best price">
|
||||
<img src="assets/img_best-price.png" alt="best price" />
|
||||
</td>
|
||||
<td>Dark Avenues</td>
|
||||
<td>Ivan Bunin</td>
|
||||
<td>
|
||||
<div align="right">14.96</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">10/01/2008</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>Father Goriot</td>
|
||||
<td>Honore de Balzac</td>
|
||||
<td>
|
||||
<div align="right">9.99</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="48">2 Days</td>
|
||||
<td>
|
||||
<div align="right">06/06/2010</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="sold out">
|
||||
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||
</td>
|
||||
<td>The Captain's Daughter</td>
|
||||
<td>Alexandr Pushkin</td>
|
||||
<td>
|
||||
<div align="right">10.21</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="48">2 Days</td>
|
||||
<td>
|
||||
<div align="right">03/01/2001</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="sold out">
|
||||
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||
</td>
|
||||
<td>Hamlet</td>
|
||||
<td>William Shakespeare</td>
|
||||
<td>
|
||||
<div align="right">5.99</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">04/15/2003</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="best price">
|
||||
<img src="assets/img_best-price.png" alt="best price" />
|
||||
</td>
|
||||
<td>The Village</td>
|
||||
<td>Ivan Bunin</td>
|
||||
<td>
|
||||
<div align="right">11.66</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="24">24 Hours</td>
|
||||
<td>
|
||||
<div align="right">01/02/2010</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="new edition">
|
||||
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||
</td>
|
||||
<td>The Winter's Tale</td>
|
||||
<td>William Shakespeare</td>
|
||||
<td>
|
||||
<div align="right">19.31</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">02/12/2010</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>The Black Sheep</td>
|
||||
<td>Honore de Balzac</td>
|
||||
<td>
|
||||
<div align="right">16.00</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">08/28/1976</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="new edition">
|
||||
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||
</td>
|
||||
<td>Lost Illusions</td>
|
||||
<td>Honore de Balzac</td>
|
||||
<td>
|
||||
<div align="right">8.0</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="na">na</td>
|
||||
<td>
|
||||
<div align="right">07/10/2010</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script src="../dist/tablefilter/tablefilter.js"></script>
|
||||
<script data-config>
|
||||
var tfConfig = {
|
||||
base_path: '../dist/tablefilter/',
|
||||
filters_row_index: 2,
|
||||
headers_row_index: 1,
|
||||
col_number_format: [
|
||||
null, null, null,
|
||||
'US', null, null, null
|
||||
],
|
||||
col_date_type: [
|
||||
null, null, null,
|
||||
null, null, null, 'mdy'
|
||||
],
|
||||
rows_counter: true,
|
||||
rows_counter_text: 'Books: ',
|
||||
alternate_rows: true,
|
||||
btn_reset: true,
|
||||
|
||||
/* filter types*/
|
||||
col_0: 'select',
|
||||
col_4: 'select',
|
||||
col_5: 'select',
|
||||
|
||||
/* custom_cell_data delegate used for filtering
|
||||
images in a column */
|
||||
custom_cell_data_cols: [0, 4],
|
||||
custom_cell_data: 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>
|
||||
<script>
|
||||
var configs = document.querySelectorAll('script[data-config]');
|
||||
var pre = document.body.getElementsByTagName('pre')[0];
|
||||
|
||||
[].forEach.call(configs, function(config) {
|
||||
if(pre){
|
||||
pre.innerHTML +=
|
||||
config.innerHTML.replace('<', '<').replace('>', '>');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
BIN
static/examples-assets/img_best-price.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
static/examples-assets/img_great-deal.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
static/examples-assets/img_maintenance.jpg
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
static/examples-assets/img_new-edition.png
Normal file
After Width: | Height: | Size: 2.2 KiB |
BIN
static/examples-assets/img_sold-out.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
328
static/partials/books-table-images.html
Normal file
|
@ -0,0 +1,328 @@
|
|||
|
||||
<table id="demo">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="3">Book</th>
|
||||
<th>Price</th>
|
||||
<th colspan="2">Delivery Items</th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th width="50"> </th>
|
||||
<th width="210">Title</th>
|
||||
<th width="150">Author</th>
|
||||
<th width="50">$</th>
|
||||
<th width="30">In store</th>
|
||||
<th width="70">Shipping</th>
|
||||
<th width="100">Publication Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-tf-sortKey="new edition">
|
||||
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||
</td>
|
||||
<td>Boris Godunov</td>
|
||||
<td>Alexandr Pushkin</td>
|
||||
<td>
|
||||
<div align="right">7.15</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">01/01/1999</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="sold out">
|
||||
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||
</td>
|
||||
<td>The Rainmaker</td>
|
||||
<td>John Grisham</td>
|
||||
<td>
|
||||
<div align="right">7.99</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="48">2 Days</td>
|
||||
<td>
|
||||
<div align="right">12/01/2001</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="best price">
|
||||
<img src="assets/img_best-price.png" alt="best price" />
|
||||
</td>
|
||||
<td>The Green Mile</td>
|
||||
<td>Stephen King</td>
|
||||
<td>
|
||||
<div align="right">11.10</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="24">24 Hours</td>
|
||||
<td>
|
||||
<div align="right">01/01/1992</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>Misery</td>
|
||||
<td>Stephen King</td>
|
||||
<td>
|
||||
<div align="right">7.70</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="na">na</td>
|
||||
<td>
|
||||
<div align="right">01/01/2003</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>The Dark Half</td>
|
||||
<td>Stephen King</td>
|
||||
<td>
|
||||
<div align="right">0</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="48">2 Days</td>
|
||||
<td>
|
||||
<div align="right">10/30/1999</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="sold out">
|
||||
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||
</td>
|
||||
<td>The Partner</td>
|
||||
<td>John Grisham</td>
|
||||
<td>
|
||||
<div align="right">12.99</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="24">24 Hours</td>
|
||||
<td>
|
||||
<div align="right">01/01/2005</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="sold out">
|
||||
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||
</td>
|
||||
<td>It</td>
|
||||
<td>Stephen King</td>
|
||||
<td>
|
||||
<div align="right">9.70</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="12">12 Hours</td>
|
||||
<td>
|
||||
<div align="right">10/15/2001</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>Cousin Bette</td>
|
||||
<td>Honore de Balzac</td>
|
||||
<td>
|
||||
<div align="right">0</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">12/01/1991</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>The Testament</td>
|
||||
<td>John Grisham</td>
|
||||
<td>
|
||||
<div align="right">19.10</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="48">2 Days</td>
|
||||
<td>
|
||||
<div align="right">12/17/1999</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="new edition">
|
||||
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||
</td>
|
||||
<td>Eugene Onegin</td>
|
||||
<td>Alexandr Pushkin</td>
|
||||
<td>
|
||||
<div align="right">11.20</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="24">24 Hours</td>
|
||||
<td>
|
||||
<div align="right">09/27/2005</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="best price">
|
||||
<img src="assets/img_best-price.png" alt="best price" />
|
||||
</td>
|
||||
<td>Dark Avenues</td>
|
||||
<td>Ivan Bunin</td>
|
||||
<td>
|
||||
<div align="right">14.96</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">10/01/2008</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>Father Goriot</td>
|
||||
<td>Honore de Balzac</td>
|
||||
<td>
|
||||
<div align="right">9.99</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="48">2 Days</td>
|
||||
<td>
|
||||
<div align="right">06/06/2010</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="sold out">
|
||||
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||
</td>
|
||||
<td>The Captain's Daughter</td>
|
||||
<td>Alexandr Pushkin</td>
|
||||
<td>
|
||||
<div align="right">10.21</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="48">2 Days</td>
|
||||
<td>
|
||||
<div align="right">03/01/2001</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="sold out">
|
||||
<img src="assets/img_sold-out.png" alt="sold out" />
|
||||
</td>
|
||||
<td>Hamlet</td>
|
||||
<td>William Shakespeare</td>
|
||||
<td>
|
||||
<div align="right">5.99</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">04/15/2003</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="best price">
|
||||
<img src="assets/img_best-price.png" alt="best price" />
|
||||
</td>
|
||||
<td>The Village</td>
|
||||
<td>Ivan Bunin</td>
|
||||
<td>
|
||||
<div align="right">11.66</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="24">24 Hours</td>
|
||||
<td>
|
||||
<div align="right">01/02/2010</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="new edition">
|
||||
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||
</td>
|
||||
<td>The Winter's Tale</td>
|
||||
<td>William Shakespeare</td>
|
||||
<td>
|
||||
<div align="right">19.31</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">02/12/2010</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="great deal">
|
||||
<img src="assets/img_great-deal.png" alt="great deal" />
|
||||
</td>
|
||||
<td>The Black Sheep</td>
|
||||
<td>Honore de Balzac</td>
|
||||
<td>
|
||||
<div align="right">16.00</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="0">
|
||||
<input type="checkbox" disabled="disabled" value="" />
|
||||
</td>
|
||||
<td data-tf-sortKey="1">1 Hour</td>
|
||||
<td>
|
||||
<div align="right">08/28/1976</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-tf-sortKey="new edition">
|
||||
<img src="assets/img_new-edition.png" alt="new edition" />
|
||||
</td>
|
||||
<td>Lost Illusions</td>
|
||||
<td>Honore de Balzac</td>
|
||||
<td>
|
||||
<div align="right">8.0</div>
|
||||
</td>
|
||||
<td data-tf-sortKey="1">
|
||||
<input type="checkbox" disabled="disabled" value="" checked="checked" />
|
||||
</td>
|
||||
<td data-tf-sortKey="na">na</td>
|
||||
<td>
|
||||
<div align="right">07/10/2010</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
93
static/templates/filter-images.html
Normal file
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE 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-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_number_format: [
|
||||
null, null, null,
|
||||
'US', null, null, null
|
||||
],
|
||||
col_date_type: [
|
||||
null, null, null,
|
||||
null, null, null, 'mdy'
|
||||
],
|
||||
rows_counter: true,
|
||||
rows_counter_text: 'Books: ',
|
||||
alternate_rows: true,
|
||||
btn_reset: true,
|
||||
|
||||
/* filter types*/
|
||||
col_0: 'select',
|
||||
col_4: 'select',
|
||||
col_5: 'select',
|
||||
|
||||
/* custom_cell_data delegate used for filtering
|
||||
images in a column */
|
||||
custom_cell_data_cols: [0, 4],
|
||||
custom_cell_data: 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>
|