2018-05-05 10:07:23 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Custom column filtering | TableFilter< / title >
<!-- Bootstrap core CSS -->
< link rel = "stylesheet" href = "assets/css/bootstrap.min.css" >
<!-- Bootstrap theme -->
< link href = "assets/css/bootstrap-theme.min.css" rel = "stylesheet" >
<!-- Custom styles for this template -->
< link href = "assets/css/theme.css" rel = "stylesheet" >
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9]>
< script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" > < / script >
< script src = "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" > < / script >
<![endif]-->
< / head >
< body >
<!-- Fixed navbar -->
< div class = "navbar navbar-inverse navbar-fixed-top" role = "navigation" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse" >
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "navbar-brand" href = "./" > TableFilter< / a >
< / div >
< div class = "navbar-collapse collapse" >
< ul class = "nav navbar-nav" >
<!-- you can exclude pages using {{#isnt}} helper: {{#isnt data.title 'Blog'}} -->
< li >
< a href = "examples.html" > Examples< / a >
< / li >
< / ul >
< ul class = "nav navbar-nav navbar-right" >
< li class = "dropdown" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Github < b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li >
< a href = "https://github.com/koalyptus/TableFilter" > Repo< / a >
< / li >
< li >
< a href = "https://github.com/koalyptus/TableFilter/wiki" > Wiki< / a >
< / li >
< / ul >
< / li >
< li >
< a href = "./docs" target = "_blank" > Docs< / a >
< / li >
< / ul >
< / div > <!-- /.nav - collapse -->
< / div >
< / div >
< div class = "container theme-showcase" role = "main" >
< h1 > Custom column filtering< / h1 >
< p >
Use the < code > cell_parser< / code > delegate to retrieve cells values with
custom logic. Filters will be populated with the value returned by the
< code > cell_parser< / code > function.
< / p >
< table id = "demo" >
< thead >
< tr >
< th > Status< / th >
< 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 > < div align = "center" > Contact< / div > < / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" checked = "checked" / >
< / div > < / td >
< 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 > < div align = "center" >
< select >
< option > NA< / option >
< option selected = "selected" > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select" >
< option > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" checked = "checked" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select2" >
< option > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select3" >
< option selected = "selected" > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select4" >
< option > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select5" >
< option > NA< / option >
< option > Tel< / option >
< option selected = "selected" > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select6" >
< option > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" checked = "checked" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select7" >
< option > NA< / option >
< option > Tel< / option >
< option selected = "selected" > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select8" >
< option > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select9" >
< option > NA< / option >
< option selected = "selected" > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" checked = "checked" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select10" >
< option > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select11" >
< option > NA< / option >
< option > Tel< / option >
< option selected = "selected" > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select12" >
< option > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" checked = "checked" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select13" >
< option > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option selected = "selected" > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select14" >
< option > NA< / option >
< option > Tel< / option >
< option selected = "selected" > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select15" >
< option > NA< / option >
< option selected = "selected" > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select16" >
< option > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" checked = "checked" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select17" >
< option selected = "selected" > NA< / option >
< option > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select18" >
< option > NA< / option >
< option selected = "selected" > Tel< / option >
< option > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< tr >
< td > < div align = "center" >
< input type = "checkbox" name = "checkbox" checked = "checked" / >
< / div > < / td >
< 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 > < div align = "center" >
< select name = "select19" >
< option > NA< / option >
< option > Tel< / option >
< option selected = "selected" > Address< / option >
< option > Fax< / option >
< / select >
< / div > < / td >
< / tr >
< / tbody >
< / table >
< script src = "tablefilter/tablefilter.js" > < / script >
< script data-config >
var tfConfig = {
base_path: 'tablefilter/',
col_0: 'select',
col_9: 'select',
filters_row_index: 1,
alternate_rows: true,
rows_counter: true,
btn_reset: {
text: 'Clear'
},
loader: true,
col_types: [
2018-06-09 14:34:29 +02:00
'string',
2018-05-05 10:07:23 +02:00
'string',
'number',
'string',
{ type: 'formatted-number', decimal: ',', thousands: '.' },
'formatted-number',
'string',
{ type: 'date', locale: 'en-GB' },
'date',
2018-06-09 14:34:29 +02:00
'string'
2018-05-05 10:07:23 +02:00
],
/* custom filtering with cell_parser delegate */
cell_parser: {
cols: [0, 9],
parse: function(o, cell, colIndex){
if(colIndex === 0){
var chk = cell.getElementsByTagName('input')[0];
if(chk.checked) return 'active';
else return 'inactive';
} else {
var slc = cell.getElementsByTagName('select')[0];
if(!slc){
return 'none';
} else {
return slc.value;
}
}
}
},
/* Column sorting extension */
extensions: [{
name: 'sort'
}]
};
var tf = new TableFilter('demo', tfConfig);
tf.init();
< / script >
< hr >
< ul class = "nav nav-pills" >
< li class = "active" >
< a data-toggle = "tab" href = "#js" > JS< / a >
< / li >
< li >
< a data-toggle = "tab" href = "#html" > HTML< / a >
< / li >
< li >
< a data-toggle = "tab" href = "#css" > CSS< / a >
< / li >
< / ul >
< div class = "tab-content" >
< div id = "js" class = "tab-pane fade in active" >
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
< pre class = "js" >
< code class = "javascript" > < / code >
< / pre >
< script src = "assets/js/js-code-in-pre.js" > < / script >
<!-- -->
< / div >
< div id = "html" class = "tab-pane fade" >
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
< pre class = "html" >
< code class = "xml" > < / code >
< / pre >
< script src = "assets/js/html-code-in-pre.js" > < / script >
<!-- -->
< / div >
< div id = "css" class = "tab-pane fade" >
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
< pre class = "css" >
< code class = "css" > < / code >
< / pre >
< script src = "assets/js/css-code-in-pre.js" > < / script >
<!-- -->
< / div >
< / div >
< / div >
< nav class = "navbar navbar-default navbar-bottom" >
< div class = "container" >
< ul class = "nav navbar-nav" >
< li >
< a href = "https://github.com/koalyptus/TableFilter" > Repo< / a >
< / li >
< li >
< a href = "https://github.com/koalyptus/TableFilter/wiki" > Wiki< / a >
< / li >
< li >
< a href = "./docs" target = "_blank" > Docs< / a >
< / li >
< / ul >
< ul class = "nav navbar-nav navbar-right" >
< li >
< p >
< form action = "https://www.paypal.com/cgi-bin/webscr" method = "post" target = "_blank" >
< input type = "hidden" name = "cmd" value = "_donations" >
< input type = "hidden" name = "business" value = "maxgug@hotmail.com" >
< input type = "hidden" name = "lc" value = "BM" >
< input type = "hidden" name = "item_name" value = "TableFilter" >
< input type = "hidden" name = "no_note" value = "0" >
< input type = "hidden" name = "currency_code" value = "USD" >
< input type = "hidden" name = "bn" value = "PP-DonationsBF:btn_donate_LG.gif:NonHosted" >
< input type = "image" src = "https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border = "0" name = "submit" alt = "PayPal - The safer, easier way to pay online!" >
< img alt = "" border = "0" src = "https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width = "1" height = "1" >
< / form >
< / p >
< / li >
< li >
< a href = "https://flattr.com/submit/auto?user_id=koalyptus&
url=https%3A%2F%2Fgithub.com%2Fkoalyptus%2FTablefilter">
< img src = "https://api.flattr.com/button/flattr-badge-large.png"
alt="TableFilter - A Javascript library making HTML tables filterable
and a bit more" />
< / a >
< / li >
< / ul >
< / div >
< / nav >
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
< script src = "https://code.jquery.com/jquery.min.js" > < / script >
<!-- Include all compiled plugins (below), or include individual files as needed -->
< script src = "assets/js/bootstrap.min.js" > < / script >
< script src = "assets/js/github-fork-me.js" > < / script >
<!--
DO NOT COPY: NOT PART OF TABLEFILTER
-->
< link rel = "stylesheet" href = "assets/js/highlight/styles/monokai-sublime.css" >
< script src = "assets/js/highlight/highlight.pack.js" > < / script >
< script > hljs . initHighlightingOnLoad ( ) ; < / script >
<!-- -->
< script type = "text/javascript"
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=maxgug"
async="async">< / script >
< script >
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-68429903-1', 'auto');
ga('send', 'pageview');
< / script >
< / body >
< / html >