Datatables Filter Select MySQL


Filtrage des colonnes avec des select

Dans un tableau DataTables mise à part le tri par défaut des colonnes, nous pouvons pour toutes les colonnes ou certaines colonnes effectuer via un select (liste déroulante) un filtrage des données.
Toutefois, les différents blocs de scripts doivent être positionné dans un ordre précis, et ceci notamment pour la fonction ( button() ) de JQuery si vous souhaitez utiliser des liens avec des icônes de JQuery UI.
Sinon ces fonctions n'auront aucun effet, sur vos liens et les icônes ne seront pas visible dans le tableau.

Vous pourrez utiliser ce système avec n'importe qu'elle table MySQL.
Concernant la structure du tableau elle ne change pas.
Sauf qu'il faut la balise (tfoot) contenant les balises (th) soit identiques au contenant de la balise (thead).

Script JavaScript

Le script ci-dessous est assez parlant, notamment par l'ajout de commentaire.

              <script type="text/javascript" class="init">
                  $(document).ready(function() {
                    $("div#loader").append('<center><img src="images/loading.gif" alt="chargement..."/></center>');
                    oTable = $('#menuTable').DataTable( {
                        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
                        "order": [[ 0, "asc" ]],//les colonnes parte de 0 à x
                        //on dit que la colonne 0 sera desc, si vous omettez ce parametre les données s'afficheront asc
                        //même si dans la requete SQL vous spécifiez un order by desc
                        //permet de cacher la colonne 0 soit id
                        "columnDefs": [
                            {
                                "targets": [ 0 ],//on spécifie le numéro de colonne
                                "visible": true,//on spécifie quelle sera cachée
                                "searchable": false//on spécifie quelle ne sera pas utilisée pour la recherche
                            }
                        ],
                        "language": { "url": "https://cdn.datatables.net/plug-ins/1.10.9/i18n/French.json"},
                        //"language": { "Url": "../js/fr_FR.txt" },
                        "fnDrawCallback": function() {
                            $(this).show();
                            $('div#loader').hide();
                            $(this).show().css('width', '100%');
                        },
                        "initComplete": function () {
                            var api = this.api();
                            /**/
                            api.$('td.api').click( function () {
                                api.search( this.innerHTML ).draw();
                            } );
                            
                // application des selects aux colonnes      
                            api.columns([3,4]).indexes().flatten().each( function ( i ) {
                                var column = api.column( i );
                                var select = $('<select><option value=""> Filtrer par </option></select>')
                                    .appendTo( $(column.footer()).empty() )
                                    .on( 'change', function () {
                                        var val = $.fn.dataTable.util.escapeRegex(
                                            $(this).val()
                                            //$('#menuTable tfoot th').html( ' <button id="btnClear">Reset</button>' )
                                        );
                 
                                        column
                                            .search( val ? '^'+val+'$' : '', true, false )
                                            .draw();
                                    } );
                 
                                column.data().unique().sort().each( function ( d, j ) {
                                    select.append( '<option value="'+d+'">'+d+'</option>' )
                                } );
                            } );
                //fin application des select
                        }//fin init complete
                    } );//fin datatable  
                
                    $('button.btn').click(function() {
                        $('input[type=search]').val('');
                        oTable.fnFilter('');
                    } );
                
                    $("button.btn" ).button({
                        icons: { primary: 'ui-icon-refresh' },
                        text: false
                    });
                
                    $('a.delete').button({
                        icons: { primary: 'ui-icon-trash'  },
                        text: false
                    });
                 
                    $('a.edit').button({
                        icons: { primary: 'ui-icon-pencil'  },
                        text: false
                    });
                    
                      $('button#btnClear').click( function() { // vide les champs et reload la table
                       $('#menuTable tfoot select').val('');
                      oTable
                           .columns()
                           .search( '' )
                           .draw();
                      }) ;  
                    
                    $("button#btnClear" ).button({
                        icons: { primary: 'ui-icon-refresh' },
                        text: false
                    });
                
                 });//fin ready

              </script>
          

Placement des icônes en css

Ces classes CSS sont valables pour toutes les tableaux montrés en démo, toutefois la position de l'icône à coté de la zone de recherche dépend de la largeur de votre tableau, ce qui veut dire aussi repositionnement de la zone de recherche..

      /*repositionnemet de la zone de recherche*/
            .dataTables_wrapper .dataTables_filter {
              float: right;
              text-align: right;
              margin-right:30px;
            }
            .toolbar{/*select input*/
              position:absolute;
              top:8px;
              left:1310px;
            }
            .toolbar2{/*drag and drop, filter tfoot, filter thead*/
              position:absolute;
              top:8px;
              left:1300px;
            }
            /*icone delete et edit*/
            a.delete, a.edit {padding:6px 1px 6px 1px;}
        

 

Conclusion

L'option d'ajouter des selects à certaines colonnes se font dans ce paramètres ( api.columns([3,4]) ), tout en sachant encore une fois que les colonnes commencent par 0..

Bon dev.