DataTables / SearchBuilder: prevent replacing symbols: Ё > Е, Й > И

In DataTables SearchBuilder requests replaces some symbols like:

Ё > Е
Й > И

Is there a way to fix it?

For columns tried to set columns.type = 'string-utf8'

For columns tried to set columns.searchBuilderType = 'html'

In SearchBuilder field insert: чёрный

But in requests it still replaces to: черныи

For both columns.searchBuilderType: string and html

part of POST BODY:

searchBuilder[criteria][0][condition]: starts
searchBuilder[criteria][0][data]: Цвет
searchBuilder[criteria][0][origData]: color
searchBuilder[criteria][0][type]: html
searchBuilder[criteria][0][value][]: черныи
searchBuilder[criteria][0][value1]: черныи
searchBuilder[logic]: AND

And table.search works good, without replaces of symbols

Solution

Assuming you are using the latest major version (2.0 and more recent), then you can use the following:

DataTable.util.diacritics(d => d);

Just add this to your DataTable initialization code (example provided below).

By default, DataTables v2.0+ removes diacritics (including accents) from your search terms. The above line deactivates this default behavior. This applies to DataTables with and without SearchBuilder.

This is officially documented here:

When searching in DataTables we provide the ability to search for words which have accented characters without typing the accent. For example searching for Desiree would match Désirée.

(This also means you can search for unaccented words even when you do provide accents.)

The documentation also adds:

If you wish to disable the diacritic normalisation that DataTables uses, you can do so by giving this method a function that simply returns the original input.

This is what the above line of code does.

Try searching for tiger and tigér in the following basic example (a) with the diacritics() function; and (b) with that line commented out:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://cdn.datatables.net/2.3.2/js/dataTables.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.2/css/dataTables.dataTables.css">

  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

</div>

<script>

$(document).ready(function() {

  // this disables search term normalization:
  DataTable.util.diacritics(d => d);

  new DataTable('#example', {
  });

});

</script>


</body>
</html>

If you are using a pre-2.0 version of DataTables then we need a mre.

If the above code does not fix your issue, then we also need a mre.