javascript - 调整 jQuery 数据表的列
问题描述
我知道这已经被问过了,但我仍然无法解决。由于应用程序架构,我在模式中有一个数据表。此数据表在页面加载时初始化一次(没有数据),放在 DOM 中的模式中,它是隐藏的,没有宽度和高度。每次打开模式时,都会重新加载基础数据
$('#datatable').DataTable().ajax.reload()
问题是,打开模式时,列布局不正确。列很薄,它们不会占用模态的所有空间。
我读到我应该打电话
$('#datatable').DataTable().columns.adjust();
$('#datatable').DataTable().responsive.recalc();
重新调整列宽,但没有任何反应。
索引.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 })
});
}
});
}
数据.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"
}
]}
我还应该尝试什么?感谢您的任何帮助
解决方案
在您的onOpenEnd选项中,而不是
$('#table').DataTable().columns.adjust();
尝试
$('#table1').DataTable().columns.adjust().draw();
这就是让我的表格在打开模式时重新绘制其列的原因。
推荐阅读
- php - Jquery获取动态表中相同项目的组总和
- ruby-on-rails - 在 Rails after_create 中添加默认值
- c# - 在某些情况下,UWP C# 应用程序 (XAML) 拉伸页面会导致按钮被切断。
- javascript - 我怎样才能 window.open 用不同的图像打开不同的href
- node.js - UnhandledPromiseRejectionWarning:错误:找不到模块'/MyProject/node_modules/react-native-scripts/build/scripts/init.js'
- c# - 区分 OnParticleCollision 中的不同 Collider
- php - 如何使用 PDO 从单行结果集中获取列名和值?
- python-3.x - Keras Conv1d Input Shape/ Parameters for Stock Data
- eclipse - Tomcat无法保存到临时文件夹?
- r - 如何处理消息错误:R 中的意外符号?