2015-06-09 10:46:08 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>{NAME} v{VERSION} - Data types Demo</title>
|
|
|
|
|
<!-- @import partials/style.html -->
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>{NAME} v{VERSION}</h1>
|
|
|
|
|
<h2>Data types demo</h2>
|
|
|
|
|
|
2016-09-21 07:35:45 +02:00
|
|
|
<p>
|
|
|
|
|
This example shows how to define column types with the
|
|
|
|
|
<code>col_types</code> option and specifically numeric formats with:
|
|
|
|
|
</p>
|
2015-06-09 10:46:08 +02:00
|
|
|
<ul>
|
2016-09-21 07:35:45 +02:00
|
|
|
<li>"." thousands separator and "," decimal separator for € column</li>
|
|
|
|
|
<li>"," thousands separator and "." decimal separator for US$ column</li>
|
2015-06-09 10:46:08 +02:00
|
|
|
</ul>
|
|
|
|
|
<p>
|
2016-09-21 07:35:45 +02:00
|
|
|
along with date types with <code>locale</code> and <code>format</code> specified on
|
|
|
|
|
a column basis.
|
2015-06-09 10:46:08 +02:00
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<!-- @import partials/pre.html -->
|
|
|
|
|
<!-- @import partials/dummy-table-with-totals-footer.html -->
|
|
|
|
|
|
|
|
|
|
<!-- @import partials/tablefilter-script.html -->
|
|
|
|
|
<script data-config>
|
2015-06-13 13:23:33 +02:00
|
|
|
var id = function (id){
|
|
|
|
|
return document.getElementById(id);
|
|
|
|
|
};
|
|
|
|
|
var table = id('demo-tot');
|
|
|
|
|
var totRowIndex = table.getElementsByTagName('tr').length;
|
2015-06-09 10:46:08 +02:00
|
|
|
|
2015-06-13 13:23:33 +02:00
|
|
|
/* EXAMPLE 1
|
|
|
|
|
*********************** */
|
|
|
|
|
var tfConfig = {
|
|
|
|
|
base_path: '../dist/tablefilter/',
|
|
|
|
|
filters_row_index: 1,
|
|
|
|
|
alternate_rows: true,
|
|
|
|
|
rows_counter: true,
|
|
|
|
|
btn_reset: true,
|
|
|
|
|
loader: true,
|
|
|
|
|
status_bar: true,
|
2016-09-10 16:07:46 +02:00
|
|
|
col_types: [
|
2016-09-21 07:35:45 +02:00
|
|
|
'string',
|
|
|
|
|
'string',
|
|
|
|
|
'string',
|
|
|
|
|
{ type: 'formatted-number', decimal: ',', thousands: '.' },
|
|
|
|
|
'formatted-number', // defaults to '.' for decimal and ',' for thousands
|
|
|
|
|
'string',
|
2016-09-25 15:44:41 +02:00
|
|
|
{ type: 'date', locale: 'fr' },
|
2016-09-17 11:15:25 +02:00
|
|
|
{ type: 'date', locale: 'en', format: '{dd}-{MM}-{yyyy|yy}' },
|
2016-09-19 12:35:34 +02:00
|
|
|
{ type: 'date', locale: 'en', format: ['{dd}-{months}-{yyyy|yy}'] },
|
2016-09-10 16:07:46 +02:00
|
|
|
'ipaddress'
|
2015-06-13 13:23:33 +02:00
|
|
|
],
|
|
|
|
|
rows_always_visible: [totRowIndex],
|
2016-09-19 12:35:34 +02:00
|
|
|
on_filters_loaded: function(tf){
|
|
|
|
|
tf.setFilterValue(3, '>1.000');
|
|
|
|
|
tf.setFilterValue(4, '<2,500');
|
|
|
|
|
tf.setFilterValue(6, '>23-01-95');
|
|
|
|
|
tf.setFilterValue(8, '<2000');
|
|
|
|
|
tf.filter();
|
2015-06-13 13:23:33 +02:00
|
|
|
},
|
|
|
|
|
extensions:[
|
2016-09-17 11:15:25 +02:00
|
|
|
{ name: 'sort' },
|
2015-06-13 13:23:33 +02:00
|
|
|
{
|
|
|
|
|
name: 'colOps',
|
2015-08-09 14:36:28 +02:00
|
|
|
id: ['sum1', 'sum2'],
|
2015-06-13 13:23:33 +02:00
|
|
|
col: [3, 4],
|
2015-08-09 14:36:28 +02:00
|
|
|
operation: ['sum', 'sum'],
|
|
|
|
|
write_method: ['innerhtml', 'innerhtml'],
|
2015-06-13 13:23:33 +02:00
|
|
|
exclude_row: [totRowIndex],
|
|
|
|
|
decimal_precision: [2, 2],
|
|
|
|
|
tot_row_index: [totRowIndex],
|
2017-03-18 00:20:51 +01:00
|
|
|
format_result: [
|
|
|
|
|
{ prefix: '€ ' },
|
|
|
|
|
{ prefix: '$ ' }
|
|
|
|
|
]
|
2015-06-09 10:46:08 +02:00
|
|
|
}
|
2015-06-13 13:23:33 +02:00
|
|
|
]
|
|
|
|
|
};
|
2015-06-09 10:46:08 +02:00
|
|
|
|
2015-06-13 13:23:33 +02:00
|
|
|
var tf = new TableFilter('demo-tot', tfConfig);
|
|
|
|
|
tf.init();
|
2015-06-09 10:46:08 +02:00
|
|
|
|
2015-06-13 13:23:33 +02:00
|
|
|
</script>
|
|
|
|
|
|
2016-09-21 07:35:45 +02:00
|
|
|
<p>
|
|
|
|
|
Below an example of ISO date support ({yyyy|yy}/{MM}/{dd}).
|
|
|
|
|
Use <code>locale</code> to set a locale globally
|
|
|
|
|
(defaults to 'en').
|
|
|
|
|
</p>
|
2015-06-09 10:46:08 +02:00
|
|
|
|
2015-06-13 13:23:33 +02:00
|
|
|
<!-- @import partials/dummy-table.html -->
|
|
|
|
|
<script data-config>
|
|
|
|
|
/* EXAMPLE 2
|
|
|
|
|
*********************** */
|
|
|
|
|
var tf2Config = {
|
|
|
|
|
base_path: '../dist/tablefilter/',
|
|
|
|
|
alternate_rows: true,
|
|
|
|
|
rows_counter: true,
|
|
|
|
|
btn_reset: true,
|
|
|
|
|
loader: true,
|
|
|
|
|
status_bar: true,
|
2016-09-21 07:35:45 +02:00
|
|
|
locale: 'en-US',
|
2016-09-14 10:03:45 +02:00
|
|
|
col_types: [
|
|
|
|
|
'string', 'number', 'string',
|
|
|
|
|
'number', 'string', 'date'
|
|
|
|
|
],
|
2016-09-19 12:35:34 +02:00
|
|
|
on_filters_loaded: function(tf){
|
|
|
|
|
tf.setFilterValue(5, '>95-05-18');
|
|
|
|
|
tf.filter();
|
2015-06-13 13:23:33 +02:00
|
|
|
}
|
|
|
|
|
};
|
2016-09-25 15:44:41 +02:00
|
|
|
|
2015-06-13 13:23:33 +02:00
|
|
|
var tf2 = new TableFilter('demo', tf2Config);
|
|
|
|
|
tf2.init();
|
2015-06-09 10:46:08 +02:00
|
|
|
</script>
|
2015-06-13 13:23:33 +02:00
|
|
|
|
2015-06-09 10:46:08 +02:00
|
|
|
<!-- @import partials/pre-inline-script.html -->
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
