<table width="100%" class="table table-striped table-bordered table-hover" id="table"> <thead> <tr> <th>#Serial</th> <th>Admission No</th> <th>Name</th> <th>Course</th> <th>Hostel</th> <th>Total Fee</th> <th>Scholarship</th> <th>Gross Fee</th> <th>EMI Charge</th> <th>Paid</th> <th>Balance</th> <th>Refund</th> </tr> </thead> <tfoot> <tr id="tfoot_row"> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </tfoot> </table> $(document).ready(function() { fill_datatable(); function fill_datatable(batch='') { table = $('#table').DataTable({ "processing": true, "serverSide": true, "order": [], "pageLength": 25, "stateSave": true, "ajax": { "url": '<?php echo site_url('Institutes/Students_report/studentList'); ?>', "type": "POST", "stateSave": true, "data": { batch: batch }, }, "footerCallback": function (row, data, start, end, display) { var api = this.api(), data; var intVal = function (i) { return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0; }; // Total each column data var total_fee = api .column(5, { search: 'applied' }) .data() .reduce(function (a, b) { return intVal(a) + intVal(b); }, 0); var total_scholarship = api .column(6, { search: 'applied' }) .data() .reduce(function (a, b) { return intVal(a) + intVal(b); }, 0); // Add total to the footer $(api.column(5).footer()).html(total_fee); $(api.column(6).footer()).html(total_scholarship); // Repeat the process for other columns } }); } });