DataTables Footer Callback İle Arama Sonuçları Kolonlarını Toplama ve İşlem Yapma

DataTables’in arama özelliği kullanıcılar tarafından oldukça sık kullanılan bir özellik. Bu yazımda sizlere DataTables üzerinde arama yapıldığında görüntülenen yani filtrelenen içeriklerin fiyatlarının yada ilgili sütunlarının toplamlarını nasıl bulabileceğinizi göstermek istiyorum.

Normalde DataTables üzerinde direk olarak sum() metodunu kullandığınızda size tüm sutunların (DataTables’e ilk başta eklenen) toplamını verir. Peki DataTables  üzerinde filtrelenen veriler nasıl toplanır? DataTables Kolon Toplamı nasıl bulunur? DataTables sayfa toplamı nedir?  What is DataTables page total? How to add row in the footer that sum each column ?

DataTables server side toplama yapabiliriz. Bunun için DataTables kodumuzda küçük bir düzenleme yapmamız gerekiyor. Bu sayede istediğimiz kritere göre işlemler yapabiliriz.

DataTables Footer Callback  İle Kolon Toplamı Bulma

DataTables footer callback fonksiyonu kullanılarak birden fazla kolon toplanabilir. Toplama işlemi arama sonuçlarına göre otomatik olarak yapılıyor. Yani siz x harfini arattığınızda sonuçlar hesaplanıp sonucu istediğiniz yere yazılıyor.

"footerCallback": function (row, data, start, end, display) {
        var api = this.api(), data;

        var intVal = function (i) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '') * 1 :
                typeof i === 'number' ?
                    i : 0;
        };

        var totalAllPageSumMoney = 0;

        // columns(1) -> 1 işlem yapmak istediğim kolon numarası
        api.columns(1).eq(0).each(function (index) {
            // Bu kısmı "filter": "applied" olarak ayarlamanız gerekmektedir.
            var column = api.column(index, { "filter": "applied" });

            // DataTables istediğim kolonları toplayacağım fonksiyon
            var sum = column
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

                // Kolon toplamını bir değişkende tutuyorum
            totalAllPageSumMoney = sum.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
        });

        // DataTables footerda göstereceğim metni footer'a ekliyorum
        $(api.column(1).footer()).html(totalAllPageSumMoney + ' TL ');

        var response = {
            ToplamFisTutari: totalAllPageSumMoney
        }

        // Sonucu direk olarak yukarıdaki gibi kullanabileceğiniz gibi bir fonksiyon çağırarak da yönetebilirsiniz
        tabloIstatistikDoldur(response);
    }