Combine select filter, sum() function and table tools in one table.
Combine select filter, sum() function and table tools in one table.
kforest
Posts: 1Questions: 1Answers: 0
Greetings! I am not very experienced with js, yet I managed to set up a table with select filtering. This is my html head:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="/css/dataTables.tableTools.css">
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="/js/dataTables.tableTools.js"></script>
<script src="/js/sum().js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
var api = this.api();
api.columns().indexes().flatten().each( function ( i ) {
var column = api.column( i );
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
</script>
<style>
input[type="submit"] {
border: 0;
background-color: #2C2F3B;
color: #fff;
font-weight: bold;
/*padding: 10px;*/
cursor: pointer;
}
</style>
</head>
Everything works fine, but I need to include:
*TableTools (CSV and print buttons)
*The sum of each column (that contains numbers) being shown under the column _depending on the filter setting_
These are the codes I am supposed to use
$(document).ready(function() {
$('#example').DataTable( {
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "../swf/copy_csv_xls_pdf.swf"
}
} );
} );
and
// Simply get the sum of a column
var table = $('#example').DataTable();
table.column( 3 ).data().sum();
// Insert the sum of a column into the columns footer, for the visible
// data on each draw
$('#example').DataTable( {
drawCallback: function () {
var api = this.api();
api.table().footer().to$().html(
api.column( 4, {page:'current'} ).data().sum()
);
}
} );
Now this kind of code is very advanced for me, so I am asking for an example on how to combine these codes to make all the functions work correctly. Any help would be appreciated.
This discussion has been closed.