dt, yadcf, an
Datatables with yadcf and accent neutralise plugins.
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.datatables.net/plug-ins/1.10.12/filtering/type-based/accent-neutralise.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">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="javascript:void(0)">ANNUAIRE MEDIPOLE</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-form navbar-right" role="search">
Rechercher : <input type="text" id="filterbox" class="form-control" placeholder="Rechercher">
</div>
</nav>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<!--<th>Hiérarchie </th>-->
<th> </th>
<th> </th>
<!--<th>Localisation </th>-->
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>CAFAT </td>
<td>CAFAT </td>
<td> </td>
<!--<td> </td>-->
<td class="sorting_1">9930 </td>
<td> </td>
<!--<td> </td>-->
<td> </td>
<td> </td>
<td><a href="mailto:"></a></td>
<td> </td>
</tr><tr role="row" class="even">
<td>Bloc Opératoire </td>
<td>TEST </td>
<td>Olivier </td>
<!--<td> </td>-->
<td class="sorting_1">9999 </td>
...
JavaScript
$(document).ready(function(){
(function(){
function removeAccents ( data ) {
return data
.replace( /έ/g, 'ε' )
.replace( /[ύϋΰ]/g, 'υ' )
.replace( /ό/g, 'ο' )
.replace( /ώ/g, 'ω' )
.replace( /ά/g, 'α' )
.replace( /[ίϊΐ]/g, 'ι' )
.replace( /ή/g, 'η' )
.replace( /\n/g, ' ' )
.replace( /á/g, 'a' )
.replace( /é/g, 'e' )
.replace( /í/g, 'i' )
.replace( /ó/g, 'o' )
.replace( /ú/g, 'u' )
.replace( /ê/g, 'e' )
.replace( /î/g, 'i' )
.replace( /ô/g, 'o' )
.replace( /è/g, 'e' )
.replace( /ï/g, 'i' )
.replace( /ü/g, 'u' )
.replace( /ã/g, 'a' )
.replace( /õ/g, 'o' )
.replace( /ç/g, 'c' )
.replace( /ì/g, 'i' );
}
var searchType = jQuery.fn.DataTable.ext.type.search;
searchType.string = function ( data ) {
return ! data ?
'' :
typeof data === 'string' ?
removeAccents( data ) :
data;
};
searchType.html = function ( data ) {
return ! data ?
'' :
typeof data === 'string' ?
removeAccents( data.replace( /<.*?>/g, '' ) ) :
data;
};
}());
// DataTable
var table = $('#example').DataTable({
"order": [[ 3, "desc" ]],
"bStateSave": false,
"pageLength": 20,
"dom": 'Brtip',
"buttons": [{extend: 'copy', text: 'Copier'}, 'csv', 'excel'],
"language": {
"sProcessing": "Traitement en cours...",
"sSearch": "Rechercher :",
"sLengthMenu": "Afficher _MENU_ éléments",
"sInfo": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
"sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément",
"sInfoFiltered": "(filtré de _MAX_ éléments au total)",
"sInfoPostFix": ...