CODEWITHSUNDEEP
javascriptsearchdatatabledatatablesspecial-characters
Jean Lima
Jean Lima

Reputation: 93

Ignoring special characters in DataTables search

I've built a simple Datatable, with the employee names and the respective departments.

It's working pretty fine, but now I realized that the search is filtering the strings with special character differently.

For example, there are 4 employees named Joao, two of them is registered as João and the other two Joao, without the ã.

How can I ignore that difference to bring up the four of them by typing 'joao'?

I've found a plugin DataTable website, but I can't get it running, I don't know where to put it:

https://datatables.net/plug-ins/filtering/type-based/accent-neutralise

Here is the DataTable construction:

 $('#dataTable').DataTable({
        language:{
            "sEmptyTable": "Nenhum registro encontrado",
            "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
            "sInfoFiltered": "(Filtrados de _MAX_ registros)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": "_MENU_ resultados por página",
            "sLoadingRecords": "Carregando...",
            "sProcessing": "Processando...",
            "sZeroRecords": "Nenhum registro encontrado",
            "sSearch": "Pesquisar",
            "oPaginate": {
                "sNext": "Próximo",
                "sPrevious": "Anterior",
                "sFirst": "Primeiro",
                "sLast": "Último"
            },
            "oAria": {
                "sSortAscending": ": Ordenar colunas de forma ascendente",
                "sSortDescending": ": Ordenar colunas de forma descendente"
            },
            dom:"iptrt",
        }


    });
    $('.dataTables_filter').addClass('pull-left');
    $('.dataTables_filter input').addClass('filter-input');
    $('.dataTables_length').addClass('pull-right');

Upvotes: 1

Views: 1398

Answers (2)

Nick Hope
Nick Hope

Reputation: 177

Simply add the link to the accent-neutralise.js script in your parent script, below the link to the Datatables library itself. For example, if you are loading from the CDN (rather than hosting Datatables locally):

<head>
    <title>My Page with a Datatable</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.11.3/filtering/type-based/accent-neutralise.js"></script>
</head>

To quote from the script's documentation page: "This type based search plug-in replaces the built-in string formatter in DataTables with a function that will replace the accented characters with their unaccented counterparts for fast and easy filtering."

Upvotes: 1

Denys Rusov
Denys Rusov

Reputation: 620

You can normalize the data in the column with accented characters(diacritics) or you may add a hidden column to a table, which is calculated by normalizing a string from existing column with diacritics

const ds = "João";
ds.normalize('NFD').replace(/[\u0300-\u036f]/g, ""); // "Joao"

Upvotes: 1

Related Questions