Коллекция начальной загрузки DataTable

Question

Я использую bootstrap v4.2.1 и datatables 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');
});

Это работает, только теперь выпадающие элементы отображаются на секунду, а затем исчезают.

Мой первый вопрос: правильно ли я это настраиваю? Мой второй вопрос: если нет, то как настроить коллекцию данных так, чтобы она выглядела как выпадающий список начальной загрузки?

UPDATE

Что я заметил после создания этого поста, так это то, что если я нажму на кнопку print до нажатия кнопки export , то выпадающие элементы будут отображаться, как и ожидалось.

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>