mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-06-04 15:03:01 +02:00
publish gh-pages (cli)
This commit is contained in:
Max Guglielmi
parent
2c3a364186
commit
1b0b047a16
13133
advanced-grid-editable.html
Normal file
13133
advanced-grid-editable.html
Normal file
File diff suppressed because it is too large
Load diff
13087
advanced-grid-selection.html
Normal file
13087
advanced-grid-selection.html
Normal file
File diff suppressed because it is too large
Load diff
BIN
assets/img_best-price.png
Normal file
BIN
assets/img_best-price.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/img_great-deal.png
Normal file
BIN
assets/img_great-deal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
assets/img_maintenance.jpg
Normal file
BIN
assets/img_maintenance.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
assets/img_new-edition.png
Normal file
BIN
assets/img_new-edition.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
assets/img_sold-out.png
Normal file
BIN
assets/img_sold-out.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
13034
auto-filter.html
Normal file
13034
auto-filter.html
Normal file
File diff suppressed because it is too large
Load diff
2694
columns-visibility.html
Normal file
2694
columns-visibility.html
Normal file
File diff suppressed because it is too large
Load diff
1039
data-types.html
Normal file
1039
data-types.html
Normal file
File diff suppressed because it is too large
Load diff
2681
external-filters-visibility-commad.html
Normal file
2681
external-filters-visibility-commad.html
Normal file
File diff suppressed because it is too large
Load diff
13115
external-filters.html
Normal file
13115
external-filters.html
Normal file
File diff suppressed because it is too large
Load diff
460
filter-images.html
Normal file
460
filter-images.html
Normal file
|
|
@ -0,0 +1,460 @@
|
|||
<!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;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
margin: auto 1em 1em 1em;
|
||||
padding: 0 1em 1em 1em;
|
||||
float: right;
|
||||
line-height: 1.45;
|
||||
background-color: #F7F7F7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.panel{
|
||||
float: left;
|
||||
background: #F7F7F7 none repeat scroll 0% 0%;
|
||||
width: 250px;
|
||||
margin-right: 2em;
|
||||
padding: 1em;
|
||||
}
|
||||
</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>
|
||||
|
||||
|
||||
<!--
|
||||
DO NOT COPY: NOT PART OF TABLEFILTER
|
||||
-->
|
||||
<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>
|
||||
2677
filters-visibility.html
Normal file
2677
filters-visibility.html
Normal file
File diff suppressed because it is too large
Load diff
13041
grid-layout.html
Normal file
13041
grid-layout.html
Normal file
File diff suppressed because it is too large
Load diff
9369
grouped-headers.html
Normal file
9369
grouped-headers.html
Normal file
File diff suppressed because it is too large
Load diff
2688
linked-filters-disabled.html
Normal file
2688
linked-filters-disabled.html
Normal file
File diff suppressed because it is too large
Load diff
2677
linked-filters.html
Normal file
2677
linked-filters.html
Normal file
File diff suppressed because it is too large
Load diff
13035
load-filters-on-demand.html
Normal file
13035
load-filters-on-demand.html
Normal file
File diff suppressed because it is too large
Load diff
13060
pagination.html
Normal file
13060
pagination.html
Normal file
File diff suppressed because it is too large
Load diff
2701
requirejs-dev.html
Normal file
2701
requirejs-dev.html
Normal file
File diff suppressed because it is too large
Load diff
2685
requirejs.html
Normal file
2685
requirejs.html
Normal file
File diff suppressed because it is too large
Load diff
415
theme-roller.html
Normal file
415
theme-roller.html
Normal file
|
|
@ -0,0 +1,415 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>TableFilter v0.0.0 - Theme Roller 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;
|
||||
padding: 0 1em;
|
||||
}
|
||||
pre{
|
||||
margin: auto 1em 1em 1em;
|
||||
padding: 0 1em 1em 1em;
|
||||
float: right;
|
||||
line-height: 1.45;
|
||||
background-color: #F7F7F7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.panel{
|
||||
float: left;
|
||||
background: #F7F7F7 none repeat scroll 0% 0%;
|
||||
width: 250px;
|
||||
margin-right: 2em;
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>TableFilter v0.0.0</h1>
|
||||
<h2>Theme roller demo</h2>
|
||||
<p>
|
||||
This demo shows how to implement a theme roller.
|
||||
</p>
|
||||
|
||||
<pre></pre>
|
||||
|
||||
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<table id="books">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Book</th>
|
||||
<th>Price</th>
|
||||
<th colspan="2">Delivery Items</th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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,
|
||||
sort: true,
|
||||
col_number_format: [
|
||||
null, null, 'US',
|
||||
null, null, null
|
||||
],
|
||||
col_date_type: [
|
||||
null, null, null,
|
||||
null, null, 'mdy'
|
||||
],
|
||||
rows_counter: true,
|
||||
rows_counter_text: 'Books: ',
|
||||
alternate_rows: true,
|
||||
btn_reset: true,
|
||||
mark_active_columns: true,
|
||||
|
||||
/* Filter types*/
|
||||
col_3: 'select',
|
||||
col_4: 'select',
|
||||
|
||||
/* delegate for filtering 'In store' column */
|
||||
custom_cell_data_cols: [3],
|
||||
custom_cell_data: 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'
|
||||
};
|
||||
|
||||
function changeTheme(name){
|
||||
var stylesheet = tf.getStylesheet('default');
|
||||
stylesheet.href = THEMES[name];
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
DO NOT COPY: NOT PART OF TABLEFILTER
|
||||
-->
|
||||
<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>
|
||||
Loading…
Reference in a new issue