Adding a button to toolbar with jQuery DataTables

Question

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:

But I like to have something like this-

Can anyone please help?

Could you edit your question to point out what's different about the two screenshots? — Kenster
– Kenster, Commented Sep 13, 2015 at 13:11

Gyrocode.com · Accepted Answer · 2016-11-24 17:05:46Z

33

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.

edited Nov 24, 2016 at 17:05

answered Sep 13, 2015 at 13:29

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

S M Abrar Jahin Over a year ago

Thank u very much friend :)

Popsyjunior Over a year ago

I'm surprised that I couldn't find the 'initComplete' event in the documentation though

TomNash Over a year ago

Button appears but isn't clickable, had to modify the CSS to change position and z-index

Isuru Dilshan Over a year ago

If you using ajax this button will show after the data load. So instead of initComplete use preDrawCallback

Jai Gupta · Accepted Answer · 2018-06-29 07:43:56Z

1

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

answered Jun 29, 2018 at 7:43

Jai Gupta

111 bronze badge

Comments

Suresh Kamrushi · Accepted Answer · 2020-10-14 07:12:14Z

0

alternatively you can do also like below:

$('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                text: 'My button',
                action: function ( e, dt, node, config ) {
                    alert( 'Button activated' );
                }
            }
        ]
    } );

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

answered Oct 14, 2020 at 7:12

Suresh Kamrushi

16.2k13 gold badges79 silver badges93 bronze badges

Collectives™ on Stack Overflow

Adding a button to toolbar with jQuery DataTables

3 Answers 3

SOLUTION

DEMO

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

SOLUTION

DEMO

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related