I have a jquery datatablejs. I list items. I want to search something in search. But when i enter İ it finds only İ chars. I want to find also i chars. Like I-ı Ü-ü.

I searched lots of sites/docs but find anything.

This link below defines turkish chars for sorting. Can we use this for searching? Other problem is or we can say my constraint is I can't change datatable's original data. I can't replace İ to i or i to İ.

Note: I am getting data with ajax from mvc controller. I do not get json data. I get model object.

I have a jquery datatablejs. I list items. I want to search something in search. But when i enter İ it finds only İ chars. I want to find also i chars. Like I-ı Ü-ü.

I searched lots of sites/docs but find anything.

This link below defines turkish chars for sorting. Can we use this for searching? Other problem is or we can say my constraint is I can't change datatable's original data. I can't replace İ to i or i to İ.

https://datatables/plug-ins/sorting/turkish-string

Note: I am getting data with ajax from mvc controller. I do not get json data. I get model object.

• javascript
• html
• jquery
• model-view-controller
• datatables

5 Answers 5

Change Encoding of the file to UTF-8 and retype characters and save. test it.
[ { "Numara": "şükrü yağcı", "Ad": "5505" }, { "Numara": "şamil öndüş", "Ad": "6655" }, {

You can use the following plug-in provided by DataTables:

Diacritics Neutralize

This can be included in your HTML page as follows:

https://cdn.datatables/plug-ins/1.10.21/filtering/type-based/diacritics-neutralise.js

However, to use this plug-in effectively for your requirement, there are some extra steps needed, so that the data changes are effectively invisible to the user.

Overview

1. Add a hidden, but searchable, extra column to your data table. This column will contain "normalized" versions (explained below) of all of the text from the other columns in the table. You only need to store a word in this column if its normalized form is different from the original un-normalized form.

2. Add a customized search function which performs the same normalization process on search terms entered by the user.

This means that any search for i or I or İ can be made by a user - and it will successfully find any rows containing any one of these characters.

The key part here is that we apply the exact same normalization process to the table data and to the search data.

Handling the Table Data

If you have full control over the data to be displayed in the table, you can perform step (1) before you send the data to the data table. You just need to define the column as hidden:

"columnDefs": [
  {
    "targets": [ -1 ], // -1 refers to the final column in the table
    "visible": false,
    "searchable": true
  }
]

This requires you to have the equivalent server-side function as the one provided by the "diacritics-neutralize" function we will be using. If that is not an option, you may prefer to use a function to process the data in the table itself:

"columnDefs": [
  {
    "targets": [ -1 ], // -1 refers to the final column in the table
    "visible": false,
    "searchable": true,
    "data": function ( row, type, val, meta ) {
      return normalizeTableData( row ); // see below!
    }
  }
]

Handling the Search Term

To normalize the search term, we can use the following DataTables search function:

$('#example_filter input').off().keyup(function () {
  var normString = normalizeString( this.value ); // see below!
  table.search(normString).draw();
});

This assumes our HTML table has an ID of "example".

Performing the Normalization

The function is used as follows:

var normString = jQuery.fn.DataTable.ext.type.search.string(inputString);

If you take a look at the JavaScript for this function, you will see it contains many mappings - for example:

{'base':'I', 'letters':/[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g}

The Turkish capital letter for I is İ, which has a Unicode value of u0130. You can see this is listed as one of the characters which is mapped to I in the provided mapping.

So, our normalizeString function is simply:

function normalizeString(inputString) {
  return jQuery.fn.DataTable.ext.type.search.string(inputString);
}

For the table data, the processing depends on whether data is provided as objects {...} or arrays [...]. I will assume arrays - but the iteration will be different for objects, of course:

function normalizeTableData( row ) {
    var normalizedData = '';
    row.forEach(function (item) {
      var new = normalizeString( item );
      if ( new !== item ) {
        normalizedData = normalizedData + ' ' + new;
      }
    });
    return normalizedData;
}

You may need to enhance the above iteration, depending on the types of data in your table (e.g. numeric data values, which cannot be normalized).

I found a solution and it work without any problem.

Here is the solution:

I call this function:

https://jsfiddle/s39o8pdu/1/

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
  'locale-pare-asc': function ( a, b ) {
     return a.localeCompare(b, 'cs', { sensitivity: 'case' })
  },
  'locale-pare-desc': function ( a, b ) {
     return b.localeCompare(a, 'cs', { sensitivity: 'case' })
  }
})

jQuery.fn.dataTable.ext.type.search['locale-pare'] = function (data) {
    return NeutralizeAccent(data);
}

function NeutralizeAccent(data)
{
  return !data
      ? ''
        : typeof data === 'string'
        ? data
        .replace(/\n/g, ' ')
        .replace(/[éÉěĚèêëÈÊË]/g, 'e')
        .replace(/[šŠ]/g, 's')
        .replace(/[čČçÇ]/g, 'c')
        .replace(/[řŘ]/g, 'r')
        .replace(/[žŽ]/g, 'z')
        .replace(/[ýÝ]/g, 'y')
        .replace(/[áÁâàÂÀ]/g, 'a')
        .replace(/[íÍîïÎİÏ]/g, 'i')
        .replace(/[ťŤ]/g, 't')
        .replace(/[ďĎ]/g, 'd')
        .replace(/[ňŇ]/g, 'n')
        .replace(/[óÓ]/g, 'o')
        .replace(/[úÚůŮ]/g, 'u')
        : data
}

var table = $('#example').DataTable({
    columnDefs : [
     { targets: 0, type: 'locale-pare' },
  ]
})

 $('#example_filter input').keyup(function () {
    table
    .search(
      jQuery.fn.dataTable.ext.type.search.string(NeutralizeAccent(this.value))
    )
    .draw()
 })
 

So good luck who has this problem. If you have any problem ask me. I know how to solve this problem now.

Like andrewjames said on the answers we solve this problem with Accent neutralise.

you can try this code to replace

   $("input[type='search']").keyup(function () {
            var charMap = {
                Ç: 'C',
                Ö: 'O',
                Ş: 'S',
                İ: 'I',
                I: 'i',
                Ü: 'U',
                Ğ: 'G',
                ç: 'c',
                ö: 'o',
                ş: 's',
                ı: 'i',
                ü: 'u',
                ğ: 'g'
            };

            var str = $("input[type='search']").val();
            str_array = str.split('');

            for (var i = 0, len = str_array.length; i < len; i++) {
                str_array[i] = charMap[str_array[i]] || str_array[i];
            }

            str = str_array.join('');

            var clearStr = str.replace(" ", "").replace("-", "").replace(/[^a-z0-9-.çöşüğı]/gi, "");


            $("input[type='search']").val(clearStr);

        });

Try this. It solves the problem even in Vue 3.

jQuery.fn.DataTable.ext.type.search.string = function (sVal) {
var letters = { "İ": "i", "I": "ı","i": "İ", "ı": "I" };
return sVal.replace(/(([İI]))/g, function (letter) { return letters[letter]; });};