Question

我正在使用带有按钮扩展名的引导程序v4.2.1和数据表v1.10.19。我正在尝试使用以下命令将集合中的“导出”按钮（csvHtml5和excelHtml5）分组在一起：

var data = $('#data').DataTable({
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'collection',
      className: 'btn btn-outline-success dropdown-toggle',
      text: 'Export',
      buttons: [
        {
          extend: 'csvHtml5',
          className: 'dropdown-item'
        },
        {
          extend: 'excelHtml5',
          className: 'dropdown-item'
        }
      ]
    },
    {
      extend: 'print',
      className: 'btn btn-outline-success'
    }
  ]
});

我遇到的问题是下拉菜单显示不正确。我的猜测是，因为要显示下拉菜单的父项<div>没有dropdown-menu类。因此，为纠正此问题，我在初始化数据表后添加了以下内容：

$('.dropdown-toggle').on('click', function() {
  $('.dropdown-item').parent().addClass('dropdown-menu');
});

这有效，只有现在下拉菜单项显示一秒钟，然后它们消失。

我的第一个问题是：我可以正确设置吗？我的第二个问题是：如果没有，那么如何设置数据表集合以使其看起来像引导程序下拉列表？

更新

发布此帖子后，我注意到的事情是，如果在单击 export 按钮之前单击我的 print 按钮，则下拉菜单项将按预期显示

Answer 1

在将您的代码嵌入stack-snippet并使用所需的CDN库之后：

1）我首先看到的错误是按钮上的背景较暗。这是因为Datatables与Bootstrap的集成为按钮添加了类btn-secondary。幸运的是，他们提供了一个名为ìnit的选项，我们可以使用它来删除此类，如下所示：

{
  extend: 'print',
  init: (api, node, config) => $(node).removeClass('btn-secondary'),
  className: 'btn btn-outline-success'
}

2）我要注意的第二个问题是，无需在dropdown选项中添加className特定类，如果使用浏览器检查器，您将看到它们已经具有正确的Bootstrap结构和类。

最后，您可以使用提到的修复程序来检查完整的示例：

$(document).ready(function()
{
    $('.table').DataTable({
      dom: 'Bfrtip',
      buttons: [
        {
          extend: 'collection',
          init: (api, node, config) => $(node).removeClass('btn-secondary'),
          className: 'btn btn-outline-success',
          text: 'Export',
          buttons: [
            {extend: 'csvHtml5'},
            {extend: 'excelHtml5'}
          ]
        },
        {
          extend: 'print',
          init: (api, node, config) => $(node).removeClass('btn-secondary'),
          className: 'btn btn-outline-success'
        }
      ]
    });
})

<!-- Bootstrap 4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<!-- Datatables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

<!-- Datatables Buttons Extension -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.bootstrap4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>


<div class="container-fluid">
<table class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
  </tbody>
</table>
</div>

DataTable引导程序集合

1 个答案: