DataTable Bootstrap Collection

user_1920035 0
Viewed 1297

I am using bootstrap v4.2.1 and datatables v1.10.19 with the buttons extension. I'm trying to group together my "export" buttons (csvHtml5 and excelHtml5) in a collection using the following:

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'
    }
  ]
});

The problem that I'm running into is that the dropdown isn't being displayed correctly. My guess is that because the parent <div> that the dropdown items are being displayed in does not have the dropdown-menu class. So to correct this I added the following after initializing the datatable:

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

This works, only now the dropdown items are displayed for a second and then they disappear.

My first question is: am I setting this up right? My second question is: if not, then how do I setup the datatable collection to look like the bootstrap dropdown?

UPDATE

Something that I noticed after making this post is that if I click on my print button before I click on the export button then the dropdown items stay showing up as expected.

bootstrap-4 datatables jquery
1 Answers

After embedding you code on stack-snippet with the needed CDN libraries:

1) The first thing I see wrong was a darker background on the buttons. This is because the Datatables integration with Bootstrap adds class btn-secondary to the buttons. Lucky us, they provide and option called ìnit we can use to delete this class, like this:

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

2) The second issue I note is that there is no need to add the dropdown particular classes in the className options, if you use the browser inspector you will see that they already have the correct structure and classes of Bootstrap.

Finally, you can check the complete example with the mentioned fixs:

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

user_103664950
Related