DataTables : Utiliser un champ de recherche personnalisé

January 06, 2016 | about 1 minute read

Petite astuce pour ceux qui utilisent DataTables : il peut s’avérer utile de personnaliser l’interface de notre tableau et des outils proposés par DataTables lorsque la présentation/template par défaut ne nous convient pas.

Dans ce cas on peut soit surcharger les classes CSS appelées par DataTables soit faire sa propre intégration habituelle et spécifier à DataTables d’utiliser tel ou tel élément du DOM pour effectuer telle ou telle action.

Exemple : 1 – On décide de ne pas afficher en CSS les filtres affichés par défaut par DataTables (ici on désactive directement l’affichage de tous les filtres mais si vous ne voulez masquez que le champ de recherche par exemple veuillez précisez son ID DOM directement au lieu de la classe filter).

.dataTables_filter { display: none; }

Pour désactiver juste le champ de recherche vous pouvez aussi très bien le faire en javascript lors de la déclaration de votre datatables :

$(document).ready(function() {
  $('#mon_tableau').DataTable( {
    "searching": false
    // etc ...
  } );
} );

2 – On ajoute un input dans notre template fraichement intégré

<input type="text" class="form-control" placeholder="Recherche ..." id="search_box" >

3 – On précise en javascript à notre DataTables d’utiliser cet input en tant que champ de recherche

// DataTables version 1.10.7 utilisé dans cet article
var dataTable = $('#mon_tableau').DataTable();
 
$("#search_box").on('keyup', function() {
  dataTable.search( this.value ).draw();
});

Originally published at Sois-net.