Datatables da çoklu sütunda filtreleme yapmak
SanalData’yı Google’da tercih edilen kaynak olarak ekleyin
Harun Kılıçlar
· Güncellendi:
· 1 dk okuma
· 4 okunma
Merhabalar,
Datatables’da normalde tek bir sütunda filtreleme yaparken, aşağıdaki kodlar ile birden fazla sütunda aynı anda hızlı arama yapabilirsiniz.
|
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 143 144 145 146 |
<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 $('#eticaret_raporlama_tbl tfoot th').each(function () { var title = $(this).text(); $(this).html('<input type="text" placeholder="' + title + ' Arama Alanı" />'); }); $('#eticaret_raporlama_tbl').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(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> |
Çıktısı aşağıdaki gibidir
Günün zaman çizelgesi
Haber eklenme saatine göre sıralanır.
Yazar
Harun Kılıçlar
Harun, yazılım geliştirme, web teknolojileri, mobil uygulamalar, veritabanı sistemleri ve yapay zekâ üzerine çalışan bir teknoloji editörüdür. SanalData’nın kurucusu olarak yazılım, yapay zekâ, mobil teknolojiler ve teknoloji sektöründeki gelişmeleri izler ve değerlendirir.