javascript - unable to display sum in footer using datatable -
i have created datatable using jquery. table has 7 columns , among 1 column grand total (column 6). have display sum of grand total (column 6) in grand total (column 6) @ bottom of grand total (column 6).
how can that? have tried code nothing worked. outout blank column. here code found. below html code
html
<table class="display table table-bordered table-striped" id="dynamic-table"> <thead> <tr> <th>invoice type</th> <th>invoice no</th> <th>invoice date</th> <th>customer name</th> <th>city </th> <th>grand total</th> <th class="hidden-phone">action</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <th></th> <th></th> <th></th> <th></th> <th>total:</th> <th></th> <th></th> </tr> </tfoot> </table>
javascript
function load_datatable() { var data = $('input[name=report]:checked').val(); var date = $('#rep_date').val(); var type = $('#type_id').val(); datatable = $("#dynamic-table").datatable({ "bautowidth": false, "bfilter": true, "bsort": true, "bprocessing": true, "bdestroy": true, "bserverside": true, "olanguage": { "slengthmenu": "_menu_", "sprocessing": "<img src='" + root_domain + "img/loading.gif'/> loading ...", "semptytable": "no data added yet !", }, "alengthmenu": [ [10, 20, 30, 50], [10, 20, 30, 50] ], "idisplaylength": 10, "sajaxsource": root_domain + 'app/invoice/', "fnserverparams": function(aodata) { aodata.push({ "name": "mode", "value": "fetch" }, { "name": "report", "value": data }, { "name": "type_id", "value": type }, { "name": "date", "value": date }); }, "footercallback": function(row, data, start, end, display) { var api = this.api(), data; // remove formatting integer data summation var intval = function(i) { return typeof === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof === 'number' ? : 0; }; // total on page pagetotal = api .column(5, { page: 'current' }) .data() .reduce(function(a, b) { return intval(a) + intval(b); }, 0); console.log(pagetotal); // update footer $(api.column(5).footer()).html('$' + pagetotal); }, "fndrawcallback": function(osettings) { $('.ttip, [data-toggle="tooltip"]').tooltip(); } }).fnsetfilteringdelay(); //search input style $('.datatables_filter input').addclass('form-control').attr('placeholder', 'search'); $('.datatables_length select').addclass('form-control'); }
Comments
Post a Comment