mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-19 06:47:00 +02:00
499 lines
14 KiB
HTML
499 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>TableFilter v0.0.0 - Data types 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, "Segoe UI Emoji", "Segoe UI Symbol"
|
||
|
|
}
|
||
|
|
pre{
|
||
|
|
margin: auto 1em 1em 1em;
|
||
|
|
padding: 0 1em 0 0;
|
||
|
|
float: right;
|
||
|
|
line-height: 1.45;
|
||
|
|
background-color: #F7F7F7;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>TableFilter v0.0.0</h1>
|
||
|
|
<h2>Data types demo</h2>
|
||
|
|
|
||
|
|
<p>In this example, 3 date types are used and numeric data for currency columns
|
||
|
|
is formated differently: </p>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>"." thousands separator and "," decimal separator for €</li>
|
||
|
|
<li>"," thousands separator and "." decimal separator for US$</li>
|
||
|
|
</ul>
|
||
|
|
<p>
|
||
|
|
Use <code>col_number_format</code> property to set numeric formats
|
||
|
|
('EU', 'US' or 'IPADDRESS') for columns and <code>col_date_type</code> to
|
||
|
|
set date types.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<pre></pre>
|
||
|
|
|
||
|
|
|
||
|
|
<table id="demo-tot">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Email</th>
|
||
|
|
<th>Id</th>
|
||
|
|
<th>Phone</th>
|
||
|
|
<th>€</th>
|
||
|
|
<th>US $</th>
|
||
|
|
<th>Url</th>
|
||
|
|
<th>EU Date</th>
|
||
|
|
<th>US Date</th>
|
||
|
|
<th>DD-MMM-YYYY Date</th>
|
||
|
|
<th>IP</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tfoot>
|
||
|
|
<tr>
|
||
|
|
<td>Tot</td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
<td id="sum1" align="right"></td>
|
||
|
|
<td id="sum2" align="right"></td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
<td></td>
|
||
|
|
</tr>
|
||
|
|
</tfoot>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>devo@flexomat.com</td>
|
||
|
|
<td>66672</td>
|
||
|
|
<td>941-964-8535</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2.482,79</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2,482.79</div>
|
||
|
|
</td>
|
||
|
|
<td>http://gmail.com</td>
|
||
|
|
<td>14/12/1988</td>
|
||
|
|
<td>12/14/1988</td>
|
||
|
|
<td>14-Dec-1988</td>
|
||
|
|
<td>186.114.137.213</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>henry@mountdev.net</td>
|
||
|
|
<td>35889</td>
|
||
|
|
<td>941-964-9543</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2.776,09</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2,776.09</div>
|
||
|
|
</td>
|
||
|
|
<td>http://www.gmail.com</td>
|
||
|
|
<td>19/1/1984</td>
|
||
|
|
<td>1/19/1984</td>
|
||
|
|
<td>19-Jan-1984</td>
|
||
|
|
<td>170.138.54.12</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>christian@reno.gov</td>
|
||
|
|
<td>60021</td>
|
||
|
|
<td>941-964-5617</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2.743,41</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2,743.41</div>
|
||
|
|
</td>
|
||
|
|
<td>http://www.dotnet.ca</td>
|
||
|
|
<td>25/3/2000</td>
|
||
|
|
<td>3/25/2000</td>
|
||
|
|
<td>25-Mar-2000</td>
|
||
|
|
<td>219.115.156.141</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>muffins@donuts.com</td>
|
||
|
|
<td>17927</td>
|
||
|
|
<td>941-964-9511</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2.998,18</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2,998.18</div>
|
||
|
|
</td>
|
||
|
|
<td>http://google.se</td>
|
||
|
|
<td>24/1/1993</td>
|
||
|
|
<td>1/24/1993</td>
|
||
|
|
<td>24-Jan-1993</td>
|
||
|
|
<td>252.253.244.189</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>muffins@reno.gov</td>
|
||
|
|
<td>76375</td>
|
||
|
|
<td>941-964-2757</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1.836,09</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1,836.09</div>
|
||
|
|
</td>
|
||
|
|
<td>http://www.samba.org</td>
|
||
|
|
<td>4/4/1988</td>
|
||
|
|
<td>4/4/1988</td>
|
||
|
|
<td>4-Apr-1988</td>
|
||
|
|
<td>88.233.9.89</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>mendez@gmail.com</td>
|
||
|
|
<td>45834</td>
|
||
|
|
<td>941-964-2575</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2.805,46</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2,805.46</div>
|
||
|
|
</td>
|
||
|
|
<td>http://flexomat.com</td>
|
||
|
|
<td>12/12/1985</td>
|
||
|
|
<td>12/12/1985</td>
|
||
|
|
<td>12-Dec-1985</td>
|
||
|
|
<td>88.233.9.89</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>dev@gmail.com</td>
|
||
|
|
<td>20022</td>
|
||
|
|
<td>941-964-4967</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">3.296,54</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">3,296.54</div>
|
||
|
|
</td>
|
||
|
|
<td>http://www.flexomat.com</td>
|
||
|
|
<td>3/7/2002</td>
|
||
|
|
<td>7/3/2002</td>
|
||
|
|
<td>3-Jul-2002</td>
|
||
|
|
<td>219.115.156.145</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>foo@polyester.se</td>
|
||
|
|
<td>55987</td>
|
||
|
|
<td>941-964-745</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2.953,73</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">2,953.73</div>
|
||
|
|
</td>
|
||
|
|
<td>http://www.donuts.com</td>
|
||
|
|
<td>4/8/1987</td>
|
||
|
|
<td>8/4/1987</td>
|
||
|
|
<td>4-Aug-1987</td>
|
||
|
|
<td>88.233.9.87</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>adam@aftonbladet.se</td>
|
||
|
|
<td>38867</td>
|
||
|
|
<td>941-964-6302</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1.949,27</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1,949.27</div>
|
||
|
|
</td>
|
||
|
|
<td>http://flexomat.com</td>
|
||
|
|
<td>27/7/1995</td>
|
||
|
|
<td>7/27/1995</td>
|
||
|
|
<td>27-Jul-1995</td>
|
||
|
|
<td>170.138.54.16</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>devo@donuts.com</td>
|
||
|
|
<td>51426</td>
|
||
|
|
<td>941-964-1234</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1.067,00</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1,067.00</div>
|
||
|
|
</td>
|
||
|
|
<td>http://www.polyester.se</td>
|
||
|
|
<td>5/1/1986</td>
|
||
|
|
<td>1/5/1986</td>
|
||
|
|
<td>5-Jan-1986</td>
|
||
|
|
<td>252.253.244.186</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>henry@samba.org</td>
|
||
|
|
<td>40859</td>
|
||
|
|
<td>941-964-4856</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">3.401,19</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">3,401.19</div>
|
||
|
|
</td>
|
||
|
|
<td>http://www.flexomat.com</td>
|
||
|
|
<td>7/3/1990</td>
|
||
|
|
<td>3/7/1990</td>
|
||
|
|
<td>7-Mar-1990</td>
|
||
|
|
<td>88.233.9.85</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>found@dotnet.ca</td>
|
||
|
|
<td>23986</td>
|
||
|
|
<td>941-964-2686</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1.393,52</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1,393.52</div>
|
||
|
|
</td>
|
||
|
|
<td>http://lostnfound.org</td>
|
||
|
|
<td>22/7/1993</td>
|
||
|
|
<td>7/22/1993</td>
|
||
|
|
<td>22-Jul-1993</td>
|
||
|
|
<td>113.231.1.44</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>carl@fish.org</td>
|
||
|
|
<td>73392</td>
|
||
|
|
<td>941-964-5792</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">3.876,04</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">3,876.04</div>
|
||
|
|
</td>
|
||
|
|
<td>http://www.google.se</td>
|
||
|
|
<td>14/7/1984</td>
|
||
|
|
<td>7/14/1984</td>
|
||
|
|
<td>14-Jul-1984</td>
|
||
|
|
<td>219.115.156.137</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>found@mountdev.net</td>
|
||
|
|
<td>03519</td>
|
||
|
|
<td>941-964-1599</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1.176,48</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1,176.48</div>
|
||
|
|
</td>
|
||
|
|
<td>http://donuts.com</td>
|
||
|
|
<td>6/8/2000</td>
|
||
|
|
<td>8/6/2000</td>
|
||
|
|
<td>6-Aug-2000</td>
|
||
|
|
<td>88.233.9.86</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>lost@fish.org</td>
|
||
|
|
<td>36628</td>
|
||
|
|
<td>941-964-5985</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">822,23</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">822.23</div>
|
||
|
|
</td>
|
||
|
|
<td>http://www.gmail.com</td>
|
||
|
|
<td>14/7/1994</td>
|
||
|
|
<td>7/14/1994</td>
|
||
|
|
<td>14-Jul-1994</td>
|
||
|
|
<td>252.253.244.184</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>mendez@dotnet.ca</td>
|
||
|
|
<td>90442</td>
|
||
|
|
<td>941-964-1649</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1.985,72</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1,975.72</div>
|
||
|
|
</td>
|
||
|
|
<td>http://reno.gov</td>
|
||
|
|
<td>20/10/1997</td>
|
||
|
|
<td>10/20/1997</td>
|
||
|
|
<td>20-Oct-1997</td>
|
||
|
|
<td>113.231.1.79</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>carl@donuts.com</td>
|
||
|
|
<td>00412</td>
|
||
|
|
<td>941-964-6432</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1.834,77</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1,834.77</div>
|
||
|
|
</td>
|
||
|
|
<td>http://gmail.com</td>
|
||
|
|
<td>23/8/1997</td>
|
||
|
|
<td>8/23/1997</td>
|
||
|
|
<td>23-Aug-1997</td>
|
||
|
|
<td>170.138.54.19</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>foo@fish.org</td>
|
||
|
|
<td>80653</td>
|
||
|
|
<td>941-964-1022</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">260,26</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">260.26</div>
|
||
|
|
</td>
|
||
|
|
<td>http://samba.org</td>
|
||
|
|
<td>24/11/1991</td>
|
||
|
|
<td>11/24/1991</td>
|
||
|
|
<td>24-Nov-1991</td>
|
||
|
|
<td>88.233.9.89</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>found@fish.org</td>
|
||
|
|
<td>54635</td>
|
||
|
|
<td>941-964-6439</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1.442,80</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">1,442.80</div>
|
||
|
|
</td>
|
||
|
|
<td>http://dotnet.ca</td>
|
||
|
|
<td>12/7/1987</td>
|
||
|
|
<td>7/12/1987</td>
|
||
|
|
<td>12-Jul-1987</td>
|
||
|
|
<td>88.233.9.90</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>found@flexomat.com</td>
|
||
|
|
<td>20953</td>
|
||
|
|
<td>941-964-5544</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">575,42</div>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div align="right">575.42</div>
|
||
|
|
</td>
|
||
|
|
<td>http://gmail.com</td>
|
||
|
|
<td>10/6/1988</td>
|
||
|
|
<td>6/10/1988</td>
|
||
|
|
<td>10-Jun-1988</td>
|
||
|
|
<td>88.233.19.89</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<script src="../dist/tablefilter/tablefilter.js"></script>
|
||
|
|
<script data-config>
|
||
|
|
var id = function (id){
|
||
|
|
return document.getElementById(id);
|
||
|
|
};
|
||
|
|
var table = id('demo-tot');
|
||
|
|
var totRowIndex = table.getElementsByTagName('tr').length;
|
||
|
|
|
||
|
|
var filtersConfig = {
|
||
|
|
base_path: '../dist/tablefilter/',
|
||
|
|
filters_row_index: 1,
|
||
|
|
alternate_rows: true,
|
||
|
|
rows_counter: true,
|
||
|
|
btn_reset: true,
|
||
|
|
loader: true,
|
||
|
|
status_bar: true,
|
||
|
|
col_number_format: [
|
||
|
|
null, null, null,
|
||
|
|
'EU', 'US', null,
|
||
|
|
null, null, null,
|
||
|
|
'IpAddress'
|
||
|
|
],
|
||
|
|
col_date_type: [
|
||
|
|
null, null, null,
|
||
|
|
null, null, null,
|
||
|
|
'dmy', 'mdy', 'ddmmmyyyy',
|
||
|
|
null
|
||
|
|
],
|
||
|
|
rows_always_visible: [totRowIndex],
|
||
|
|
on_filters_loaded: function(o){
|
||
|
|
o.setFilterValue(3, '>1.000');
|
||
|
|
o.setFilterValue(4, '<2,500');
|
||
|
|
o.setFilterValue(6, '>23-01-95');
|
||
|
|
o.filter();
|
||
|
|
},
|
||
|
|
extensions:[
|
||
|
|
{
|
||
|
|
name: 'sort',
|
||
|
|
types: [
|
||
|
|
'number', 'string', 'string',
|
||
|
|
'US', 'none', 'string'
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
name: 'colOps',
|
||
|
|
id: ["sum1", "sum2"],
|
||
|
|
col: [3, 4],
|
||
|
|
operation: ["sum", "sum"],
|
||
|
|
write_method: ["innerhtml", 'innerhtml'],
|
||
|
|
exclude_row: [totRowIndex],
|
||
|
|
decimal_precision: [2, 2],
|
||
|
|
tot_row_index: [totRowIndex],
|
||
|
|
on_after_operation: formatTotals
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
var tf = new TableFilter('demo-tot', filtersConfig);
|
||
|
|
tf.init();
|
||
|
|
|
||
|
|
function addCommas(nStr){
|
||
|
|
nStr += '';
|
||
|
|
var x = nStr.split('.');
|
||
|
|
var x1 = x[0];
|
||
|
|
var x2 = x.length > 1 ? '.' + x[1] : '';
|
||
|
|
var rgx = /(\d+)(\d{3})/;
|
||
|
|
while (rgx.test(x1)) {
|
||
|
|
x1 = x1.replace(rgx, '$1' + ',' + '$2');
|
||
|
|
}
|
||
|
|
return x1 + x2;
|
||
|
|
}
|
||
|
|
|
||
|
|
function addDots(nStr){
|
||
|
|
nStr += '';
|
||
|
|
var x = nStr.split('.');
|
||
|
|
var x1 = x[0];
|
||
|
|
var x2 = x.length > 1 ? ',' + x[1] : '';
|
||
|
|
var rgx = /(\d+)(\d{3})/;
|
||
|
|
while (rgx.test(x1)) {
|
||
|
|
x1 = x1.replace(rgx, '$1' + '.' + '$2');
|
||
|
|
}
|
||
|
|
return x1 + x2;
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatTotals(){
|
||
|
|
var tot1 = id('sum1').innerHTML;
|
||
|
|
tot1 = addDots(tot1);
|
||
|
|
id('sum1').innerHTML = tot1;
|
||
|
|
|
||
|
|
var tot2 = id('sum2').innerHTML;
|
||
|
|
tot2 = addCommas(tot2);
|
||
|
|
id('sum2').innerHTML = tot2;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
var config = document.querySelectorAll('script[data-config]')[0];
|
||
|
|
var pre = document.body.getElementsByTagName('pre')[0];
|
||
|
|
if(pre && config){
|
||
|
|
pre.innerHTML = config.innerHTML
|
||
|
|
.replace('<', '<').replace('>', '>');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|