$(document).ready(function () {
$('.datatable').DataTable({
responsive: true,
dom: 'Blfrtip',
buttons: [
'copy', 'csv', 'excel', 'print'
]
});
$('a[data-toggle="pill"]').on('shown.bs.pill', function (e) {
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.responsive.recalc();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4-4.1.1/jszip-2.5.0/dt-1.10.22/b-1.6.5/b-html5-1.6.5/b-print-1.6.5/r-2.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/bs4-4.1.1/jszip-2.5.0/dt-1.10.22/b-1.6.5/b-html5-1.6.5/b-print-1.6.5/r-2.2.6/datatables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
-<div class="container-fluid"> <!-- start -->
<div class="card card-info card-tabs">
<div class="card-header p-0 pt-1 font-weight-bold" style="background: #98e48e">
<ul class="nav nav-tabs nav-fill" id="custom-tabs-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="custom-tabs-tabone-tab" data-toggle="pill" href="#custom-tabs-tabone" role="tab" aria-controls="custom-tabs-tabone" aria-selected="true" style="color:black">First</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-tabtwo-tab" data-toggle="pill" href="#custom-tabs-tabtwo" role="tab" aria-controls="custom-tabs-tabtwo" aria-selected="false" style="color:black">Second</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-tabthree-tab" data-toggle="pill" href="#custom-tabs-tabthree" role="tab" aria-controls="custom-tabs-tabthree" aria-selected="false" style="color:black">Third</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="custom-tabs-tabContent">
<div class="tab-pane fade active show" id="custom-tabs-tabone" role="tabpanel" aria-labelledby="custom-tabs-tabone-tab">
<table class="table table-striped table-valign-middle datatable">
<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>
<div class="tab-pane fade" id="custom-tabs-tabtwo" role="tabpanel" aria-labelledby="custom-tabs-tabtwo-tab">
<table class="table table-striped table-valign-middle datatable">
<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>George 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>
<div class="tab-pane fade" id="custom-tabs-tabthree" role="tabpanel" aria-labelledby="custom-tabs-tabthree-tab">
<table class="table table-striped table-valign-middle datatable">
<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>Beatrice 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>
<!-- /.card -->
</div>
</div><!-- /.content-wrapper end-->I am trying to use jQuery Datatables with Bootstrap 4 tabs. Each tab will show a different datatable. My JavaScript and jQuery are pretty weak. I originally had four tables on my page visible at once and this code worked:
$(document).ready(function() {
$('.datatable').DataTable( {
dom: 'Blfrtip',
buttons: [
'copy', 'csv', 'excel', 'print'
]
} );
} );
When I switched to tabs and some of the datables were on closed tabs (hidden), it fails. The first tab has the buttons, number of items per page, and search, but none of the other tabs do. I looked at these two links: Scrolling and Bootstrap tabs and Hidden initialisation. I believe that I have to do something like this:
$(document).ready(function() {
$('a[data-toggle="pill"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
$('.datatable').DataTable( {
dom: 'Blfrtip',
buttons: [
'copy', 'csv', 'excel', 'print'
]
} );
} );
But that doesn't do it, and I'm lost. Can some kind person point me in the right direction?
Thanks--
Al
I don't think this is a duplicate question (Or I don't understand the other post). I looked at the suggested post; it addresses problems with column widths. That is not my problem. Basically, just the table in my first tab is being treated as a datatable complete with my options and buttons. All of the subsequent tabs behave as if they are ordinary tables. Ensuring that I was using responsive and setting 'responsive: true' didn't do anything to help my problem. I am presuming that this is an initialization problem due to the subsequent tabs being hidden when the page is loaded. As I indicated earlier, when all of the tables were displayed (unhidden) on load, they all behaved properly. thx.
I've inserted a code snippet, but I'm afraid that in the sandbox it works correctly with the buttons and options :( (though it does have issues with the column widths). I will have to keep playing with my code and see if I can get something to fail in a sandbox. I was hoping I was doing something obviously wrong, but...
OK. I have done some further testing. I am trying to do this tabbed page in a Django app. If I put the code from the snippet here into a page in my Django app, it works fine except for the column widths.
If I replace the hard coded table in the first tab with template code looping through one of my queries, it continues to work correctly, and the other two (still hard coded) tabs show all of the options.
If I replace the hard coded table in the second tab with different (but similar) template code looping through another query, the datable options, etc. disappear in both the second and third tabs.
If I replace the hard coded table in the second tab with the same template code (with the query loop) from the first tab, the datatable options continue to show properly (though the column widths still mess up).
I am referring to all the tables with a class of 'datatable'. Do I need to use an id instead for each of my tables that I want rendered as a datatable? While similar, each table (there are five) has different columns and some have a different number of columns. Would I have to repeat this code for each of my tables with an id instead of a class?
$(document).ready(function () {
$('.datatable').DataTable({
responsive: true,
dom: 'Blfrtip',
buttons: [
'copy', 'csv', 'excel', 'print'
]
});
Thanks!
