title: Adding a button to toolbar with jQuery DataTables
body: <p>I am trying to add a button to my toolbar of my <a href="https://datatables.net/" rel="noreferrer">datatable</a>.
  So, my <a href="https://datatables.net/" rel="noreferrer">datatable</a> is:</p>
  
  <pre><code>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
  
  });
  </code></pre>
  
  <p>And what I have done is like this:</p>
  
  <pre><code>    $(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": '&lt;"toolbar"&gt;frtip'
          });
  
          $("div.toolbar").html('&lt;button type="button" id="any_button"&gt;Click Me!&lt;/button&gt;');
      } );
  </code></pre>
  
  <p>But I am finding something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/VQMHu.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/VQMHu.jpg" alt="enter image description here"></a></p>
  
  <p>But I like to have something like this-</p>
  
  <p><a href="https://i.stack.imgur.com/IFtI6.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/IFtI6.jpg" alt="enter image description here"></a></p>
  
  <p>Can anyone please help?</p>