Hitung Jumlah (Total) Kolom DataTables dengan menggunakan Footer Callback

1 989

DataTables menyediakan fungsi callback untuk memanipulasi data HTML header dan footer dan memberi nilai tambah pada presentasi. Dengan menggunakan fungsi callback ini kita bisa melakukan berbagai modifikasi pada tabel resultan secara dinamis. Kita dapat menambahkan informasi yang menambahkan nilai ke bagian header dan footer dari DataTables. Sebagai contoh, kita dapat menambahkan informasi header kolom tertentu, menunjukkan jumlah total kolom dan banyak lagi.

Dalam tutorial ini, saya akan menyajikan sebuah contoh kode yang akan menghitung total kolom dan menampilkannya dengan menggunakan fungsi callback DataTables footer. Fungsi callback tersebut untuk memodifikasi header dan footer adalah headerCallback dan footerCallback yang diberikan sebagai pilihan pada plugin DataTables. Dalam tutorial sebelumnya, kita telah melihat bagaimana membuat daftar hasil database menggunakan DataTables dengan memungkinkan pemrosesan sisi server (DataTables by enabling server-side processing) melihatnya untuk mempelajari pemrosesan sisi server DataTables.

Kode HTML untuk DataTabel dengan Kolom Total

Kode berikut menunjukkan tabel HTML yang diinisialisasi dengan perpustakaan DataTables untuk menampilkan hasil database. Kami menetapkan pilihan serverSide sebagai true untuk mendapatkan hasil database dengan menggunakan panggilan AJAX. Kode ini berisi markup footer tabel dengan tag kontainer kosong. Wadah ini akan diisi dengan jumlah data kolom setelah menjalankan fungsi callback footer.

<head>
<title>Calculate Sum (Total) of DataTables Column using Footer Callback</title>
	<link rel="stylesheet"  href="vendor/DataTables/datatables.min.css">	
	<link rel="stylesheet"  href="style.css">	
	<script src="vendor/jquery/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="vendor/DataTables/datatables.min.js" type="text/javascript"></script> 	
</head>
<body>
	<table id="tbl-attendance" class="display nowrap" cellspacing="0" width="100%">
	<thead>
		<tr>
		<th>Subject</th>
		<th>Mon</th>
		<th>Tue</th>
		<th>Wed</th>
		<th>Thu</th>
		<th>Fri</th>
		</tr>
	</thead>
	<tfoot align="right">
		<tr><th></th><th></th><th></th><th></th><th></th><th></th></tr>
	</tfoot>
	</table>
</body>

Script Callback Footer

Script berikut digunakan untuk menginisialisasi perpustakaan DataTables dengan referensi pemilih id tabel HTML. Ini berisi fungsi callback footer untuk menghitung jumlah data kolom. Dalam fungsi ini, jumlah atau total dihitung per kolom.

Dalam fungsi ini, ia mendapatkan nilai dengan menggunakan kolom (indeks) .data () dan mengubahnya menjadi format bilangan bulat untuk menghitung totalnya. Setelah menghitung total kolom, ia menggunakan kolom (indeks) .html () untuk secara dinamis memasukkan total ke footer.

<script>
$(document).ready(function() {
    $('#tbl-attendance').dataTable({
    	"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // converting to interger to find total
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // computing column Total of the complete result 
            var monTotal = api
                .column( 1 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
				
	    var tueTotal = api
                .column( 2 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
				
            var wedTotal = api
                .column( 3 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
				
	     var thuTotal = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
				
	     var friTotal = api
                .column( 5 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
			
				
            // Update footer by showing the total with the reference of the column index 
	    $( api.column( 0 ).footer() ).html('Total');
            $( api.column( 1 ).footer() ).html(monTotal);
            $( api.column( 2 ).footer() ).html(tueTotal);
            $( api.column( 3 ).footer() ).html(wedTotal);
            $( api.column( 4 ).footer() ).html(thuTotal);
            $( api.column( 5 ).footer() ).html(friTotal);
        },
        "processing": true,
        "serverSide": true,
        "ajax": "server.php"
    } );
} );
</script>

Output:

Berikut screenshot menampilkan daftar hasil database dengan memungkinkan pemrosesan sisi server. Ini menunjukkan jumlah kolom yang dihitung dengan menggunakan skrip callback DataTables footer.

Get real time updates directly on you device, subscribe now.

1 Comment
  1. opal says

    link download ok. tapi file corrupt

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.