2017-07-20 08:00:47 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Custom checkbox selection | 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 >
2017-12-22 13:08:36 +01:00
2017-07-20 08:00:47 +02:00
< / 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 = "http://koalyptus.github.io/TableFilter/docs" target = "_blank" > Docs< / a >
< / li >
< / ul >
< / div > <!-- /.nav - collapse -->
< / div >
< / div >
< div class = "container theme-showcase" role = "main" >
< h1 > Custom checkbox selection< / h1 >
< p >
This demo shows how to implement a custom checkbox selection by using the
< code > TableFilter< / code > 's API.
< / p >
< div data-config >
< p >
< button class = "btn btn-default" onclick = "alert(selectedRows);" >
Selected rows indexes< / button >
< / p >
< table id = "demo" class = "countries-checkboxes" >
< thead >
< tr >
< th >
< input type = "checkbox" >
< / th >
< th > Country< / th >
< th > ISO< / th >
< th > Year< / th >
< th > POP< / th >
< th > XRAT< / th >
< th > PPP< / th >
< th > cgdp< / th >
< th > cc< / th >
< th > ci< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Benin< / td >
< td > BEN< / td >
< td > 1998< / td >
< td > 5950.33< / td >
< td > 589.9517822< / td >
< td > 190.95< / td >
< td > 1178.46< / td >
< td > 90.98< / td >
< td > 7.55< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Benin< / td >
< td > BEN< / td >
< td > 1999< / td >
< td > 6109.53< / td >
< td > 615.6990967< / td >
< td > 200.19< / td >
< td > 1174.90< / td >
< td > 92.61< / td >
< td > 7.86< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Benin< / td >
< td > BEN< / td >
< td > 2000< / td >
< td > 6272.00< / td >
< td > 711.9763184< / td >
< td > 200.61< / td >
< td > 1224.74< / td >
< td > 92.27< / td >
< td > 8.25< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Burkina Faso< / td >
< td > BFA< / td >
< td > 1994< / td >
< td > 9755.03< / td >
< td > 555.2047119< / td >
< td > 125.76< / td >
< td > 838.76< / td >
< td > 79.81< / td >
< td > 6.57< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Burkina Faso< / td >
< td > BFA< / td >
< td > 1995< / td >
< td > 9988.00< / td >
< td > 499.148407< / td >
< td > 136.65< / td >
< td > 860.89< / td >
< td > 80.41< / td >
< td > 9.29< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Burkina Faso< / td >
< td > BFA< / td >
< td > 1996< / td >
< td > 10225.00< / td >
< td > 511.5523987< / td >
< td > 144.18< / td >
< td > 881.11< / td >
< td > 80.40< / td >
< td > 12.12< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Burkina Faso< / td >
< td > BFA< / td >
< td > 1997< / td >
< td > 10473.53< / td >
< td > 583.6693726< / td >
< td > 141.78< / td >
< td > 899.01< / td >
< td > 76.94< / td >
< td > 14.94< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Russia< / td >
< td > RUS< / td >
< td > 1998< / td >
< td > 146899.01< / td >
< td > 9.705082893< / td >
< td > 2.64< / td >
< td > 7086.39< / td >
< td > 67.73< / td >
< td > 9.20< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Russia< / td >
< td > RUS< / td >
< td > 1999< / td >
< td > 146308.99< / td >
< td > 24.6199398< / td >
< td > 4.03< / td >
< td > 8074.70< / td >
< td > 57.35< / td >
< td > 8.81< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Russia< / td >
< td > RUS< / td >
< td > 2000< / td >
< td > 145555.01< / td >
< td > 28.12916946< / td >
< td > 4.85< / td >
< td > 9995.91< / td >
< td > 54.74< / td >
< td > 8.79< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Rwanda< / td >
< td > RWA< / td >
< td > 1994< / td >
< td > 6230.00< / td >
< td > 194.517< / td >
< td > 50.39< / td >
< td > 529.48< / td >
< td > 132.16< / td >
< td > 4.48< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Rwanda< / td >
< td > RWA< / td >
< td > 1995< / td >
< td > 6400.00< / td >
< td > 262.1975098< / td >
< td > 70.67< / td >
< td > 746.34< / td >
< td > 92.77< / td >
< td > 3.08< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Rwanda< / td >
< td > RWA< / td >
< td > 1996< / td >
< td > 6727.00< / td >
< td > 306.8200073< / td >
< td > 77.90< / td >
< td > 823.25< / td >
< td > 89.71< / td >
< td > 3.21< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Rwanda< / td >
< td > RWA< / td >
< td > 1997< / td >
< td > 7895.18< / td >
< td > 301.5297852< / td >
< td > 84.13< / td >
< td > 847.79< / td >
< td > 91.44< / td >
< td > 3.72< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Rwanda< / td >
< td > RWA< / td >
< td > 1998< / td >
< td > 8105.00< / td >
< td > 312.3140869< / td >
< td > 85.32< / td >
< td > 914.22< / td >
< td > 89.34< / td >
< td > 4.22< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > El Salvador< / td >
< td > SLV< / td >
< td > 1995< / td >
< td > 5669.00< / td >
< td > 8.754583359< / td >
< td > 3.54< / td >
< td > 4143.59< / td >
< td > 89.31< / td >
< td > 10.35< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > El Salvador< / td >
< td > SLV< / td >
< td > 1996< / td >
< td > 5798.00< / td >
< td > 8.755000114< / td >
< td > 3.69< / td >
< td > 4235.79< / td >
< td > 88.77< / td >
< td > 7.79< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > El Salvador< / td >
< td > SLV< / td >
< td > 1997< / td >
< td > 5911.00< / td >
< td > 8.756250381< / td >
< td > 3.74< / td >
< td > 4408.41< / td >
< td > 87.05< / td >
< td > 7.90< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Slovak Republic< / td >
< td > SVK< / td >
< td > 2000< / td >
< td > 5401.00< / td >
< td > 46.0352< / td >
< td > 13.02< / td >
< td > 12618.53< / td >
< td > 52.22< / td >
< td > 24.78< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Slovenia< / td >
< td > SVN< / td >
< td > 1994< / td >
< td > 1988.90< / td >
< td > 128.8085938< / td >
< td > 79.97< / td >
< td > 11662.12< / td >
< td > 53.21< / td >
< td > 19.87< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Slovenia< / td >
< td > SVN< / td >
< td > 1995< / td >
< td > 1990.00< / td >
< td > 118.5185013< / td >
< td > 89.03< / td >
< td > 12574.96< / td >
< td > 54.46< / td >
< td > 23.11< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Slovenia< / td >
< td > SVN< / td >
< td > 1996< / td >
< td > 1991.00< / td >
< td > 135.3643036< / td >
< td > 97.27< / td >
< td > 13151.51< / td >
< td > 54.32< / td >
< td > 23.23< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Slovenia< / td >
< td > SVN< / td >
< td > 1997< / td >
< td > 1985.96< / td >
< td > 159.6882935< / td >
< td > 103.96< / td >
< td > 14143.02< / td >
< td > 53.24< / td >
< td > 24.14< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Slovenia< / td >
< td > SVN< / td >
< td > 1998< / td >
< td > 1982.60< / td >
< td > 166.134201< / td >
< td > 108.93< / td >
< td > 15067.34< / td >
< td > 52.82< / td >
< td > 25.35< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zambia< / td >
< td > ZMB< / td >
< td > 1994< / td >
< td > 8740.72< / td >
< td > 669.3706055< / td >
< td > 307.48< / td >
< td > 834.19< / td >
< td > 75.43< / td >
< td > 9.86< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zambia< / td >
< td > ZMB< / td >
< td > 1995< / td >
< td > 8980.00< / td >
< td > 864.1192017< / td >
< td > 402.40< / td >
< td > 829.37< / td >
< td > 76.55< / td >
< td > 10.31< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zambia< / td >
< td > ZMB< / td >
< td > 1996< / td >
< td > 9214.40< / td >
< td > 1207.900024< / td >
< td > 515.01< / td >
< td > 838.05< / td >
< td > 78.74< / td >
< td > 10.99< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zambia< / td >
< td > ZMB< / td >
< td > 1997< / td >
< td > 9443.21< / td >
< td > 1314.498047< / td >
< td > 596.97< / td >
< td > 851.47< / td >
< td > 77.59< / td >
< td > 12.15< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zambia< / td >
< td > ZMB< / td >
< td > 1998< / td >
< td > 9665.71< / td >
< td > 1862.06897< / td >
< td > 744.91< / td >
< td > 800.69< / td >
< td > 85.12< / td >
< td > 13.75< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zambia< / td >
< td > ZMB< / td >
< td > 1999< / td >
< td > 9881.21< / td >
< td > 2388.019043< / td >
< td > 941.87< / td >
< td > 765.24< / td >
< td > 91.82< / td >
< td > 15.30< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zambia< / td >
< td > ZMB< / td >
< td > 2000< / td >
< td > 10089.00< / td >
< td > 3110.843994< / td >
< td > 1157.63< / td >
< td > 840.97< / td >
< td > 86.33< / td >
< td > 15.38< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zimbabwe< / td >
< td > ZWE< / td >
< td > 1994< / td >
< td > 10775.35< / td >
< td > 8.151538849< / td >
< td > 2.01< / td >
< td > 2586.84< / td >
< td > 60.10< / td >
< td > 18.53< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zimbabwe< / td >
< td > ZWE< / td >
< td > 1995< / td >
< td > 11011.00< / td >
< td > 8.66537571< / td >
< td > 2.15< / td >
< td > 2603.37< / td >
< td > 66.89< / td >
< td > 15.03< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zimbabwe< / td >
< td > ZWE< / td >
< td > 1996< / td >
< td > 11242.16< / td >
< td > 10.00234985< / td >
< td > 2.64< / td >
< td > 2860.23< / td >
< td > 72.06< / td >
< td > 11.32< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zimbabwe< / td >
< td > ZWE< / td >
< td > 1997< / td >
< td > 11923.52< / td >
< td > 12.11128998< / td >
< td > 3.17< / td >
< td > 2727.06< / td >
< td > 82.82< / td >
< td > 11.01< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zimbabwe< / td >
< td > ZWE< / td >
< td > 1998< / td >
< td > 12153.85< / td >
< td > NA< / td >
< td > 4.06< / td >
< td > 2799.85< / td >
< td > 77.66< / td >
< td > 10.75< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zimbabwe< / td >
< td > ZWE< / td >
< td > 1999< / td >
< td > 12388.32< / td >
< td > 38.30120087< / td >
< td > 6.12< / td >
< td > 2770.48< / td >
< td > 76.89< / td >
< td > 10.73< / td >
< / tr >
< tr >
< td >
< input type = "checkbox" >
< / td >
< td > Zimbabwe< / td >
< td > ZWE< / td >
< td > 2000< / td >
< td > 12627.00< / td >
< td > 44.41791916< / td >
< td > 9.48< / td >
< td > 2607.03< / td >
< td > 69.23< / td >
< td > 8.62< / td >
< / tr >
< / tbody >
< / table >
< / div >
< script src = "tablefilter/tablefilter.js" > < / script >
< style data-config >
.selected{
background-color: #316AC5;
color: #FFFFFF;
}
< / style >
< script data-config >
var tfConfig = {
base_path: 'tablefilter/',
col_0: 'none',
col_1: 'multiple',
col_3: 'checklist',
auto_filter: true,
auto_filter_delay: 500,
alternate_rows: true,
rows_counter: {
text: 'Records: '
},
btn_reset: true,
status_bar: true,
msg_filter: 'Filtering...',
col_widths: [
'10px', '150px', '75px',
'100px', null, null, null,
null, null, null
]
};
var tf = new TableFilter(
document.querySelector('.countries-checkboxes'),
tfConfig
);
// Subscribe to 'initialized' event to initialize selection
tf.emitter.on(['initialized'], initSelectionListeners);
tf.init();
// Store selected rows indexes
var selectedRows = [];
var selectedCss = 'selected';
// Initialize checkboxes listeners
function initSelectionListeners(tf){
var headerCheckbox = tf.getHeaderElement(0).querySelector('input');
var checkboxes = getBodyCheckboxes(tf.dom());
// Add event listener to checkbox in table head
headerCheckbox.addEventListener('change', toggleAll.bind(tf));
// Add event listener to all checkboxes in table body
[].forEach.call(checkboxes, function(checkbox){
checkbox.addEventListener('change', changeHandler);
});
}
// Toggle all checkboxes in valid rows
function toggleAll(evt){
var tf = this;
var headerCheckbox = evt.target;
var isChecked = headerCheckbox.checked;
var checkboxes = getBodyCheckboxes(tf.dom());
var filteredRows = tf.getValidRows();
[].forEach.call(checkboxes, function(checkbox){
var row = getRowElement(checkbox);
var rowIndex = row.rowIndex;
if(isChecked){
if(filteredRows.indexOf(rowIndex) !== -1){
checkbox.checked = true;
selectRow(selectedRows, row, selectedCss);
}
} else {
checkbox.checked = false;
deselectRow(selectedRows, row, selectedCss)
}
});
}
// Checkbox change event handler
function changeHandler(evt){
var checkbox = evt.target;
var row = getRowElement(checkbox);
var isChecked = checkbox.checked;
if(isChecked){
selectRow(selectedRows, row, selectedCss);
} else {
deselectRow(selectedRows, row, selectedCss);
}
}
// Select row
function selectRow(selectedRows, row, cssClass){
row.classList.add(cssClass);
storeRowIndex(selectedRows, row.rowIndex);
}
// Deselect row
function deselectRow(selectedRows, row, cssClass){
row.classList.remove(cssClass);
removeRowIndex(selectedRows, row.rowIndex);
}
// Store selected row index
function storeRowIndex(selectedRows, rowIndex){
if(selectedRows.indexOf(rowIndex) === -1){
selectedRows.push(rowIndex);
}
}
// Remove row index previously selected
function removeRowIndex(selectedRows, rowIndex){
selectedRows.splice(selectedRows.indexOf(rowIndex), 1);
}
// Get all checkboxes in table body
function getBodyCheckboxes(table){
var tBody = table.tBodies[0];
return tBody.getElementsByTagName('input');
}
// Get the parent row element
function getRowElement(element){
while(element !== null){
if(element.nodeName === 'TR'){
return element;
}
element = element.parentNode;
}
return null;
}
< / 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 = "http://koalyptus.github.io/TableFilter/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 >