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

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

1 Aralık 2020 / 18:04

Burak

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>

Etiketler: Datatable Dip Toplamını Hesaplama, datatables column sum, Datatables footer sum, Datatables Sütun Toplattırma

Bu Yazılarıda Okuyabilirsiniz...

Javascript Get Methodu ile veri okuma

Javascript url parameters okuma

Mysql Event ( Olaylar ) Aktif / Pasif Yapma ve Kontrol

Mysql AES_DECRYPT ve AES_ENCRYPT kullanımı

C# ile Guid Kullanımı

Kategoriler

Sosyal Medya

Tavsiye Linkler

Bir cevap yazın Cevabı iptal et