Datatables buttons MySQL


Boutons d'exportation des données du tableau au format PDF, XLS, CSV et Print et Copy

Le plug-in Buttons HTML5 permet l'exportation les données du tableau au format Pdf, Excel, et CSV.
Deux autres boutons ont été ajoutés permettant de copier l'ensemble dles données du tableau, ou de les imprimer.
Ce plugins remplace le plug-in TableTools cité ci-dessous, ainsi que Colvis.

TableTools : Cette extension a été retiré et a été remplacé par des Boutons et Select pour choisir les extensions. La documentation est conservée pour référence hérité seulement. Les nouveaux projets doivent utiliser Buttons et Select de préférence à TableTools

Dans l'exemple que je présente en démo, plusieurs options sont ajoutées. Notamment le choix de la visibilité des colonnes, les boutons cités ci haut, traduit en Français, ainsi que le message lors de la copie. L'ajout du choix des colonnes à afficher permet de sélectionner la ou les colonnes que l'on veut imprimer, exporter.

Dépendance

L'appel de ces fichiers sont utilisés dans la démo pour DataTables. Ces derniers sont tous utilisés via CDN, que l'on trouve sur le site DataTables.
De plus ce script utilise la dernière version en date la version 1.10.13.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.jqueryui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.jqueryui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script><!-- -->
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.jqueryui.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.jqueryui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.colVis.min.js"></script>

Internationalisation

Ce qui connaissent DataTables savent que l'on peut utiliser un fichier pour traduire dans sa langue, certaine parties du tableau.
Mais, l'appel de ce fichier ne fonctionne pas avec le plug-in Buttons, car cela les désactive.
La solution est de sortir la traduction du fichier Json, et de l'implémenter directement dans le script.

Script JavaScript

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

<script type="text/javascript" class="init">
  $(document).ready(function() {
   $("div#loader").append('<center><img src="images/loading.gif" alt="chargement..."/></center>');
  var table = $('#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 / PDO vous spécifiez un order by desc
    //permet de cacher la colonne 0 soit id
    order: [ 0, 'asc' ],
    lengthChange: false, //liste déroulante désactivée
    buttons: true, 

    language: {
          buttons: {
            copyTitle: 'Copier dans le presse papier',
            copyKeys: 'Appuyez sur <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> pour copier les données de table vers le presse-papiers. 

Pour annuler, cliquez sur ce message ou appuyez sur Echap.', colvis: 'Choix des colonnes' }, //url: 'https://cdn.datatables.net/plug-ins/1.10.13/i18n/French.json'//ne fonctionne pas sinon cela désactive l'affichage des boutons. "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" } }, buttons: [ { extend: 'copyHtml5', text: 'Copier', exportOptions: { columns: ':visible' } }, { extend: 'print', text: 'Imprimer', exportOptions: { columns: ':visible' } //autoPrint: false }, { extend: 'pdfHtml5', text: 'Imprimer au format PDF', exportOptions: { columns: [ 0, 1, 2, 5, 6 ] } }, { extend: 'csvHtml5', text: 'Exporter vers un fichier CSV' }, { extend: 'excelHtml5', text: 'Exporter vers un fichier Excel', exportOptions: { columns: ':visible' } }, 'colvis' ], 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 } ], "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 init complete } );//fin datatable table.buttons().container() .insertBefore( '#menuTable_filter' ); $('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 }); });//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..

            /*icone delete et edit*/
            a.delete, a.edit {padding:6px 1px 6px 1px;}
        

 

Conclusion

L'option de modifier le nom des boutons par un texte plus spécifique, ce fait dans le paramètre ( tableTools ), mais ça je vous laisse chercher.

Bon dev.