mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-01 22:32:49 +02:00
416 lines
12 KiB
HTML
416 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>tablefilter v0.0.4 - 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.4</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>
|