Abrar Jahin Abrar Jahin - 8 days ago 10
jQuery Question

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?

Answer

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.

Comments