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

DataTables sitesine git.

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 :)