代码之家 › 专栏 › 技术社区 › David

数据表引导集合

bootstrap-4 datatables jquery

David · 技术社区 · 6 年前

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 班为了纠正这一点,我在初始化datatable后添加了以下内容:

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

这是可行的,只是现在下拉项会显示一秒钟,然后消失。

我的第一个问题是:我的设置正确吗?

使现代化

我在发表这篇文章后注意到,如果我点击我的打印按钮,然后单击按钮,则下拉项将按预期显示。

1 回复 | 直到 6 年前

Shidersz 6 年前

在将代码嵌入到 stack-snippet CDN 图书馆:

1) 我看到的第一个错误是按钮上的背景颜色变暗。这是因为 Datatables Bootstrap btn-secondary 按按钮。幸运的是,他们提供并调用了选项 Ã¬nit

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

我注意到的第二个问题是,没有必要添加 dropdown className 选项,如果使用浏览器检查器,您将看到它们已经具有正确的引导结构和类。

最后,您可以使用所提到的修复程序检查完整的示例:

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