web-dev-qa-db-fra.com

Ajout d'un bouton à la barre d'outils avec jQuery DataTables

J'essaie d'ajouter un bouton à ma barre d'outils de mon datatable . Donc, mon datatable est:

var dataTable =  $('#employee-grid').DataTable(
{
    processing: true,
    serverSide: true,
    ajax: "employee-grid-data.php", // json datasource for AJAX Data

    "pagingType": "full_numbers",   //Adding Last and First in Pagination
    stateSave: true,
    "language":{                    //Custom Message Setting
                    "lengthMenu": "Display _MENU_ records per page",    //Customizing menu Text
                    "zeroRecords": "Nothing found - sorry",             //Customizing zero record text - filtered
                    "info": "Showing page _PAGE_ of _PAGES_",           //Customizing showing record no
                    "infoEmpty": "No records available",                //Customizing zero record message - base
                    "infoFiltered": "(filtered from _MAX_ total records)"   //Customizing filtered message
                },
    "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],        //For customizing number of data sets per page

});

Et ce que j'ai fait est comme ça:

    $(document).ready(function()
    {
        var dataTable =  $('#employee-grid').DataTable(
        {
            processing: true,
            serverSide: true,
            ajax: "employee-grid-data.php", // json datasource for AJAX Data

            "pagingType": "full_numbers",   //Adding Last and First in Pagination
            stateSave: true,
            "language":{                    //Custom Message Setting
                            "lengthMenu": "Display _MENU_ records per page",    //Customizing menu Text
                            "zeroRecords": "Nothing found - sorry",             //Customizing zero record text - filtered
                            "info": "Showing page _PAGE_ of _PAGES_",           //Customizing showing record no
                            "infoEmpty": "No records available",                //Customizing zero record message - base
                            "infoFiltered": "(filtered from _MAX_ total records)"   //Customizing filtered message
                        },
            "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],        //For customizing number of data sets per page
            "dom": '<"toolbar">frtip'
        });

        $("div.toolbar").html('<button type="button" id="any_button">Click Me!</button>');
    } );

Mais je trouve quelque chose comme ça:

 enter image description here

Mais j'aime avoir quelque chose comme ça-

 enter image description here

Quelqu'un peut-il aider s'il vous plait?

jquerydatatables
5
Abrar Jahin

SOLUTION

Utilisez le code ci-dessous:

JavaScript :

var table = $('#example').DataTable({
   // ... skipped ...
   dom: 'l<"toolbar">frtip',
   initComplete: function(){
      $("div.toolbar")
         .html('<button type="button" id="any_button">Click Me!</button>');           
   }       
});

CSS:

.toolbar {
    float:left;
}

DEMO

Voir this jsFiddle pour le code et la démonstration.

22
Gyrocode.com

Vous pouvez également utiliser datatable button.js. Voici le lien source:

https://datatables.net/extensions/buttons/examples/initialisation/custom.html

N'oubliez pas d'ajouter les bibliothèques ci-dessous (comme indiqué dans l'URL ci-dessus)

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.jshttps://cdn.datatables.net/buttons/1.5.2/ js/dataTables.buttons.min.js

1
Jai Gupta