1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-01 06:12:59 +02:00

Update filter-images.html

This commit is contained in:
koalyptus 2018-11-02 13:23:35 +11:00 committed by GitHub
parent 1bb10d94e2
commit 1755b6581d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -2,847 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Filter and sort column with images | TableFilter</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Bootstrap theme -->
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/theme.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<meta http-equiv="refresh" content="0;URL='https://www.tablefilter.com/filter-images.html'">
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./">TableFilter</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- you can exclude pages using {{#isnt}} helper: {{#isnt data.title 'Blog'}} -->
<li>
<a href="examples.html">Examples</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Github <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="https://github.com/koalyptus/TableFilter">Repo</a>
</li>
<li>
<a href="https://github.com/koalyptus/TableFilter/wiki">Wiki</a>
</li>
</ul>
</li>
<li>
<a href="./docs" target="_blank">Docs</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container theme-showcase" role="main">
<h1>Filter and sort column with images</h1>
<p>
This demo shows how to filter and sort a column containing images by using
the <code>cell_parser</code> delegate and by defining the
<code>data-tf-sortKey</code> custom DOM attribute.
</p>
<div class="alert alert-info" role="alert">
<code>TableFilter</code> automatically detects the presence of the
<code>data-tf-sortKey</code> attibute in a cell. If the <code>sort</code>
extension is enabled the sort mechanism will sort that column based on the
value specified in the <code>data-tf-sortKey</code> attibute.
</div>
<div data-config>
<table id="demo">
<thead>
<tr>
<th colspan="3">Book</th>
<th>Price</th>
<th colspan="2">Delivery Items</th>
<th>&nbsp;</th>
</tr>
<tr>
<th width="50">&nbsp;</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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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>
</div>
<script src="tablefilter/tablefilter.js"></script>
<script data-config>
var tfConfig = {
base_path: './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 delegate used 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>
<hr>
<ul class="nav nav-pills">
<li class="active">
<a data-toggle="tab" href="#js">JS</a>
</li>
<li>
<a data-toggle="tab" href="#html">HTML</a>
</li>
<li>
<a data-toggle="tab" href="#css">CSS</a>
</li>
</ul>
<div class="tab-content">
<div id="js" class="tab-pane fade in active">
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
<pre class="js">
<code class="javascript"></code>
</pre>
<script src="assets/js/js-code-in-pre.js"></script>
<!-- -->
</div>
<div id="html" class="tab-pane fade">
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
<pre class="html">
<code class="xml"></code>
</pre>
<script src="assets/js/html-code-in-pre.js"></script>
<!-- -->
</div>
<div id="css" class="tab-pane fade">
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
<pre class="css">
<code class="css"></code>
</pre>
<script src="assets/js/css-code-in-pre.js"></script>
<!-- -->
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-bottom">
<div class="container">
<ul class="nav navbar-nav">
<li>
<a href="https://github.com/koalyptus/TableFilter">Repo</a>
</li>
<li>
<a href="https://github.com/koalyptus/TableFilter/wiki">Wiki</a>
</li>
<li>
<a href="./docs" target="_blank">Docs</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="maxgug@hotmail.com">
<input type="hidden" name="lc" value="BM">
<input type="hidden" name="item_name" value="TableFilter">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHosted">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
</p>
</li>
<li>
<a href="https://flattr.com/submit/auto?user_id=koalyptus&
url=https%3A%2F%2Fgithub.com%2Fkoalyptus%2FTablefilter">
<img src="https://api.flattr.com/button/flattr-badge-large.png"
alt="TableFilter - A Javascript library making HTML tables filterable
and a bit more" />
</a>
</li>
</ul>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/github-fork-me.js"></script>
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
<link rel="stylesheet" href="assets/js/highlight/styles/monokai-sublime.css">
<script src="assets/js/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- -->
<script type="text/javascript"
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=maxgug"
async="async"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68429903-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>