如何在单个页面中的多个DataTable的div.toolbar中创建一个按钮

Question

我在一个页面中有五个DataTable。我已将它们放在一个公共类（myclass）下，并尝试通过以下代码创建它们。

但是我在div.html内创建的所有按钮都会被最后一个按钮覆盖。我的query.dataTables.min.js版本是1.10.6。

如何更改以下代码以为每个表创建单独的按钮？

$(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

您将每个 button附加到所有 div.toolbar元素;最后创建的按钮将在所有工具栏中复制。

相反，您想要找到属于 this DataTable的工具栏：

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;