Bootstrap 3 - Tabs and DataTable
HTML
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdn.datatables.net/u/bs/dt-1.10.12/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/u/bs/dt-1.10.12/datatables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Nav tabs -->
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab-chart" aria-controls="tab-chart" role="tab"
data-toggle="tab">Charts</a></li>
<li role="presentation"><a href="#tab-data" aria-controls="tab-data" role="tab"
data-toggle="tab">Data</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab-chart">
<h2>Some content</h2>
</div>
<div role="tabpanel" class="tab-pane" id="tab-data">
<h2>Not working properly</h2>
<table id="exampleInTab" class="col-md-12 table table-striped table-hover table-bordered"
cellspacing="0" style="table-layout: fixed" width="100%">
<thead>
<tr>
<th>Hidden</th>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Hidden</th>
<th>Name</th>
<th>Position</th>
</tr>
</tfoot>
</table>
</div>
</div>
...
JavaScript
$(document).ready(function () {
var table = $("#exampleInTab").DataTable({
"columnDefs": [
{"visible": false, "targets": 0}
],
"order": [[0, 'asc']],
"displayLength": 25
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$.fn.dataTable
.tables( { visible: true, api: true } )
.columns.adjust();
})
});