JSFiddle - React, Tailwind, and code Playground

Datatables with yadcf accent for both way é e

by Martin Murciego

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<script src="https://cdn.jsdelivr.net/yadcf/0.8.9/jquery.dataTables.yadcf.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/yadcf/0.8.9/jquery.dataTables.yadcf.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Country</th>
      <th>Company</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ändrew Smith</td>
      <td>Canada</td>
      <td>Andrew Sóuth</td>
    </tr>
    <tr>
      <td>Benjamin TÜV</td>
      <td>Austria</td>
      <td>Benjamin SÖL</td>
    </tr>
    <tr>
      <td>Carl TUV</td>
      <td>Switzerland</td>
      <td>Carl SOL</td>
    </tr>
    <tr>
      <td><a href="javascript:void(0)">Donald Tüv</a></td>
      <td>Germany</td>
      <td><a href="javascript:void(0)">Donald Söl</a></td>
    </tr>
    <tr>
      <td>Éric</td>
      <td>Belgium</td>
      <td>Godiva</td>
    </tr>
    <tr>
      <td>Eric Jones</td>
      <td>Canada</td>
      <td>Frank Jackson</td>
    </tr>
  </tbody>
</table>

JavaScript

(function() {
  var _div = document.createElement('div');
  jQuery.fn.dataTable.ext.type.search.html = function(data) {
    _div.innerHTML = data;
    return _div.textContent ?
      _div.textContent
        .replace(/[áÁàÀâÂäÄãÃåÅæÆ]/g, 'a')
        .replace(/[çÇ]/g, 'c')
        .replace(/[éÉèÈêÊëË]/g, 'e')
        .replace(/[íÍìÌîÎïÏîĩĨĬĭ]/g, 'i')
        .replace(/[ñÑ]/g, 'n')
        .replace(/[óÓòÒôÔöÖœŒ]/g, 'o')
        .replace(/[ß]/g, 's')
        .replace(/[úÚùÙûÛüÜ]/g, 'u')
        .replace(/[ýÝŷŶŸÿ]/g, 'n') :
      _div.innerText.replace(/[üÜ]/g, 'u')
        .replace(/[áÁàÀâÂäÄãÃåÅæÆ]/g, 'a')
        .replace(/[çÇ]/g, 'c')
        .replace(/[éÉèÈêÊëË]/g, 'e')
        .replace(/[íÍìÌîÎïÏîĩĨĬĭ]/g, 'i')
        .replace(/[ñÑ]/g, 'n')
        .replace(/[óÓòÒôÔöÖœŒ]/g, 'o')
        .replace(/[ß]/g, 's')
        .replace(/[úÚùÙûÛüÜ]/g, 'u')
        .replace(/[ýÝŷŶŸÿ]/g, 'n');
  };
})();

$(document).ready(function() {
  var oTable = $('#example').DataTable({
    "columnDefs": [{
      "type": "html",
      "targets": '_all'
    }]
  });
 // Remove accented character from search input as well
    $('#example_filter input[type=search]').keyup( function () {
        var table = $('#example').DataTable(); 
        table.search(
            jQuery.fn.DataTable.ext.type.search.html(this.value)
        ).draw();
    } );
});