Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding a button to toolbar with jQuery DataTables

I am trying to add a button to my toolbar of my datatable. So, my datatable is:

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

});

And what I have done is like this:

    $(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>');
    } );

But I am finding something like this:

enter image description here

But I like to have something like this-

enter image description here

Can anyone please help?

like image 590
Abrar Jahin Avatar asked Sep 13 '15 13:09

Abrar Jahin


People also ask

Can we add button in DataTable?

In DataTables As part of the DataTables constructor, the buttons option can be given as an array of the buttons you wish to show - this is typically just the button name, although you can provide options to customise the button's actions: $('#myTable'). DataTable( { buttons: [ 'copy', 'excel', 'pdf' ] } );

What is dom DataTable?

Description. DataTables will add a number of elements around the table to both control the table and show additional information about it. The position of these elements on screen are controlled by a combination of their order in the document (DOM) and the CSS applied to the elements.


2 Answers

SOLUTION

Use the code below:

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

See this jsFiddle for code and demonstration.

like image 164
Gyrocode.com Avatar answered Oct 23 '22 23:10

Gyrocode.com


You can also use datatable button.js. Here is the source link:

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

Don't forget to add below libraries (as mentioned in the above URL)

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

like image 1
Jai Gupta Avatar answered Oct 23 '22 21:10

Jai Gupta