DataTables style header

Introduction

Dans un tableau DataTables et notamment dans le header il n'y a que la liste déroulante pour le nombre d'éléments par page, et le champ de recherche.

Il est assez difficile d'ajouter d'autres élements, comme par exemple un select, un autre champ texte, ou lien etc.

Présentation

Comme le montre ces deux images ci-dessous, j'ai intégré dans le header un select qui permet de choisir un dossier et d'y afficher les fichiers qu'il contient.

Dans la seconde j'ai intégré un bouton qui permet le reset du champ de recherche, ce bouton est stylisé avec une icône JQuery UI avec la fonction button() de JQuery.

presentation

presentation

 

Qund on utilise ce genre de tableau comme ici utilisant un thème JQuery UI, je me suis rendu compte que le header et le footer était les mêmes au point de vue style.

est bien ce n'est pas le cas du tout, car si on ne connait pas la structure d'un tableau DataTables, lorsque l'on ajoutera ces éléments dans le header, il le seront aussi dans le footer.
Pour ce faire je vais montrer cette structure et regarderais si vous y voyez une différence. Pour moi il y en a une.
Regarder les lignes de 1 à 5 et les lignes de 19 à 29.
Si vous voyez pas, je vous dirais après.

            <div id="menuTable_wrapper" class="dataTables_wrapper dt-jqueryui">
                <div class="fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr">
                    <div class="dataTables_length" id="menuTable_length"><label>Afficher <select name="menuTable_length" aria-controls="menuTable" class=""><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="-1">Tous</option></select> éléments</label></div>
                    <div id="menuTable_filter" class="dataTables_filter"><label>Rechercher :<input class="" placeholder="" aria-controls="menuTable" type="search"></label></div>
                </div>
                
                <table class="display dataTable" id="menuTable" role="grid" aria-describedby="menuTable_info" style="width: 100%;" cellspacing="0" cellpadding="0" border="0" width="100%">
                <thead>
                
                </thead>
                <tbody>
            
                </tbody>
                <tfoot>
                    <tr><th class="ui-state-default" rowspan="1" colspan="1">ID</th></tr>
               </tfoot>
               </table>
               
                <div class="fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br">
                <div class="dataTables_info" id="menuTable_info" role="status" aria-live="polite">Affichage de l'élément 1 à 10 sur 23 éléments</div>
                <div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_simple_numbers" id="menuTable_paginate">
                    <a class="fg-button ui-button ui-state-default previous ui-state-disabled" aria-controls="menuTable" data-dt-idx="0" tabindex="0" id="menuTable_previous">Précédent</a>
                    <span><a class="fg-button ui-button ui-state-default ui-state-disabled" aria-controls="menuTable" data-dt-idx="1" tabindex="0">1</a>
                    <a class="fg-button ui-button ui-state-default " aria-controls="menuTable" data-dt-idx="2" tabindex="0">2</a>
                    <a class="fg-button ui-button ui-state-default " aria-controls="menuTable" data-dt-idx="3" tabindex="0">3</a>
                    </span>
                    <a class="fg-button ui-button ui-state-default next" aria-controls="menuTable" data-dt-idx="4" tabindex="0" id="menuTable_next">Suivant</a>
                </div>
                </div>
            </div>
        

Code JavaScript tableau DataTables

Le code ci-dessous intégre la fonction fnDrawCallback (Cette fonction est appelée sur chaque événement 'draw', et vous permet de modifier dynamiquement n'importe quel aspect que vous voulez sur le DOM créé).
Nous y voyons dans cette fonction (ligne 14) que nous utiliserons la classe (ui-corner-tr) pour le header et celui du footer porte la classe (ui-corner-br). Voilà la différence entre le header et le footer d'un tableau DataTables avec JQuery UI.

            <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"]],
                    "lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "Tous"]],
                    //"order": [[ 0, "asc" ]],//les colonnes parte de 0 a x
                    "language": { "url": "https://cdn.datatables.net/plug-ins/1.10.12/i18n/French.json"},
            
                    "fnDrawCallback": function() {
                        $(this).show();
                        $('div#loader').hide();
                        $(this).show().css('width', '100%');
                        $('.ui-corner-tr').prepend($('.toolb'));//ajout icone header
                    },
                    "initComplete": function () {
                        var api = this.api();
                        api.$('td.api').click( function () {
                            api.search( this.innerHTML ).draw();
                        } );
                    }
                } );//fin datatable
            });//fin ready
            </script>
        

Création d'un élément

Pour l'icône à coté du champ de recherche, ajoutez ceci dans le body de votre page (<div class="toolb"><button class="btn">Reset</button></div>).
La classe (toolb) est aussi employé pour l'intégration du select dans le header), voir lien plus bas
Puis ajouter ce bout de code après ( });//fin datatable ).

Code JavaScript

Ce script, intéragie avec le bouton/icone permettant le reset du champ de recherche.
Si vous souhaitez effectuer une ou des recherches sur une ou plusieurs colonnes, ajouter au <td> ceci <td class="api">

            $('button.btn').click(function() {
                $('input[type=search]').val('');
                oTable.fnFilter('');
            } );
        
            $("button.btn" ).button({
                icons: { primary: 'ui-icon-refresh' },
                text: false
            });
        

Pour le select je vous renvoie au tutoriel (datatable dropdown

Les fichiers

Conclusion

Je vous ai présenté ma méthode ici, mais en ce qui concerne l'ajout d'élément avec la méthode du site DataTable.net, cela ne fonctionne pas avec l'utilisation d'un thème JQuery UI, sans oui, cette façon de faire (que j'ai longtemps cherché) permet de se passer de l'utilisation du paramètre ("sDom": 'l<"H"Rf>t<"F"ip>',) et de ("jQueryUI": true,).
Dans le cas contraire, si on n'utilise pas de thème, il faut utiliser le paramètre (sDom) comme stipuler dans la doc du site.

Bon dev