214 lines
7.9 KiB
HTML
214 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>HTML Table Filter Generator</title>
|
|
<link rel="stylesheet" type="text/css" href="../../dist/tablefilter/style/tablefilter.css">
|
|
</head>
|
|
<body>
|
|
<div id="test"></div>
|
|
<table id="demo" cellpadding="0" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th>From</th>
|
|
<th>Destination</th>
|
|
<th>Road Distance (km)</th>
|
|
<th>By Air (hrs)</th>
|
|
<th>By Rail (hrs)</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td>Tot:</td>
|
|
<td></td>
|
|
<td id="sum1"></td>
|
|
<td id="sum2"></td>
|
|
<td></td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<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>
|
|
<button onclick="tf.ExtRegistry.advancedGrid.destroy();">Remove ezEditTable</button>
|
|
<button onclick="tf.ExtRegistry.advancedGrid.reset();">Reset ezEditTable</button>
|
|
|
|
<button onclick="tf.destroy();">Remove</button>
|
|
<button onclick="tf.init();">Reset</button>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../../dist/tablefilter/tablefilter.js"></script>
|
|
<script>
|
|
var table = document.getElementById('demo');
|
|
var totRowIndex = table.getElementsByTagName("tr").length;
|
|
|
|
var tf = new TableFilter("demo", {
|
|
col_0: 'select',
|
|
col_2: 'checklist',
|
|
col_3: 'select',
|
|
base_path: '../../dist/tablefilter/',
|
|
// fill_slc_on_demand: true,
|
|
rows_counter: true,
|
|
// enable_default_theme: true,
|
|
// help_instructions: false,
|
|
mark_active_columns: true,
|
|
auto_filter: false,
|
|
auto_filter_delay: 200,
|
|
loader: true,
|
|
// enter_key: false,
|
|
// themes: [{ name: 'skyblue'}],
|
|
// popup_filters: true,
|
|
paging: true,
|
|
paging_length: 3,
|
|
alternate_rows: true,
|
|
highlight_keywords: true,
|
|
match_case: false,
|
|
remember_grid_values: true,
|
|
col_widths: ['150px','150px','150px','200px','150px'],
|
|
btn_reset: true,
|
|
grid_layout: false,
|
|
rows_always_visible: [totRowIndex],
|
|
custom_options: {
|
|
cols: [3],
|
|
texts: [['0-0.5', '0.5-1', '1-2', '>2']],
|
|
values: [['>0 && <=0.5', '>0.5 && <=1', '>1 && <=2', '>2']],
|
|
sorts: [false]
|
|
},
|
|
// col_operation: {
|
|
// id: ["sum1", "sum2"],
|
|
// col: [2, 3],
|
|
// operation: ["sum", "mean"],
|
|
// write_method: ["innerhtml", 'innerhtml'],
|
|
// exclude_row: [totRowIndex],
|
|
// decimal_precision: [0, 2],
|
|
// tot_row_index: [totRowIndex, totRowIndex]
|
|
// },
|
|
// selectable: true,
|
|
// editable: true,
|
|
// ezEditTable_config: {
|
|
// path: '../libs/ezEditTable/ezEditTable.js',
|
|
// default_selection: 'both',
|
|
// auto_save: false
|
|
// },
|
|
extensions: [
|
|
{
|
|
name: 'sort',
|
|
types: ['string', 'string', 'number', 'number', 'number']
|
|
},{
|
|
name: 'advancedGrid',
|
|
// vendor_path: '../../libs/ezEditTable/',
|
|
filename: 'ezEditTable_min.js',
|
|
vendor_path: 'http://edittable.free.fr/ezEditTable/',
|
|
selectable: true,
|
|
editable: true,
|
|
default_selection: 'both',
|
|
// load_stylesheet: true,
|
|
auto_save: false
|
|
},{
|
|
name: 'colOps',
|
|
id: ["sum1", "sum2"],
|
|
col: [2, 3],
|
|
operation: ["sum", "mean"],
|
|
write_method: ["innerhtml", 'innerhtml'],
|
|
exclude_row: [totRowIndex],
|
|
decimal_precision: [0, 2],
|
|
tot_row_index: [totRowIndex, totRowIndex]
|
|
},{
|
|
name: 'filtersVisibility',
|
|
// enable_icon: true,
|
|
// target_id: 'test',
|
|
visible_at_start: false
|
|
// ,
|
|
// btn_text: 'Filters',
|
|
// filters_row_index: 0
|
|
}, {
|
|
/*** Columns Visibility Manager extension load ***/
|
|
name: 'colsVisibility',
|
|
description: 'Columns visibility manager',
|
|
// manager: true,
|
|
tick_to_hide: true,
|
|
// headers_table: true,
|
|
// container_target_id: 'test_cont',
|
|
// headers_text: ['1','2','3','4','5','6'],
|
|
// btn_target_id: 'test_cont',
|
|
// btn_text: 'Hola',
|
|
// btn_html: '<button>Columns</button>',
|
|
// btn_css_class: 'test',
|
|
// btn_close_text: 'jj',
|
|
// btn_close_html: '<button>close</button>',
|
|
// btn_close_css_class: 'test',
|
|
// stylesheet: 'hola.css',
|
|
// cont_css_class: 'test',
|
|
// checklist_item_css_class: 'test',
|
|
// at_start: [0,1,2,3,4],
|
|
// enable_hover: true,
|
|
enable_tick_all: true
|
|
// ,
|
|
// tick_all_text: 'Hola',
|
|
// text: 'tutu',
|
|
// on_loaded: function(){ console.log(arguments); },
|
|
// on_before_open: function(){ console.log('on_before_open', arguments); },
|
|
// on_after_open: function(){ console.log('on_after_open',arguments); },
|
|
// on_before_close: function(){ console.log('on_before_close',arguments); },
|
|
// on_after_close: function(){ console.log('on_after_close',arguments); },
|
|
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
|
|
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
|
|
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
|
|
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
|
|
}
|
|
]
|
|
});
|
|
|
|
tf.init();
|
|
</script>
|
|
</body>
|
|
</html> |