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.
|
1 2 3 |
Gridview_adi.HeaderRow.TableSection = TableRowSection.TableHeader; Gridview_adi.UseAccessibleHeader = true; Gridview_adi.FooterRow.TableSection = TableRowSection.TableFooter; |
Örnek kullanımı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
using (MySqlCommand t = new MySqlCommand(sorgu, baglanti)) { t.Parameters.Add("id", Request.QueryString["id"]); using (MySqlDataAdapter adp =new MySqlDataAdapter(t)) { adp.Fill(tablos); hazir_rapor_sonuc_dg.DataSource = tablos; hazir_rapor_sonuc_dg.DataBind(); if (hazir_rapor_sonuc_dg.Rows.Count > 0) { hazir_rapor_sonuc_dg.HeaderRow.TableSection = TableRowSection.TableHeader; hazir_rapor_sonuc_dg.UseAccessibleHeader = true; hazir_rapor_sonuc_dg.FooterRow.TableSection = TableRowSection.TableFooter; } } } |
Html tarafını kodları ise aşağıdaki gibidir
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |
Bu Yazılarıda Okuyabilirsiniz...
Bir cevap yazın