How to create a button in div.toolbar of multiple DataTables in a single page

Question

I have five DataTables in a single page. I have put them under a common class (myclass) and am trying to create them by the following code.

However all the buttons that I am creating inside div.html are overwritten by the last button. My query.dataTables.min.js version is 1.10.6.

How can I change the below code to create separate button for each table?

$(document).ready(function() {

  $('.myclass').each(function() {
    var id = $(this).attr('id');
    var table = $(this).DataTable({
      "paginate": false,
      "scrollY": "475px",
      "scrollX": "100%",
      "bSort": true,
      bFilter: true,
      bInfo: true,
      "scrollCollapse": false,
      "dom": '<"toolbar">frtip',
      "oLanguage": {
        "sSearch": "Search"
      },
    });
    var dwldbtn = "id=" + id + " title='Download table data' class='export btn btn-sm btn-success' role='button'"
    $("div.toolbar").html("<a href='" + window.location.href + "/csv'" + dwldbtn + ">Download</a>");
  });

});

.header-tr {
  background-color: #CCF;
  color: #039;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<link href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" rel="stylesheet" />

<div>
  <table id="table_1" name="table_1" class="myclass display compact cell-border table-bordered stripe row-border order-column" width="100%">
    <thead>
      <tr class='header-tr'>
        <th align=right>Name</th>
        <th align=right>Place</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align=right>John</td>
        <td align=right>Bristol</td>
      </tr>
    </tbody>
  </table>
  <table id="table_2" name="table_2" class="myclass display compact cell-border table-bordered stripe row-border order-column" width="100%">
    <thead>
      <tr class='header-tr'>
        <th align=right>Name</th>
        <th align=right>Place</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align=right>Mike</td>
        <td align=right>Church st.</td>
      </tr>
    </tbody>
  </table>

</div>

Answer 1

You're appending every button to all div.toolbar elements; whichever button was created last will be replicated in all of the toolbars.

Instead, you want to find the toolbar belonging to this DataTable:

$(document).ready(function() {

  $('.myclass').each(function() {
    var id = $(this).attr('id');
    var table = $(this).DataTable({
      "paginate": false,
      "scrollY": "475px",
      "scrollX": "100%",
      "bSort": true,
      bFilter: true,
      bInfo: true,
      "scrollCollapse": false,
      "dom": '<"toolbar">frtip',
      "oLanguage": {
        "sSearch": "Search"
      },
    });
    var dwldbtn = "id=" + id + " title='Download table data' class='export btn btn-sm btn-success' role='button'";

    $(this).closest(".dataTables_wrapper")     // search this datatable
           .find("div.toolbar")                // for its toolbar
           .html("<a href='" + window.location.href + "/csv'" + dwldbtn + ">Download</a>");
  });

});

.header-tr {
  background-color: #CCF;
  color: #039;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<link href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" rel="stylesheet" />

<div>
  <table id="table_1" name="table_1" class="myclass display compact cell-border table-bordered stripe row-border order-column" width="100%">
    <thead>
      <tr class='header-tr'>
        <th align=right>Name</th>
        <th align=right>Place</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align=right>John</td>
        <td align=right>Bristol</td>
      </tr>
    </tbody>
  </table>
  <table id="table_2" name="table_2" class="myclass display compact cell-border table-bordered stripe row-border order-column" width="100%">
    <thead>
      <tr class='header-tr'>
        <th align=right>Name</th>
        <th align=right>Place</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align=right>Mike</td>
        <td align=right>Church st.</td>
      </tr>
    </tbody>
  </table>

</div>