Asp.net Gridview ile datatables kullanımı

Anasayfa / Asp.net / Asp.net Gridview ile datatables kullanımı

4 Nisan 2022 / 08:50

Burak

Merhabalar,

Asp.net gridview ile birlikte datatables kullanmak isterseniz aşağıdaki adımları takip etmeniz yeterlidir.

Öncelikle datatables verileri databind ettikten sonra codebehind tarafında şu kodları ekleyiniz.

Örnek kullanımı

Html tarafını kodları ise aşağıdaki gibidir

<asp:GridView  ShowHeader="true"  ShowFooter="true" ClientIDMode="Static" CssClass="display"   ID="hazir_rapor_sonuc_dg" runat="server"></asp:GridView>
<script src="https://cdn.datatables.net/plug-ins/1.10.22/filtering/row-based/range_dates.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="datatables.css" rel="stylesheet" />
<script src="datatables.js"></script>
<script>
function binlik(n) {
return n.toFixed(2).replace('.', ',').replace(/\d{3}(?=(\d{3})*,)/g, function (s) {
var t = '.' + s;
return t;
})
}
</script> 
<script>
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#hazir_rapor_sonuc_dg tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="' + title + ' Arama Alanı" />');
});
$('#hazir_rapor_sonuc_dg').DataTable(
{
initComplete: function () {
// Apply the search
this.api().columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change clear', function () {
if (that.search() !== this.value) {
that
.search(this.value).draw();
}
});
});
/*  var r = $('#eticaret_raporlama_tbl tfoot tr');
r.find('th').each(function () {
$(this).css('padding', 8);
});
$('#eticaret_raporlama_tbl thead').append(r);
$('#search_0').css('text-align', 'center');
*/
}, 
"order": [[0, "desc"]],
"pageLength": 30,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, 'Hepsi']],
dom: 'Bfrtip',
buttons: [
'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(4, { "filter": "applied" }).data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Bu şekilde tablonun footer ına da yazılabilir.
$(api.column(4).footer()).html(
binlik(toplamAraTutar) + '  TL'
);
}
//  sütun toplama fonksiyonu bitiş 
});
});
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<asp:GridView ShowHeader="true" ShowFooter="true" ClientIDMode="Static" CssClass="display" ID="hazir_rapor_sonuc_dg" runat="server"></asp:GridView>

function binlik(n) {

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

var t = '.' + s;

return t;

})

}

</script>

$(document).ready(function () {

// Setup - add a text input to each footer cell

$('#hazir_rapor_sonuc_dg tfoot th').each(function () {

var title = $(this).text();

$(this).html('<input type="text" placeholder="' + title + ' Arama Alanı" />');

});

$('#hazir_rapor_sonuc_dg').DataTable(

{

initComplete: function () {

// Apply the search

this.api().columns().every(function () {

var that = this;

$('input', this.footer()).on('keyup change clear', function () {

if (that.search() !== this.value) {

that

.search(this.value).draw();

}

});

/* var r = $('#eticaret_raporlama_tbl tfoot tr');

r.find('th').each(function () {

$(this).css('padding', 8);

});

$('#eticaret_raporlama_tbl thead').append(r);

$('#search_0').css('text-align', 'center');

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

"pageLength": 30,

"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, 'Hepsi']],

dom: 'Bfrtip',

buttons: [

'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(4, { "filter": "applied" }).data()

.reduce(function (a, b) {

return intVal(a) + intVal(b);

}, 0);

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

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

binlik(toplamAraTutar) + ' TL'

);

}

// sütun toplama fonksiyonu bitiş

});

</script>

Bu Yazılarıda Okuyabilirsiniz...

Asp.net ile WordPress’de konu oluşturma ( wordpresssharp )

Asp.Net WebClient Request Örnekleri ( Post, Get, Put, Delete )

Asp.net Basic Authentication Örneği

İyzico .Net Bin Number Sorgulama

Asp.net Fileupload Seçilen Resimi Yüklemeden Gösterme

Kategoriler

Sosyal Medya

Bir yanıt yazın Yanıtı iptal et