Hitung Jumlah di Footer Data Tables

Cara membuat jumlah data di data tables seperti berikut hasilnya

berikut scriptnya

<table class="table table-striped table-bordered table-hover" id="sample_3">
    <thead>
        <tr>
            <th style="width:8px;">No</th>
            <th>Provinsi</th>
            <th>Tanggal Pelantikan</th>
            <th>Jumlah Caleg</th>
            <th>Laki-Laki</th>
            <th>Perempuan</th>
        </tr>
    </thead>
  
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th>Total</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
<tbody>tidak saya tampilkan </tbody>
</table>


<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" /> 

<script>
$(document).ready(function() {
	// DataTable initialisation
	$('#sample_3').DataTable(
		{
			"paging": true,
			"autoWidth": true,
			"footerCallback": function ( row, data, start, end, display ) {
				var api = this.api();
				nb_cols = api.columns().nodes().length;
				var j = 3;
				while(j < nb_cols){
					var pageTotal = api
                .column( j, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return Number(a) + Number(b);
                }, 0 );
          // Update footer
          $( api.column( j ).footer() ).html(pageTotal);
					j++;
				} 
			}
		}
	);
});
</script>

dan jadilah .. jumlah tersebut mengikuti paging column nya jg .. ya itu yg saya mau … thanks ..

Rio Yotto

Leave a Reply

Your email address will not be published. Required fields are marked *