DataTables’da Türkçe Karakter Arama Sorununa Çözüm
DataTables'da Türkçe Karakter Arama Sorununa Çözüm
Herkese merhaba,
Bu yazıda DataTables’da Türkçe karakter arama sorununa çözüm ile ilgili bilgi vermeye çalışacağım.
DataTables eklentisinde Türkçe karakter arama sorunu ile karşılaşmış olabilirsiniz. Filtreleme işlemi sırasında Türkçe karakter sorunları yaşanabilmektedir. Özellikle “İ”,i” ve “I”,”ı” aramalarında istenen sonuç alınamamaktadır.
Aşağıdaki kodlar yardımıyla siz de bu işlemi rahatlıkla yapabilirsiniz.
HTML Kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTables'da Türkçe Karakter Arama Sorununa Çözüm</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" />
</head>
<body>
<div class="container mt-5">
<table class="table table-striped" id="testTable">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Ad</th>
<th scope="col">Soyad</th>
<th scope="col">Yaş</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Yavuz Selim</td>
<td>Kart</td>
<td>36</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Hasan Ali</td>
<td>Kart</td>
<td>35</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Bilge Nuray</td>
<td>Kart</td>
<td>21</td>
</tr>
<tr>
<th scope="row">3</th>
<td>İbrahim</td>
<td>Güney</td>
<td>42</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Işık</td>
<td>Güney</td>
<td>85</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Çetin</td>
<td>Güney</td>
<td>32</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Öznur</td>
<td>Güney</td>
<td>28</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cihan</td>
<td>Güney</td>
<td>59</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Armağan</td>
<td>Güney</td>
<td>16</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ümit</td>
<td>Güney</td>
<td>43</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ümit</td>
<td>karık</td>
<td>43</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
</body>
</html>JAVASCRIPT Kodu
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
'locale-compare-asc': function(a, b) {
return a.localeCompare(b, 'cs', {
sensitivity: 'case'
})
},
'locale-compare-desc': function(a, b) {
return b.localeCompare(a, 'cs', {
sensitivity: 'case'
})
}
})
jQuery.fn.dataTable.ext.type.search['locale-compare'] = function(data) {
return TurkishCharacter(data);
}
function TurkishCharacter(data) {
return !data ?
'' :
typeof data === 'string' ?
data
.replace(/\n/g, ' ')
.replace(/[çÇ]/g, 'ç')
.replace(/[ğĞ]/g, 'ğ')
.replace(/[iİ]/g, 'i')
.replace(/[şŞ]/g, 'ş')
.replace(/[üÜ]/g, 'ü')
.replace(/[öÖ]/g, 'ö')
.replace(/[ıI]/g, 'ı') :
data
}
var table = $('#testTable').DataTable({
columnDefs: [{
targets: 1,
type: 'locale-compare'
}, ]
})
$('#testTable input').keyup(function() {
table
.search(
jQuery.fn.dataTable.ext.type.search.string(TurkishCharacter(this.value))
)
.draw()
})Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.
