DataTables Footer Toplam Alma (SUM)
Merhaba, bu yazımda sizlerle DataTables Footer Toplam Alma konusunu ele alacağım. Yaptığımız bütün projelerde veri tablolarına ihtiyaç duyarız. Bize kolay bir şekilde veriyi gösterecek ve bazı özel fonksiyonlarla projemizi destekleyecek özellikler isteriz. Bunlardan bazıları ;
- Footer İşlemleri (Toplama, Ortalama, Fark vs.)
- Dışarı Aktarma (Excel, CSV, Print, PDF vs.)
- Filtreleme Özellikler vb. özelliklerdir.
Belirtmiş olduğum maddeleri zaman buldukça sizlerle paylaşacağım ve sadece paylaşmakla kalmayıp daha da kullanışlı hale getireceğim. O halde hemen başlayalım.
Projemiz de DataTables'i kullanabilmemiz için js ve css dosyalarını projemize dahil etmemiz gerekiyor. Bunun için DataTables sitemize giderek aşağıda vermiş olduğum linkteki kütüphaneleri projemize dahil ediyoruz.
ADIM 1 : Kütüphaneleri Projemize Dahil Ediyoruz
ADIM 2 : Kodlarımızı Yazıyoruz
<script> $(document).ready(function() { $('#example').DataTable( { dom: 'Bfrtip', buttons: [ { extend : 'csv', footer : true }, { extend : 'excel', footer : true }, { extend : 'print', footer : true }, { extend : 'pdf', footer : true } ], footer : true, "footerCallback": function ( row, data, start, end, display ) { var api = this.api(), data; // Sadece integer değerleri alır var intVal = function ( i ) { return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0; }; // Bütün sayfaların toplamını verir total = api .column( 3 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Geçerli sayfanın toplamını verir pageTotal = api .column( 3, { page: 'current'} ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Footer güncelleme $( api.column( 3 ).footer() ).html( +pageTotal +' TL <br> ('+ total +' Toplam TL)' ); } } ); } ); </script>
ÖNEMLİ : Burada dikkat etmemiz gereken nokta buttons yazan yer eğer siz dışarı aktarmak istiyorsanız footer belirtmediğiniz sürece bütün çıktılarınızda alt toplamı göremeyeceksiniz. Bunun için projemiz de yapmamız gereken en önemli nokta buttons'ları bu şekilde yazıp extend ve footer değerlerini vermek bu sayede hem web sayfanızda alt toplamı göreceksiniz hem de dışarı çıktı almak istediğiniz de alt toplamı göreceksiniz.
Kodumuzda 3 olan yerleri siz kendi veri tablonuzda toplamak istediğiniz alana göre değiştirmelisiniz. Unutmayın diziler 0dan başlar :) Yapmış olduğum örneğe aşağıdan bakabilirsiniz.
Bir daha ki yazımda görüşmek üzere, sağlıcakla kalın :)