javascript - 使用 DataTables.net 重新计算列宽

Question

我正在使用 DataTables.net 获取使用 Ajax 调用回服务器的数据的表。该表位于 Bootstrap v4.3.1 选项卡中，因此在页面加载时最初不可见。我发现在这种情况下，列宽计算不正确——它们的宽度都是相等的。

我对此的解决方案是处理选项卡上的“shown.bs.tab”事件，以确定何时选择了我的表的选项卡。此时我想强制它重新计算列宽。

根据DataTables.net 文档，我应该调用 $('#myTable').DataTable().columns.adjust().draw(); 在我的事件处理程序中重新计算列宽。从表面上看，这确实会重新计算列宽，但会带来每次从服务器获取新数据集的不幸副作用——我宁愿避免这种情况。

有没有办法在不获取一组新数据的情况下调整 JavaScript 中的列大小？

$('#myTable').DataTable({
		"bPaginate": false,
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "/api/myTable",
		"sServerMethod": "POST",
		"cache": false,
		"columns": [
			{ "data": "ActivityAt", "width": "10%" },
			{ "data": "ActivityBy", "width": "20%" },
			{ "data": "ActivityType", "width": "10%" },
			{ "data": "Text", "width": "60%" },
		]
	});
			
$('.nav-tabs a')
	.off('shown.bs.tab')    // Remove any existing event handlers for this event
	.on('shown.bs.tab',     // When the tab has been shown...
		function (e) {			
			$('#myTable').DataTable().columns.adjust().draw();
		});

<!-- Tabstrip Header -->
<ul class="nav nav-tabs mt-3" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#tabSummary" role="tab" data-toggle="tab"><h6>Summary</h6></a>
    </li>
    <!-- Other tabs snipped -->
    <li class="nav-item">
        <a class="nav-link" href="#tabMyTable" role="tab" data-toggle="tab"><h6>My Table</h6></a>
    </li>
</ul>

<!-- Tabstrip Content -->
<div class="tab-content">
  <div role="tabpanel" class="p-3 tab-pane fade show active" id="tabSummary">
    Summary 
  </div>
  <!-- Other tabs snipped -->
  <div role="tabpanel" class="p-3 tab-pane fade show active" id="tabMyTable">
    <table id="myTable" class="table table-striped table-sm mb-0 w-100" style="max-height: 50vh; overflow-y: auto;">
            <thead>
                <tr>
                    <th>Activity At</th>
                    <th>Activity By</th>
                    <th>Type</th>
                    <th>Notes</th>
                </tr>
            </thead>
        </table>
  </div>  
</div>

标签： javascriptdatatables-1.10