Datatables within a bootstrap 3 tab
Datatables within a bootstrap 3 tab
favoriteeats
Posts: 3Questions: 1Answers: 1
I have a page with three bootstrap tabs. Only the second tab includes a datatable. However, when I click to show the tab the datatable isn't redrawing so columns are squished and the table only takes up part of the page. I've followed docs at https://datatables.net/examples/api/tabs_and_scrolling.html to tell the datatable to recalc but nothing happens. Datatables version is 1.10.12. Any help is appreciated!
<html>
<head>
<link media="all" type="text/css" rel="stylesheet" href="dataTables.bootstrap.min.css">
</head>
<body>
<!-- ... -->
<div role="tabpanel" class="tab-pane mt-30 active" id="participants">
<div class="box-body">
<div class="table-responsive">
<table id="participants-table" class="table table-condensed table-hover">
<thead>
<tr>
<th>Org ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Group</th>
<th>Referral Code</th>
<th>Actions</th>
</tr>
</thead>
</table>
</div><!--table-responsive-->
</div><!-- /.box-body -->
</div><!--tab participants-->
<!-- ... -->
<script src="jquery.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
if(e.currentTarget.hash == '#participants') {
$('.tab-content > #participants').show();
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} else {
$('.tab-content > #participants').hide();
}
} );
$('#participants-table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: 'participant/get',
type: 'post'
},
columns: [
{data: 'org_internal_id', name: 'participants.org_internal_id'},
{data: 'first_name', name: 'participants.first_name', render: $.fn.dataTable.render.text()},
{data: 'last_name', name: 'participants.last_name', render: $.fn.dataTable.render.text()},
{data: 'email', name: 'participants.email', render: $.fn.dataTable.render.text()},
{data: 'org_group', name: 'participants.org_group', searchable: false, render: $.fn.dataTable.render.text()},
{data: 'referral_code', name: 'participants.referral_code', sortable: false, render: $.fn.dataTable.render.text()},
{data: 'actions', name: 'actions', searchable: false, sortable: false}
],
order: [[0, "asc"]],
searchDelay: 500
});
});
</script>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
For reference, from searches other methods were suggested. I've also tried:
Not sure if this is the "right" way to solve the problem, but it appears that setting the datatable width to 100% instead of (or before) calling adjust() works. Example:
Its typically best to have
width="100%"as an attribute on your DataTable as it allows DataTables to know that you want 100% width. Its ridiculously difficult to get a percentage value from CSS classes, which is why it needs to be done with attributes (or thestyleattribute.Allan