Datatables Reset filter search et class API MySQL


Reset de la zone de recherche et recherche avec la classe API

Dans un tableau DataTables il y a une zone de recherche en haut à droite du tableau.
Toutefois, lorsque nous effectuons une recherche sur une donnée type, il faut vider manuellement cette zone de recherche pour retrouver un tableau normal.

Aprés le commentaire (//fin datatable) dans le script ci-dessous, nous avons la fonction qui permet de faire un reset de cette zone, et en dessous le script du bouton, agrémenté avec une icône JQuery UI.
Placer cette icône à coté de la zone de recherche n'est pas aisé, il faut via CSS modifier le positionnement de cette zone, dont vous avez le code plus bas.
Puis créer le bouton icone et la placer.
L'astuce que j'ai trouvé est de placer ce bouton comme vous pouvez le voir ci-dessous, puis de la positionner via CSS, dont vous avez le code plus bas.
Cependant le positionnement de cette icône, dépend de sa largeur, alors le code CSS doit être modifié selon votre tableau.

            <tfoot>
                <tr>
                <th>ID</th>
                <th>Matricule</th>
                <th>Nom</th>
                <th>Service</th>
                <th>Poste</th>
                <th>Date</th>
                <th>Membre</th>
                <th>Action</th>
               </tr>
           </tfoot>
        

Classe API

Cette classe API, vous ne la trouverez pas sur le site officiel, puisque c'est moi qui l'ait inventé.
Cette fonctionnalité permet de cliquer sur un item d'une colonne et le tableau se filtre avec cet item cliqué.
Quand on regarde dans le script ci-dessous, dans la fonction ( initComplete ), on y voit (api.$('td.api'). Pourquoi ?
Tout simplement que si on laisse la balise (td) telle qu'elle, c'est toutes les colonnes qui sont affectées, tandis que la, si on applique cette classe comme ceci ( <td class="api"><?php echo $datas['POSTE']; ?></td> ),
il n'y aura que cette colonne qui sera affectée, sinon c'est toutes les colonnes, et franchement je vois mal cliquer sur une icône de la zone ( Action ) ayant cette fonctionnalité, voilà pourquoi j'ai inventé cette classe API.

Script JavaScript

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

              <script type="text/javascript" class="init">
                  $("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, "desc" ]],//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": false,//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();
                          } );
                      }
                  } );//fin datatable
                  
                  $('button.btn').click(function() {//vidage de la zone de recherche
                      $('input[type=search]').val('');
                      oTable.fnFilter('');
                  } );
              
                  $("button.btn" ).button({//bouton de vidage de la zone de recherche
                      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
                  });
               });//fin ready

              </script>
          

Placement des icônes

La position de l'icône à coté de la zone de recherche qui doit être retouché en css afin de la déplacer sur la gauche pour laisser la place à l'icône.
Il suffit ensuite de placer ce code ($('.ui-corner-tr').prepend($('.toolc'));//ajout icone header) dans la fonction (fnDrawCallback).
De placer ensuite votre bouton dans la zone (body) (<div class="toolc"><button class="btn">Reset</button></div>).
Le bouton ayant la classe (btn) aura l'icône (refresh) définie dans le script.

      /*repositionnemet de la zone de recherche*/
            .dataTables_wrapper .dataTables_filter {
              float: right;
              text-align: right;
              margin-right:30px;
            }
            /*icone delete et edit*/
            a.delete, a.edit {padding:6px 1px 6px 1px;}
            
            /*mise en forme des input text*/
            thead input[type=text] {
                margin: 0;
                width: 80%;
                color: #444;
                padding: 2px;
                background: #fff url(images/search.png) no-repeat right;
                border: none;
                -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
            }
            .filters{background-color:#c0c1c1;}

        

 

Conclusion

L'option d'ajouter cette icône à la zone de recherche permet une manipulation plus aisé de cette zone de recherche en la vidant par un simple bouton.

Bon dev.