我知道这个问题已经被问过了，但我仍然无法解决。由于应用程序架构的原因，我在模态中有一个数据表。这个数据表在页面加载时初始化一次(没有数据(，放在DOM的模态中，它是隐藏的，没有宽度和高度。每次打开模态时，都会使用重新加载底层数据
$('#datatable').DataTable().ajax.reload()
问题是，当打开模态时，列布局不正确。这些列很薄，不会占用模态的所有空间。
我读到我应该打电话给
$('#datatable').DataTable().columns.adjust();
$('#datatable').DataTable().responsive.recalc();
重新调整列宽，但什么也没发生。
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"
}
]}
我还应该尝试什么？感谢您的帮助
下面的代码将检测引导模式并调整表。
$('#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%'})
});
在onOpenEnd选项内，而不是
$('#table').DataTable().columns.adjust();
尝试
$('#table1').DataTable().columns.adjust().draw();
这使得每当打开模态时，我的表都可以重新绘制的列。