mirror of
https://github.com/koalyptus/TableFilter.git
synced 2024-05-03 23:23:17 +02:00
Added more examples
This commit is contained in:
Max Guglielmi
parent
9d7ae6ec50
commit
132214c026
|
|
@ -3,11 +3,9 @@ TableFilter
|
|||
|
||||
Filter HTML tables data easily
|
||||
|
||||
This script adds to any html table a "filter by column" feature that enables
|
||||
users to filter and limit the data displayed within a long table. The script
|
||||
automatically adds a filter grid bar at the top of the desired table.
|
||||
|
||||
TableFilter is a modernised version of the ``HTML Table Filter generator`` plugin.
|
||||
This script adds to any html table a "filter by column" feature that enables
|
||||
users to filter and limit the data displayed within a long table. By default, the script automatically adds a filter grid bar at the top of the desired table.
|
||||
|
||||
##Features
|
||||
* Convert a regular HTML table into an advanced grid component providing:
|
||||
|
|
|
|||
8
dist/tablefilter/1-671c99050af173051c24.js
vendored
8
dist/tablefilter/1-671c99050af173051c24.js
vendored
File diff suppressed because one or more lines are too long
2240
dist/tablefilter/1-d59e614953f2afdbdeca.js
vendored
Normal file
2240
dist/tablefilter/1-d59e614953f2afdbdeca.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7259
dist/tablefilter/tablefilter.js
vendored
7259
dist/tablefilter/tablefilter.js
vendored
File diff suppressed because one or more lines are too long
13018
examples/auto-filter.html
Normal file
13018
examples/auto-filter.html
Normal file
File diff suppressed because it is too large
Load diff
498
examples/data-types.html
Normal file
498
examples/data-types.html
Normal file
|
|
@ -0,0 +1,498 @@
|
|||
<!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>
|
||||
|
|
@ -13000,7 +13000,6 @@
|
|||
'US', 'US', 'US',
|
||||
'US', 'US', 'US'
|
||||
],
|
||||
display_all_text: "Clear",
|
||||
custom_options: {
|
||||
cols:[3],
|
||||
texts: [
|
||||
|
|
|
|||
|
|
@ -12992,7 +12992,6 @@
|
|||
status_bar: true,
|
||||
col_1: 'select',
|
||||
col_2: 'select',
|
||||
display_all_text: 'Clear',
|
||||
col_widths: [
|
||||
"150px", "70px", "70px",
|
||||
"120px", "120px", "100px",
|
||||
|
|
|
|||
2615
examples/linked-filters.html
Normal file
2615
examples/linked-filters.html
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -13016,7 +13016,6 @@
|
|||
col_0: 'select',
|
||||
col_1: 'select',
|
||||
col_2: 'select',
|
||||
display_all_text: 'Clear',
|
||||
extensions:[{
|
||||
name: 'sort',
|
||||
types: [
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
/*====================================================
|
||||
- HTML Table Filter Generator
|
||||
- Filters Row Visibility Manager Extension v1.1
|
||||
- do not hesitate to edit classes below to
|
||||
change extension appearance
|
||||
=====================================================*/
|
||||
|
||||
/* container */
|
||||
span.expClpFlt{ }
|
||||
|
||||
/* icon */
|
||||
span.expClpFlt img{
|
||||
vertical-align:middle;
|
||||
border:1px solid #ccc;
|
||||
padding:1px 1px 1px 1px;
|
||||
margin:1px 1px 1px 1px;
|
||||
background:#f4f4f4;
|
||||
}
|
||||
span.expClpFlt img:hover{ background:#fff; border:1px solid #666; }
|
||||
|
||||
/* button */
|
||||
.btnExpClpFlt{ margin:0 5px 0 5px; }
|
||||
|
|
@ -1,190 +0,0 @@
|
|||
/*------------------------------------------------------------------------
|
||||
- HTML Table Filter Generator
|
||||
- Filters Row Visibility Manager Extension v1.1
|
||||
- By Max Guglielmi (tablefilter.free.fr)
|
||||
- Licensed under the MIT License
|
||||
--------------------------------------------------------------------------
|
||||
Copyright (c) 2009 Max Guglielmi
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included
|
||||
in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
------------------------------------------------------------------------*/
|
||||
|
||||
TF.prototype.SetFiltersRowVisibility = function(extName)
|
||||
{
|
||||
var o = this, f = o.fObj, ext = (extName) ? o.Ext.list[extName] : o.Ext.list['FiltersRowVisibility'];
|
||||
o.filtersRowVis = (f!=undefined && f.filters_row_visibility==undefined) ? true : f.filters_row_visibility;
|
||||
if(!o.filtersRowVis) return;
|
||||
if(o.filtersRowVisEl!=null) return;
|
||||
|
||||
//Extension info
|
||||
o.filtersRowVisExtLoaded = false;
|
||||
o.filtersRowVisExtName = ext.name;
|
||||
o.filtersRowVisDesc = ext.description;
|
||||
|
||||
//Paths, filenames
|
||||
o.filtersRowVisExtPath = (ext.path == undefined)
|
||||
? 'TFExt_FiltersRowVisibility/' : ext.path;
|
||||
o.filtersRowVisStylesheet = 'TFExt_FiltersRowVisibility.css';
|
||||
o.icnExpand = 'icn_exp.png'; //expand icon
|
||||
o.icnCollapse = 'icn_clp.png'; //collapse icon
|
||||
|
||||
//Elements, inner code, texts
|
||||
o.filtersRowVisEl = null; //expand/collapse filters span element
|
||||
o.btnFiltersRowVisEl = null; //expand/collapse filters btn element
|
||||
o.icnExpandFiltersHtml = '<img src="'+o.filtersRowVisExtPath+o.icnExpand+'" alt="Expand filters" >';
|
||||
o.icnCollapseFiltersHtml = '<img src="'+o.filtersRowVisExtPath+o.icnCollapse+'" alt="Collapse filters" >';
|
||||
o.filtersRowVisDefaultText = 'Expand/Collapse Filters';
|
||||
|
||||
//id of container element
|
||||
o.filtersRowVisTgtId = f!=undefined && f.filters_row_visibility_target_id!=undefined
|
||||
? f.filters_row_visibility_target_id : null;
|
||||
//enables/disables expand/collapse icon
|
||||
o.filtersRowVisIcon = f!=undefined && f.filters_row_visibility_icon!=undefined
|
||||
? f.filters_row_visibility_icon : true;
|
||||
//defines expand/collapse filters text
|
||||
o.btnFiltersRowVisText = f!=undefined && f.btn_filters_row_visibility_text!=undefined
|
||||
? (o.filtersRowVisIcon ? o.icnCollapseFiltersHtml + f.btn_filters_row_visibility_text :
|
||||
f.btn_filters_row_visibility_text) :
|
||||
(o.filtersRowVisIcon ? o.icnCollapseFiltersHtml : o.filtersRowVisDefaultText);
|
||||
o.btnFiltersRowVisExpText = f!=undefined && f.btn_filters_row_visibility_text!=undefined
|
||||
? (o.filtersRowVisIcon ? o.icnExpandFiltersHtml + f.btn_filters_row_visibility_text :
|
||||
f.btn_filters_row_visibility_text) :
|
||||
(o.filtersRowVisIcon) ? o.icnExpandFiltersHtml : o.filtersRowVisDefaultText;
|
||||
|
||||
//defines expand/collapse filters button innerHtml
|
||||
o.btnFiltersRowVisHtml = f!=undefined && f.btn_filters_row_visibility_html!=undefined
|
||||
? f.btn_filters_row_visibility_html : null;
|
||||
//defines css class for expand/collapse filters button
|
||||
o.btnFiltersRowVisClass = f!=undefined && f.btn_filters_row_visibility_css_class!=undefined
|
||||
? f.btn_filters_row_visibility_css_class :'btnExpClpFlt';
|
||||
//defines css class span containing expand/collapse filters
|
||||
o.filtersRowVisClass = f!=undefined && f.filters_row_visibility_css_class!=undefined
|
||||
? f.filters_row_visibility_css_class : 'expClpFlt';
|
||||
//only if external headers
|
||||
o.filtersRowVisFiltersTbl = f!=undefined && f.filters_row_visibility_filters_table!=undefined
|
||||
? tf_Id(f.filters_row_visibility_filters_table) : null;
|
||||
//only if external headers
|
||||
o.filtersRowVisFiltersIndex = f!=undefined && f.filters_row_visibility_filters_index!=undefined
|
||||
? f.filters_row_visibility_filters_index : 1;
|
||||
|
||||
o.filtersRowVisAtStart = f!=undefined && f.filters_row_visibility_at_start!=undefined
|
||||
? f.filters_row_visibility_at_start : true;
|
||||
|
||||
//prefixes
|
||||
o.prfxFiltersRowVisSpan = 'fltsVis_'; //span containing expand/collapse filters button
|
||||
|
||||
/*** Extension events ***/
|
||||
//calls function before filters row is shown
|
||||
o.onBeforeShowFilters = f!=undefined && tf_isFn(f.on_before_filters_row_is_displayed)
|
||||
? f.on_before_filters_row_is_displayed : null;
|
||||
//calls function after filters row is shown
|
||||
o.onAfterShowFilters = f!=undefined && tf_isFn(f.on_after_filters_row_is_displayed)
|
||||
? f.on_after_filters_row_is_displayed : null;
|
||||
//calls function before filters row is hidden
|
||||
o.onBeforeHideFilters = f!=undefined && tf_isFn(f.on_before_filters_row_is_hidden)
|
||||
? f.on_before_filters_row_is_hidden : null;
|
||||
//calls function after filters row is hidden
|
||||
o.onAfterHideFilters = f!=undefined && tf_isFn(f.on_after_filters_row_is_hidden)
|
||||
? f.on_after_filters_row_is_hidden : null;
|
||||
/*** ***/
|
||||
|
||||
//Extension event definition
|
||||
o.Evt.name.filtersrowvisibility = 'DisplayFiltersRow'; //event name for TF event manager
|
||||
o.msgDisplayFiltersRow = 'Show/Hide filters row'; //event status message
|
||||
o.Evt._DisplayFiltersRow = function(){ o.DisplayFiltersRow(); }; //event
|
||||
|
||||
//Loads extension stylesheet
|
||||
o.IncludeFile(ext.name+'Style', o.filtersRowVisExtPath + o.filtersRowVisStylesheet, null, 'link');
|
||||
|
||||
//Sets button
|
||||
o.SetFiltersRowVisBtn();
|
||||
|
||||
o.filtersRowVisExtLoaded = true;
|
||||
|
||||
}
|
||||
|
||||
TF.prototype.SetFiltersRowVisBtn = function()
|
||||
{
|
||||
if(!this.hasGrid && !this.isFirstLoad) return;
|
||||
if( this.filtersRowVisEl!=null ) return;
|
||||
var span = tf_CreateElm('span',['id',this.prfxFiltersRowVisSpan+this.id]);
|
||||
span.className = this.filtersRowVisClass;
|
||||
|
||||
//Container element (rdiv or custom element)
|
||||
if(this.filtersRowVisTgtId==null) this.SetTopDiv();
|
||||
var targetEl = ( this.filtersRowVisTgtId==null ) ? this.rDiv : tf_Id( this.filtersRowVisTgtId );
|
||||
|
||||
if(this.filtersRowVisTgtId==null)
|
||||
targetEl.firstChild.parentNode.insertBefore(span,targetEl.firstChild);
|
||||
else
|
||||
targetEl.appendChild(span);
|
||||
|
||||
if(this.btnFiltersRowVisHtml==null)
|
||||
{ //Default link
|
||||
var btn = tf_CreateElm( 'a', ['href','javascript:;'] );
|
||||
btn.className = this.btnFiltersRowVisClass;
|
||||
btn.title = this.filtersRowVisDesc;
|
||||
btn.innerHTML = this.btnFiltersRowVisText;
|
||||
span.appendChild(btn);
|
||||
btn.onclick = this.Evt._DisplayFiltersRow;
|
||||
} else { //Custom html
|
||||
span.innerHTML = this.btnFiltersRowVisHtml;
|
||||
var showHideFltsEl = span.firstChild;
|
||||
showHideFltsEl.onclick = this.Evt._DisplayFiltersRow;
|
||||
}
|
||||
|
||||
this.filtersRowVisEl = span;
|
||||
this.btnFiltersRowVisEl = this.filtersRowVisEl.firstChild;
|
||||
|
||||
if(!this.filtersRowVisAtStart) this._DisplayFiltersRow(this);
|
||||
}
|
||||
|
||||
TF.prototype.DisplayFiltersRow = function()
|
||||
{
|
||||
this.EvtManager(this.Evt.name.filtersrowvisibility);
|
||||
}
|
||||
|
||||
TF.prototype._DisplayFiltersRow = function(o)
|
||||
{
|
||||
var tbl = (o.filtersRowVisFiltersTbl) ? o.filtersRowVisFiltersTbl : o.tbl;
|
||||
var fltIndex = (o.filtersRowVisFiltersTbl)
|
||||
? o.filtersRowVisFiltersIndex : o.GetFiltersRowIndex();
|
||||
var fltRow = tbl.rows[fltIndex];
|
||||
var fltRowDisplay = fltRow.style.display;
|
||||
|
||||
if(o.onBeforeShowFilters && fltRowDisplay!='') o.onBeforeShowFilters.call(null,o);
|
||||
if(o.onBeforeHideFilters && fltRowDisplay=='') o.onBeforeHideFilters.call(null,o);
|
||||
|
||||
fltRow.style.display = (fltRowDisplay=='') ? 'none' : '';
|
||||
if(o.filtersRowVisIcon && o.btnFiltersRowVisHtml==null)
|
||||
o.btnFiltersRowVisEl.innerHTML = (fltRowDisplay=='')
|
||||
? o.btnFiltersRowVisExpText : o.btnFiltersRowVisText;
|
||||
|
||||
if(o.onAfterShowFilters && fltRowDisplay!='') o.onAfterShowFilters.call(null,o);
|
||||
if(o.onAfterHideFilters && fltRowDisplay=='') o.onAfterHideFilters.call(null,o);
|
||||
}
|
||||
|
||||
TF.prototype.RemoveFiltersRowVisibility = function()
|
||||
{
|
||||
if(this.filtersRowVisEl==null) return;
|
||||
this.filtersRowVisEl.parentNode.removeChild(this.filtersRowVisEl);
|
||||
this.filtersRowVisEl = null;
|
||||
this.btnFiltersRowVisEl = null;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 441 B |
Binary file not shown.
|
Before Width: | Height: | Size: 469 B |
|
|
@ -87,6 +87,7 @@ export default {
|
|||
return new Date(1001, 0, 1);
|
||||
}
|
||||
let oDate;
|
||||
let parts;
|
||||
|
||||
switch(formatStr.toUpperCase()){
|
||||
case 'DDMMMYYYY':
|
||||
|
|
|
|||
|
|
@ -101,14 +101,14 @@ export class CheckList{
|
|||
this.isCustom = tf.isCustomOptions(colIndex);
|
||||
|
||||
var activeFlt;
|
||||
if(tf.refreshFilters && tf.activeFilterId){
|
||||
if(tf.linkedFilters && tf.activeFilterId){
|
||||
activeFlt = tf.activeFilterId.split('_')[0];
|
||||
activeFlt = activeFlt.split(tf.prfxFlt)[1];
|
||||
}
|
||||
|
||||
var excludedOpts,
|
||||
filteredDataCol = [];
|
||||
if(tf.refreshFilters && tf.disableExcludedOptions){
|
||||
if(tf.linkedFilters && tf.disableExcludedOptions){
|
||||
excludedOpts = [];
|
||||
}
|
||||
|
||||
|
|
@ -129,9 +129,9 @@ export class CheckList{
|
|||
|
||||
// this loop retrieves cell data
|
||||
for(var j=0; j<ncells; j++){
|
||||
if((colIndex===j && (!tf.refreshFilters ||
|
||||
(tf.refreshFilters && tf.disableExcludedOptions)))||
|
||||
(colIndex===j && tf.refreshFilters &&
|
||||
if((colIndex===j && (!tf.linkedFilters ||
|
||||
(tf.linkedFilters && tf.disableExcludedOptions)))||
|
||||
(colIndex===j && tf.linkedFilters &&
|
||||
((rows[k].style.display === '' && !tf.paging) ||
|
||||
(tf.paging && ((!activeFlt || activeFlt===colIndex )||
|
||||
(activeFlt!=colIndex &&
|
||||
|
|
@ -145,7 +145,7 @@ export class CheckList{
|
|||
this.opts.push(cell_data);
|
||||
}
|
||||
var filteredCol = filteredDataCol[j];
|
||||
if(tf.refreshFilters && tf.disableExcludedOptions){
|
||||
if(tf.linkedFilters && tf.disableExcludedOptions){
|
||||
if(!filteredCol){
|
||||
filteredDataCol[j] = tf.GetFilteredDataCol(j);
|
||||
}
|
||||
|
|
@ -257,7 +257,7 @@ export class CheckList{
|
|||
var li = Dom.createCheckItem(
|
||||
tf.fltIds[colIndex]+'_'+(y+chkCt), val, lbl);
|
||||
li.className = this.checkListItemCssClass;
|
||||
if(tf.refreshFilters && tf.disableExcludedOptions &&
|
||||
if(tf.linkedFilters && tf.disableExcludedOptions &&
|
||||
Arr.has(excludedOpts,
|
||||
Str.matchCase(val, tf.matchCase), tf.matchCase)){
|
||||
Dom.addClass(li, this.checkListItemDisabledCssClass);
|
||||
|
|
|
|||
|
|
@ -259,7 +259,7 @@ export class TableFilter{
|
|||
|
||||
/*** select filter's customisation and behaviours ***/
|
||||
//defines 1st option text
|
||||
this.displayAllText = f.display_all_text || '';
|
||||
this.displayAllText = f.display_all_text || 'Clear';
|
||||
//enables/disables empty option in combo-box filters
|
||||
this.enableEmptyOption = Boolean(f.enable_empty_option);
|
||||
//defines empty option text
|
||||
|
|
|
|||
2549
static/partials/countries-by-continent.html
Normal file
2549
static/partials/countries-by-continent.html
Normal file
File diff suppressed because it is too large
Load diff
353
static/partials/dummy-table-with-totals-footer.html
Normal file
353
static/partials/dummy-table-with-totals-footer.html
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
|
||||
<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>
|
||||
339
static/partials/dummy-table.html
Normal file
339
static/partials/dummy-table.html
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
|
||||
<table id="demo">
|
||||
<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>
|
||||
<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>
|
||||
41
static/templates/auto-filter.html
Normal file
41
static/templates/auto-filter.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{NAME} v{VERSION} - Auto-filter Demo</title>
|
||||
<!-- @import partials/style.html -->
|
||||
</head>
|
||||
<body>
|
||||
<h1>{NAME} v{VERSION}</h1>
|
||||
<h2>Auto-filter demo</h2>
|
||||
<p>
|
||||
This demo features the auto-filter behaviour, the table is filtered as soon
|
||||
as the user stops typing.
|
||||
</p>
|
||||
|
||||
<!-- @import partials/pre.html -->
|
||||
<!-- @import partials/countries-table.html -->
|
||||
|
||||
<!-- @import partials/tablefilter-script.html -->
|
||||
<script data-config>
|
||||
var filtersConfig = {
|
||||
base_path: '../dist/tablefilter/',
|
||||
auto_filter: true,
|
||||
auto_filter_delay: 1100, //milliseconds
|
||||
filters_row_index: 1,
|
||||
remember_grid_values: true,
|
||||
alternate_rows: true,
|
||||
rows_counter: true,
|
||||
rows_counter_text: "Displayed rows: ",
|
||||
btn_reset: true,
|
||||
btn_reset_text: "Clear",
|
||||
status_bar: true,
|
||||
msg_filter: 'Filtering...'
|
||||
};
|
||||
|
||||
var tf = new TableFilter('demo', filtersConfig);
|
||||
tf.init();
|
||||
|
||||
</script>
|
||||
<!-- @import partials/pre-inline-script.html -->
|
||||
</body>
|
||||
</html>
|
||||
123
static/templates/data-types.html
Normal file
123
static/templates/data-types.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- @import partials/pre.html -->
|
||||
<!-- @import partials/dummy-table-with-totals-footer.html -->
|
||||
|
||||
<!-- @import partials/tablefilter-script.html -->
|
||||
<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>
|
||||
<!-- @import partials/pre-inline-script.html -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -31,7 +31,6 @@
|
|||
'US', 'US', 'US',
|
||||
'US', 'US', 'US'
|
||||
],
|
||||
display_all_text: "Clear",
|
||||
custom_options: {
|
||||
cols:[3],
|
||||
texts: [
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
status_bar: true,
|
||||
col_1: 'select',
|
||||
col_2: 'select',
|
||||
display_all_text: 'Clear',
|
||||
col_widths: [
|
||||
"150px", "70px", "70px",
|
||||
"120px", "120px", "100px",
|
||||
|
|
|
|||
43
static/templates/linked-filters.html
Normal file
43
static/templates/linked-filters.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{NAME} v{VERSION} - Linked filters Demo</title>
|
||||
<!-- @import partials/style.html -->
|
||||
</head>
|
||||
<body>
|
||||
<h1>{NAME} v{VERSION}</h1>
|
||||
<h2>Linked filters demo</h2>
|
||||
<p>
|
||||
This demo features the linked filters behaviour. In this mode, the drop-down
|
||||
filters are linked, when a column is filtered only the valid values of the
|
||||
other columns are included in their respective filters.
|
||||
</p>
|
||||
|
||||
<!-- @import partials/pre.html -->
|
||||
<!-- @import partials/countries-by-continent.html -->
|
||||
|
||||
<!-- @import partials/tablefilter-script.html -->
|
||||
<script data-config>
|
||||
var filtersConfig = {
|
||||
base_path: '../dist/tablefilter/',
|
||||
linked_filters: true,
|
||||
col_1: 'multiple',
|
||||
col_2: 'checklist',
|
||||
btn_reset: true,
|
||||
display_all_text: '< Clear >',
|
||||
alternate_rows: true,
|
||||
rows_counter: true,
|
||||
enable_default_theme: true,
|
||||
extensions:[{
|
||||
name: 'sort',
|
||||
types: ['number', 'string', 'string', 'US', 'none', 'string']
|
||||
}]
|
||||
};
|
||||
|
||||
var tf = new TableFilter('demo', filtersConfig);
|
||||
tf.init();
|
||||
|
||||
</script>
|
||||
<!-- @import partials/pre-inline-script.html -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -47,7 +47,6 @@
|
|||
col_0: 'select',
|
||||
col_1: 'select',
|
||||
col_2: 'select',
|
||||
display_all_text: 'Clear',
|
||||
extensions:[{
|
||||
name: 'sort',
|
||||
types: [
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
var id = function (id){ return document.getElementById(id); };
|
||||
var table = document.getElementById('demo');
|
||||
var table = id('demo');
|
||||
var totRowIndex = table.getElementsByTagName('tr').length;
|
||||
|
||||
var tf = new TableFilter('demo', {
|
||||
|
|
|
|||
Loading…
Reference in a new issue