Datatables’da Sütun Toplamını Footer’da Göstermek

Merhabalar,

Datatables javascript kullanarak sizlerde kayıtları gösterme yapıyorsanız ve belli bir sütunun toplamının göstermek isterseniz aşağıdaki kodları kullanabilirsiniz. Aşağıdaki kodda Türkçe dil paketide vardır 🙂 Ayrıca normalde dip toplamda rakamı çok karışık gösteriyordu ben bunu süslemek için binlik diye ayrı bir fonk. yazdım oda aşağıdaki kodun içinde bilginiz olsun 🙂

    <script>
              function binlik(n) {
                 
                  return n.toFixed(2).replace('.', ',').replace(/\d{3}(?=(\d{3})*,)/g, function(s) {
                      var t='.' + s;
                      return t;
                  })
              }
          </script> 
<script>
                 $(function () {
                     $("#giderler_hepsi").DataTable({   
                         "responsive": true,
                         "autoWidth": false,
                         "pageLength": 10,
                         "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Bütün Kayıtlar"]],
                         "order": [[0, "desc"]],                      
                         dom: 'Bfrtip',
                         buttons: [
                                       {
                                           text: 'Yeni Gider Kaydı',
                                           action: function (e, dt, node, config) {
                                               location.href = 'panel.aspx?i=yeni_gider';
                                           }
                                       },
                                        {
                                                text: 'Yeni Kategori',
                                                action: function (e, dt, node, config) {
                                                    location.href = 'panel.aspx?i=yeni_gider_kategori';
                                                }
                                         },
                             'csv', 'excel', 'pdf', 'print', 'pageLength'
                         ],
                         "language": {

                             "lengthMenu": "_MENU_ adet kayıt göster",
                             "emptyTable": "Gösterilecek ver yok.",
                             "processing": "Veriler yükleniyor",
                             "sDecimal": ".",
                             "sInfo": "_TOTAL_ kayıttan _START_ - _END_ arasındaki kayıtlar gösteriliyor",
                             "sInfoFiltered": "(_MAX_ kayıt içerisinden bulunan)",
                             "sInfoPostFix": "",
                             "sInfoThousands": ".",
                             "sLengthMenu": "Sayfada _MENU_ kayıt göster",
                             "sLoadingRecords": "Yükleniyor...",
                             "sSearch": "Ara:",
                             "sZeroRecords": "Eşleşen kayıt bulunamadı",
                             "oPaginate": {
                                 "sFirst": "İlk",
                                 "sLast": "Son",
                                 "sNext": "Sonraki",
                                 "sPrevious": "Önceki"
                             },
                             "oAria": {
                                 "sSortAscending": ": artan sütun sıralamasını aktifleştir",
                                 "sSortDescending": ": azalan sütun sıralamasını aktifleştir"
                             },


                             "select": {
                                 "rows": {
                                     "_": "%d kayıt seçildi",
                                     "0": "",
                                     "1": "1 kayıt seçildi"
                                 }
                             },
                             buttons: {
                                 pageLength: {
                                     _: "%d adet kayıt gösterilsin",
                                     '-1': "Bütün Kayıtlar"
                                 }
                             }
                         },      
                         //  sütun toplama fonksiyonu baslangıc

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

                             //  Hücrenin değerini Numbera çeviriyoruz.

                             var intVal = function (i) {
                                 return typeof i === 'string' ?
                                     i.replace(".","").replace(',', '.') * 1 :
                                     typeof i === 'number' ?
                                     i : 0;
                             };

                             // 2. Sütunun değerlerini toplayıp toplamAraTutar değişkenine atıyoruz.

                             toplamAraTutar = api.column(2, { "filter": "applied" }).data()
                                 .reduce(function (a, b) {
                                     return intVal(a) + intVal(b);
                                 }, 0); 
                             
                             // Bu şekilde tablonun footer ına da yazılabilir.
                             $(api.column(2).footer()).html(
                                 binlik(toplamAraTutar)  + '  TL'
                             );

                         }
                         
                         //  sütun toplama fonksiyonu bitiş
                     
                     }); 
                    
       
                 });



            </script>

100

101

102

103

104

105

106

107

108

109

110

111

function binlik(n) {

return n.toFixed(2).replace('.', ',').replace(/\d{3}(?=(\d{3})*,)/g, function(s) {

var t='.' + s;

return t;

})

}

</script>

$(function () {

$("#giderler_hepsi").DataTable({

"responsive": true,

"autoWidth": false,

"pageLength": 10,

"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Bütün Kayıtlar"]],

"order": [[0, "desc"]],

dom: 'Bfrtip',

buttons: [

{

text: 'Yeni Gider Kaydı',

action: function (e, dt, node, config) {

location.href = 'panel.aspx?i=yeni_gider';

}

{

text: 'Yeni Kategori',

action: function (e, dt, node, config) {

location.href = 'panel.aspx?i=yeni_gider_kategori';

}

'csv', 'excel', 'pdf', 'print', 'pageLength'

"language": {

"lengthMenu": "_MENU_ adet kayıt göster",

"emptyTable": "Gösterilecek ver yok.",

"processing": "Veriler yükleniyor",

"sDecimal": ".",

"sInfo": "_TOTAL_ kayıttan _START_ - _END_ arasındaki kayıtlar gösteriliyor",

"sInfoFiltered": "(_MAX_ kayıt içerisinden bulunan)",

"sInfoPostFix": "",

"sInfoThousands": ".",

"sLengthMenu": "Sayfada _MENU_ kayıt göster",

"sLoadingRecords": "Yükleniyor...",

"sSearch": "Ara:",

"sZeroRecords": "Eşleşen kayıt bulunamadı",

"oPaginate": {

"sFirst": "İlk",

"sLast": "Son",

"sNext": "Sonraki",

"sPrevious": "Önceki"

"oAria": {

"sSortAscending": ": artan sütun sıralamasını aktifleştir",

"sSortDescending": ": azalan sütun sıralamasını aktifleştir"

"select": {

"rows": {

"_": "%d kayıt seçildi",

"0": "",

"1": "1 kayıt seçildi"

}

buttons: {

pageLength: {

_: "%d adet kayıt gösterilsin",

'-1': "Bütün Kayıtlar"

}

// sütun toplama fonksiyonu baslangıc

"footerCallback": function (row, data, start, end, display) {

var api = this.api(), data;

// Hücrenin değerini Numbera çeviriyoruz.

var intVal = function (i) {

return typeof i === 'string' ?

i.replace(".","").replace(',', '.') * 1 :

typeof i === 'number' ?

i : 0;

};

// 2. Sütunun değerlerini toplayıp toplamAraTutar değişkenine atıyoruz.

toplamAraTutar = api.column(2, { "filter": "applied" }).data()

.reduce(function (a, b) {

return intVal(a) + intVal(b);

}, 0);

// Bu şekilde tablonun footer ına da yazılabilir.

$(api.column(2).footer()).html(

binlik(toplamAraTutar) + ' TL'

);

}

// sütun toplama fonksiyonu bitiş

});

</script>

Datatables’da Sütun Toplamını Footer’da Göstermek

Günün zaman çizelgesi

Harun Kılıçlar

Yorum yaz Yanıtı iptal et

Datatables’da Sütun Toplamını Footer’da Göstermek

Günün zaman çizelgesi

Harun Kılıçlar

İlginizi çekebilir

Gemini Docs ve Sheets dosyalarını sohbet içinde düzenliyor

Cloudflare, yapay zekâ ajanları için Kitesurf’ü açtı

ByteDance, görevleri üstlenecek yapay zekâ ajanı geliştiriyor

Yorum yaz Yanıtı iptal et