Adjusting columns of jQuery Datatables
Question
I know this was already asked but I still cannot sort it out. Due to app architecture, I have a datatable inside a modal. This datatable is initialized once at page load (with no data), put inside the modal in the DOM, which is hidden, with no width and height. Every time the modal is opened, the underlying data are reloaded with
$('#datatable').DataTable().ajax.reload()
The problem is that, when opening the modal, the columns layout is not right. The columns are thin and they don't take all the space of the modal.
I read that I should call
$('#datatable').DataTable().columns.adjust();
$('#datatable').DataTable().responsive.recalc();
to re-adjust columns width, but nothing happens.
index.html
<link href="/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="/datatables.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<button id="button">Open</button>
<div id="modal-bom" class="modal">
<div class="modal-content">
<table class="striped" id="table">
<thead>
<tr>
<th>Position</th>
<th>Code</th>
<th>Description</th>
<th>Quantiy</th>
</tr>
</thead>
</table>
</div>
</div>
<script src="/jquery-3.4.1.min.js"></script>
<script src="/materialize.min.js"></script>
<script src="/datatables.min.js"></script>
<script src="/mainApp.js"></script>
</body>
</html>
mainApp.js
var initialized = false;
$(document).ready(() => {
$('#button').click(() => {
$('#modal-bom').modal({
onOpenEnd: () => {
$('#table').DataTable().ajax.reload(() => {
$('#table').DataTable().columns.adjust();
$('#table').DataTable().responsive.recalc();
});
},
});
$('#modal-bom').modal('open');
});
$('#table').DataTable({
ajax: (dataToSend, callback) => {
loadData().then((dataReceived) => {
callback(dataReceived);
});
},
columns: [
{ data: 'position' },
{ data: 'code' },
{ data: 'description' },
{ data: 'qty' }
],
initComplete: () => initialized = true
});
});
function loadData() {
return new Promise((resolve) => {
if (!initialized) {
resolve({ data: {} });
}
else {
$.ajax({
url: 'http://127.0.0.1:5500/data.txt',
method: "GET",
dataType: 'json',
success: json => resolve({ data: json.data })
});
}
});
}
data.txt
{"data": [
{
"level": 0,
"position": "1",
"code": "ART001",
"description": "Article one description",
"qty": "1"
},
{
"level": 1,
"position": "1.1",
"code": "ART002",
"description": "Article two description",
"qty": "10"
},
{
"level": 1,
"position": "1.2",
"code": "ART003",
"description": "Article three description",
"qty": "1"
},
{
"level": 2,
"position": "1.2.1",
"code": "ART004",
"description": "Article four description",
"qty": "2"
},
{
"level": 2,
"position": "1.2.2",
"code": "ART005",
"description": "Article five description",
"qty": "15"
},
{
"level": 3,
"position": "1.2.2.1",
"code": "ART006",
"description": "Article six description",
"qty": "5"
},
{
"level": 2,
"position": "1.2.3",
"code": "ART007",
"description": "Article seven description",
"qty": "4"
},
{
"level": 1,
"position": "1.3",
"code": "ART008",
"description": "Article eight description",
"qty": "1"
}
]}
What else should I try? Thank you for any help
2 answers
solution1
0 2020-05-03 17:58:01
Inside your onOpenEnd option, instead of
$('#table').DataTable().columns.adjust();
Try
$('#table1').DataTable().columns.adjust().draw();
This was what allowed my tables to redraw its columns whenever the modal is opened.
solution2
0 2022-09-29 04:22:27
This code below will detect Bootstrap modal and adjust the table.
$('#modal-id').on('shown.bs.modal', function () {
var table = $('#table-id').DataTable();
table.columns.adjust();
//// if the above code is not working set width:100% to a table
$('.dataTables_scrollHeadInner, .dataTable').css({'width':'100%'})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.