Hitung Total Nilai Datatables

Datatable – Fungsi callback adalah salah satu fungsi yang disediakan oleh datatable untuk memodifikasi header dan footer html di datatable. Kita dapat menambahkan informasi dari data dinamis dari nilai yang berada dalam datatable ke bagian header atau footer.

Ada 2 fungsi callback yang disediakan oleh datatable yaitu header callback adan footer callback. Keduanya sama-sama bisa digunakan untuk memanipulasi data yang ada di dalam datatable .

Pada kesempatan kali ini, saya akan menjelaskan tentang pemakaian footer callback untuk melakukan perhitungan total nilai dalam kolom di datatable, karena dalam tutorial filter serverside datatable sebelumnya sudah kita buat. Selanjutnya kita akan menambahkan perhitungan total untuk menunjang performa datatable itu sendiri.

Tampilan Dengan Footer Total

Untuk tampilannya bisa kalian lihat di tutorial Filter Serverside Datatable. Dan kita akan melakukan modifikasi dengan menambahkan footer di tablenya. Dibawah ini kode modifikasi dari tampilan index.blade.php.

Penambahan Footer Callback Untuk Hitung Total Nilai Datatable

Disini saya akan jelasakan sedikit tentang tambahan kode dalam datatable yang biasa digunakan, untuk tutorial ini saya modifikasi dari tampilan sebelumnya di tutorial Filter Serverside Datatable.

Kode di atas taruh di dalam jquery datatable $(‘#table).DataTable({ }); kalau di dalam datatable tersebut sudah terdapat inisialisasi lain maka tinggal dikasih tanda koma ( , ).

Berikut ini penjelasan mengenai fungsi yang ada di dalam footer callback di datatable.

Fungsi Menghilangkan String Di Data

Fungsi di bawah ini digunakan untuk mendapatkan nilai integer saja atau angka saja, jadi karakter lain akan dibuang.

Hitung Nilai Total Dalam Kolom Datatable

Fungsi di bawah ini digunakan untuk menghitung jumlah total nilai dalam kolom datatable secara keseluruhan data yang ditampilkan datatable, artinya total nilai seluruh halaman.

Fungsi di bawah ini digunakan untuk menghitung nilai dalam datatable tapi hanya per halaman saja, bukan keseluruhan seperti kode di atas.

Update HTML Footer Datatable

Fungsi di bawah ini digunakan untuk mengupdate html footer kolom ke-4 dan isinya diganti dengan result dari perhitungan hitung total nilai dalam kolom datatable. Kenapa kolom ke-4 karena kolomnya dihitung dari kolom ke-0 sama seperti index di array.

Berikut hasilnya kalau dijalankan di localhost.

Hitung Total Nilai Dalam Datatable

Semoga apa yang saya sampaikan bermanfaat. 🙂

About the Author: ikhsan

You May Also Like

Leave a Reply

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