Question

我有一个DataTable，我想将按钮移到另一个具有其他页面按钮的DIV上，但我不断显示以下内容

未捕获的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().containers()

创建外部数据表按钮

1 个答案: