创建外部数据表按钮

Question

我有一个 DataTable，我想将按钮移至另一个带有其他页面按钮的DIV，但我一直在显示以下显示

uck offult typeerror：$ .fn.datatable.tabletools不是构造函数

var table;
$.ajax({
  url: 'XXXXXXX',
  type: 'get',
  dataType: 'json',
  success: function(data) {
    table = $('#reportDataTable').DataTable({
      searching: false,
      colReorder: false,
      paging: false,
      info: false,
      data: data,
      dom: 'Bfrtip',
      buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
      ]
      // Plus other code in this function
    })
  }
      
      
      
var tableTools = new $.fn.DataTable.TableTools(table, {
    "buttons": [
          "copy",
          "csv",
          "xls",
          "pdf",
          {
            "type": "print",
            "buttonText": "Print me!"
          }
        ]
});
$(tableTools.fnContainer()).insertAfter('table.reportDataTable');

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
<div id="reportSectionButtons" class="col-lg-6 text-right">
  <!-- WANT BUTTONS IN THIS DIV -->
  <button id="colDescButton" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#colDescModal" style="margin-right: 2.5rem">
    Column descriptions
  </button>
</div>
<table id="reportDataTable" class="table table-striped">
  <thead>
    <tr>
      <th>Company</th>
      <th>Service</th>
      <th>Group name</th>
      <th>Start date</th>
      <th>End date</th>
      <th>Extension</th>
      <th>Caller ID</th>
      <th>Frequency</th>
      <th>Standard cost</th>
      <th>Billed</th>
      <th>Quantity</th>
      <th>Storage (GB)</th>
      <th>Inv month/year</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="http://datatables.net/download/build/dataTables.tableTools.nightly.js?_=60133663e907c73303e914416ea258d8"></script>

Answer 1

您可以将您的按钮放在另一个Div上，

table.buttons().container().insertBefore('table.reportDataTable');

有关更多详细信息，请访问buttons（）。容器（）