Jquery ile sayfada oluşturulan tablodaki verileri kolayca filtrelemek mümkündür. Bu filtreleme işlemi sırasında Türkçe karakter sorunları yaşanabilmektedir. Özellikle “İ”,i” ve “I”,”ı” yazımlarında istenen sonuç alınamamaktadır. Örnekolarak tabloda “İstanbul” olarak kayıtlı veri filtrelenmek istendiğinde arama kutusuna küçük harflerle “istanbul” yazıldığında veri filtreleme işlemi istenildiği gibi olmamaktadır. Bu işlemle ilgili çeşitli çözüm yolları vardır.
Bu yazıda DataTable 1.10.xx sürümü için uygulayabileceğiniz Türkçe karakterler ile (İ,ı,Ğ,ğ) büyük küçük harf duyarlılığı olmadan arama işleminin nasıl yapılacağını göreceksiniz.
Alttaki kodları kopyalayarak çalışmasını inceleyebilirsiniz. DataTables eklentisi için CDN kodları, HTML tablo yapısı ve arama işleminin nasıl yapıldığını gösteren kodlar:
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script> </head> <body> <table id="tablo" class="display" style="width:100%"> <thead> <tr> <th>Ad Soyad</th> <th>Görev</th> <th>Telefon</th> <th>Şehir</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>33645654645</td> <td>İstanbul</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>886785556</td> <td>Isparta</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>632455657</td> <td>Şanlıurfa</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>89453232</td> <td>İzmir</td> </tr> <tr> <td>Cedric Kelly</td> <td>System Architect</td> <td>33645654645</td> <td>İstanbul</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>89453232</td> <td>İzmir</td> </tr> </tbody> </table> <script> $(document).ready(function() { jQuery.fn.DataTable.ext.type.search.string = function(data) { var testd = !data ? '' : typeof data === 'string' ? data .replace(/i/g, 'İ') .replace(/ı/g, 'I') : data; return testd; }; var table = $('#tablo').DataTable({ pageLength:25 }); $('#tablo_filter input').keyup(function() { table .search( jQuery.fn.DataTable.ext.type.search.string(this.value) ) .draw(); }); } ); </script> </body> </html> |
Add comment