2014-09-20 10:09:23 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2014-09-24 09:10:31 +02:00
|
|
|
<title>HTML Table Filter Generator</title>
|
2014-11-23 11:31:55 +01:00
|
|
|
<link href="./filtergrid.css" rel="stylesheet" type="text/css">
|
2015-01-26 10:31:25 +01:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
var tf;
|
|
|
|
|
</script>
|
2014-09-20 10:09:23 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2015-01-26 10:31:25 +01:00
|
|
|
<p align="right">
|
2015-04-04 10:10:09 +02:00
|
|
|
<input type="button" value="Remove grid" onclick="tf.remove();" />
|
|
|
|
|
<input type="button" value="Reset grid" onclick="tf.init();" />
|
2015-01-26 10:31:25 +01:00
|
|
|
<input type="button" value="Reset paging"
|
|
|
|
|
onclick="
|
|
|
|
|
if( tf.paging ) return;
|
|
|
|
|
tf.Cpt.paging.addPaging();" >
|
2015-04-04 10:10:09 +02:00
|
|
|
<input type="button" value="Remove paging"
|
|
|
|
|
onclick="
|
|
|
|
|
if( !tf.paging ) return;
|
|
|
|
|
tf.paging = false; //behaviour is removed here
|
|
|
|
|
tf.Cpt.paging.destroy();
|
|
|
|
|
tf.filter();" >
|
2015-01-26 10:31:25 +01:00
|
|
|
</p>
|
2015-02-14 09:59:12 +01:00
|
|
|
<div style="width: 900px;">
|
|
|
|
|
<table id="demo" cellpadding="0" cellspacing="0">
|
2015-03-06 09:49:30 +01:00
|
|
|
<thead>
|
2015-02-14 09:59:12 +01:00
|
|
|
<tr>
|
|
|
|
|
<th>From</th>
|
|
|
|
|
<th>Destination</th>
|
|
|
|
|
<th>Road Distance (km)</th>
|
|
|
|
|
<th>By Air (hrs)</th>
|
|
|
|
|
<th>By Rail (hrs)</th>
|
|
|
|
|
</tr>
|
2015-03-06 09:49:30 +01:00
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
2015-02-14 09:59:12 +01:00
|
|
|
<tr>
|
|
|
|
|
<td><strong>Sydney</strong></td>
|
|
|
|
|
<td>Adelaide</td>
|
|
|
|
|
<td>1412</td>
|
|
|
|
|
<td>1.4</td>
|
|
|
|
|
<td>25.3</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><strong>Sydney</strong></td>
|
|
|
|
|
<td>Brisbane</td>
|
|
|
|
|
<td>982</td>
|
|
|
|
|
<td>1.5</td>
|
|
|
|
|
<td>16</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><strong>Sydney</strong></td>
|
|
|
|
|
<td>Canberra</td>
|
|
|
|
|
<td>286</td>
|
|
|
|
|
<td>.6</td>
|
|
|
|
|
<td>4.3</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><strong>Sydney</strong></td>
|
|
|
|
|
<td>Melbourne</td>
|
|
|
|
|
<td>872</td>
|
|
|
|
|
<td>1.1</td>
|
|
|
|
|
<td>10.5</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><strong>Adelaide</strong></td>
|
|
|
|
|
<td>Perth</td>
|
|
|
|
|
<td>2781</td>
|
|
|
|
|
<td>3.1</td>
|
|
|
|
|
<td>38</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><strong>Adelaide</strong></td>
|
|
|
|
|
<td>Alice Springs</td>
|
|
|
|
|
<td>1533</td>
|
|
|
|
|
<td>2</td>
|
|
|
|
|
<td>20.25</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><strong>Adelaide</strong></td>
|
|
|
|
|
<td>Brisbane</td>
|
|
|
|
|
<td>2045</td>
|
|
|
|
|
<td>2.15</td>
|
|
|
|
|
<td>40</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
2014-09-20 10:09:23 +02:00
|
|
|
|
2015-02-22 12:46:05 +01:00
|
|
|
<script src="../libs/requirejs/require.js"></script>
|
2014-09-20 10:09:23 +02:00
|
|
|
<script>
|
2015-03-06 09:49:30 +01:00
|
|
|
requirejs(['tablefilter'], function(TableFilter){
|
2014-11-01 15:34:37 +01:00
|
|
|
// Your logic here
|
2015-02-28 10:27:28 +01:00
|
|
|
tf = new TableFilter("demo", {
|
2014-11-01 15:34:37 +01:00
|
|
|
col_0: 'select',
|
2015-02-15 04:25:22 +01:00
|
|
|
col_2: 'multiple',
|
2014-11-01 15:34:37 +01:00
|
|
|
col_3: 'checklist',
|
|
|
|
|
base_path: './',
|
2014-11-22 15:01:29 +01:00
|
|
|
loader: false,
|
2014-11-16 01:29:07 +01:00
|
|
|
rows_counter: true,
|
2014-11-01 15:34:37 +01:00
|
|
|
enable_default_theme: true,
|
2015-02-15 04:25:22 +01:00
|
|
|
// slc_filling_method: 'innerhtml',
|
2015-03-01 11:44:39 +01:00
|
|
|
sort: true,
|
2015-03-06 09:49:30 +01:00
|
|
|
sort_config: {
|
|
|
|
|
sort_types: ['string','string','number','number','number']
|
|
|
|
|
},
|
|
|
|
|
paging: true,
|
2015-02-20 14:46:57 +01:00
|
|
|
paging_length: 4,
|
2015-01-26 10:31:25 +01:00
|
|
|
// page_selector_type: 'input',
|
2015-03-06 09:49:30 +01:00
|
|
|
//results_per_page: ['Results per page', [2,4,6]],
|
2015-02-01 09:26:48 +01:00
|
|
|
remember_grid_values: true,
|
2014-12-13 10:04:25 +01:00
|
|
|
// remember_page_number: true,
|
|
|
|
|
// remember_page_length: true,
|
2015-02-15 04:25:22 +01:00
|
|
|
fill_slc_on_demand: false,
|
2015-02-21 04:39:09 +01:00
|
|
|
linked_filters: false,
|
2015-02-20 05:03:57 +01:00
|
|
|
popup_filters: false,
|
2014-11-01 15:34:37 +01:00
|
|
|
alternate_rows: true,
|
|
|
|
|
highlight_keywords: true,
|
|
|
|
|
match_case: false,
|
2015-02-20 14:46:57 +01:00
|
|
|
btn_reset: true,
|
|
|
|
|
status_bar: true,
|
2015-02-21 04:39:09 +01:00
|
|
|
watermark: [null, 'Filter column...', null, null, 'Helo'],
|
|
|
|
|
grid_layout: false,
|
2014-11-30 11:38:40 +01:00
|
|
|
// grid_width: '500px',
|
2015-02-20 14:46:57 +01:00
|
|
|
// grid_height: '200px',
|
|
|
|
|
on_before_show_msg: function(tf){
|
2015-02-21 04:39:09 +01:00
|
|
|
// console.log('on_before_show_msg');
|
2015-02-20 14:46:57 +01:00
|
|
|
}
|
2014-11-01 15:34:37 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
tf.init();
|
|
|
|
|
});
|
2014-09-20 10:09:23 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
