DataTables’da Türkçe Karakter Arama Sorununa Çözüm

Yazılım Kodu Kanalına Abone Olun

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.

15 Kez Okundu

Yavuz Selim Kart

Yazılım ve veri tabanında bildiklerimi anlatmaya gayret ediyorum. Halen birçok programlama dili üzerinde araştırmalar yaparak kendimi geliştiriyorum. Bunlar haricinde Grafik Tasarım ve Wordpress konularına da ilgim bulunmakta. SEO ve Sosyal medya yönetimleri hakkında da bilgim mevcuttur. Kısaca çok çalışmayı seven azimli biriyim.

You may also like...

Sitedeki yazıları kopyalamak yasaktır.