Datatables Selct Filter YADCF MySQL


Multi filtrage sur les colonnes avec le Plugin YADCF

Ce tableau offre plusieurs mode de filtrage dans une colonne donnée.
Ce mode de filtrage n'est pas issue du site officiel de DataTables.
Ce plugin est l'oeuvre de Daniel Reznick (Voir le site), merci à son auteur.
ou ici (Exemple avec DataTables 1.10
Comme vous pourrez le voir plusieurs modes de filtrage sont proposés.

 

Fichiers nécessaires

Voici les fichiers nécessaires pour avoir les modes de filtrage comme sur la démo.

<link href="media/css/chosen.min.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/1.10.9/integration/jqueryui/dataTables.jqueryui.css">">
<link href="https://cdn.datatables.net/colvis/1.1.1/css/dataTables.colVis.css" rel="stylesheet" type="text/css">
<link href="media/css/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="media/js/chosen.jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.9/integration/jqueryui/dataTables.jqueryui.js"></script>"></script>
<script src="https://cdn.datatables.net/colvis/1.1.1/js/dataTables.colVis.min.js"></script>
<script src="media/js/jquery.dataTables.yadcf_0.8.7.js"></script>
<script src="media/js/ui.datepicker-fr.js"></script>

 

Paramètres de chaque colonne

Dans un premier temps il faut savoir que le comptage des colonnes ne démarre pas à 1 mais à 0.

La colonne 0 ne comporte aucun filtre

La colonne 1 mode de filtrage avec slider

La colonne 2 mode de filtrage auto complete, avec le label en français

La colonne 3 est identique à la colonne 2

La colonne 4 mode de filtrage en utilisant le plugin Chosen

Pour avoir simplement un select normal, précisez simplement le default labelSSS

La colonne 5 mode de filtrage avec calendrier DatePicker, on précise le format date correspondant à la table MySQL, sachant qu'il est 0000-00-00, soit aaaa-mm-dd, ici le format est en français, car l'affichage transformé en date française en PHP, à l'origine le DatePicker est en anglais rien ne vous empêche de le mettre en français, avec divers paramètres

La colonne 6 mode de filtrage data avec les valeurs correspond aux valeurs de la table MySQL, le mode de sélection sera (oui ou non).

Paramètres ( ], 'tfoot'); ) à ajouter à la fonction (init) si l'on veut les filtres dans le (tfoot).

Ajout du plugin ( Colvis ) en mode CDN

Paramètres dom pour Colvis
( "dom": 'C<"H"lfr>t<"F"ip>',
"jQueryUI": true,
)

Paramètres des filtres

Paramètres de la fonction ( init ) pour chaques colonnes du plugin yadcf, ces paramètres décrits dans le fichier javascript du plugin.

    yadcf.init(oTable, [
  {
    column_number : 1,  
    filter_type: "range_number_slider" 
  },
  {
        column_number: 2,
        filter_type: "auto_complete",
    filter_default_label: "Saisir un nom"
    },
  {
        column_number: 3,
        filter_type: "auto_complete",
    filter_default_label: "Saisir une service"
    },
  {
        column_number: 4,
    filter_default_label: "Choisir un poste",
    select_type: 'chosen',
        select_type_options: {
        search_contains: true,
    width: '200px'
        }
    },
  {
    column_number: 5,
    filter_type: "date",
    date_format: "dd-mm-yyyy",
    filter_default_label: "Choisir une date"
  },
  {
    column_number : 6, 
    data: ["oui", "non"], 
    filter_default_label: "Selection Oui/Non"
  }
  
  ]);
      

 

Script JavaScript

Le script ci-dessous est assez parlant, notamment par l'ajout de commentaire. Sinon regarder le code source de la démo.
Attention le fichier de langue ne doit pas être inséré comme le paramètres ci-contre ( //"language": { "url": "media/French.json"}), mais vous devez insérer le code entier comme sur le script ci-dessous, sinon cela ne fonctionne pas.

              <script type="text/javascript" class="init">
                  $("div#loader").append('<center><img src="images/loading.gif" alt="chargement..."/></center>');
$(document).ready(function () {
    'use strict';

    var oTable;
    
    oTable = $('#menuTable').DataTable({
        "stateSave": true,
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
    "order": [[ 0, "desc" ]],
    //"dom": 'C<"clear">lfrtip',
    //"language": { "url": "media/French.json"}
    
    "language": {
    "processing":     "Traitement en cours...",
    "search":         "Rechercher :",
    "lengthMenu":     "Afficher _MENU_ éléments",
    "info":           "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
    "infoEmpty":      "Affichage de l'élement 0 à 0 sur 0 éléments",
    "infoFiltered":   "(filtré de _MAX_ éléments au total)",
    "infoPostFix":    "",
    "loadingRecords": "Chargement en cours...",
    "zeroRecords":    "Aucun élément à afficher",
    "emptyTable":     "Aucune donnée disponible dans le tableau",
    "paginate": {
        "first":      "Premier",
        "previous":   "Précédent",
        "next":       "Suivant",
        "last":       "Dernier"
           }
    }
    });//fin datatables
  /**/
  var colvis = new $.fn.dataTable.ColVis( oTable );
  $( colvis.button() ).insertBefore('div.dataTables_filter');//dataTables_length
  
   yadcf.init(oTable, [
    /*{
    column_number : 0
  },*/
  {
    column_number : 1,  
    filter_type: "range_number_slider" 
  },
  {
        column_number: 2,
        filter_type: "auto_complete",
    filter_default_label: "Saisir un nom"
    },
  {
        column_number: 3,
        filter_type: "auto_complete",
    filter_default_label: "Saisir une service"
    },
  {
        column_number: 4,
    filter_default_label: "Choisir un poste",
     /*select_type: 'select2',
    select_type_options: {
            width: '150px'
        }*/
    select_type: 'chosen',
        select_type_options: {
        search_contains: true,
    width: '200px'
        }
    },
  {
    column_number: 5,
    filter_type: "date",
    date_format: "dd-mm-yyyy",
    filter_default_label: "Choisir une date"
  },
  {
    column_number : 6, 
    data: ["oui", "non"], 
    filter_default_label: "Selection Oui/Non",
  }
  
  ]); // parametre ], 'tfoot'); pour avoir les filtres dans le tfoot

  $('a.delete').button({
    icons: { primary: 'ui-icon-trash'  },
    text: false
  });
 
  $('a.edit').button({
    icons: { primary: 'ui-icon-pencil'  },
    text: false
  });
});  //fin ready

              </script>
          

 

Conclusion

Ce plugin est riche et offre une multitude de format de filtrage, qui donne un plus au plugin DataTables, toutefois vous devrez télécharger sur GitHub les fichiers de ce plugin, ainsi que le plugin Chosen.
Le script ci-dessus est un exemple avec des données dynamique MySQL, mais vous devrez adapter tous les paramètres pour chaque colonne de votre table.

Bon dev.