我希望循环遍历DataTable上的列。 检查标题的类并设置列的宽度。
根据DataTables文档。 这就是如何循环遍历标题，但我如何设置列宽呢？
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<?php if ($client) : ?>
<th class="client">Client</th>
<?php endif; ?>
<th>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $id; ?></td>
<?php if ($client) : ?>
<td><?php echo $client; ?></td>
<?php endif; ?>
<td><?php echo $product; ?></td>
</tr>
</tbody>
</table>
<script>
var myTable = $('#data-table').DataTable();
myTable.columns().header().each(function(value, index){
if ( $(value).hasClass('client') ) {
// Set column width here
}
})
</script>
我认为您只需使用CSS就可以轻松地完成以下操作:
.client { width: 100px; }
但万一你需要在JS中做一些操作来设置宽度，那么你可以像这样做:
var myTable = $('#data-table').DataTable();
myTable.columns.header().each(function(column, index) {
if ($(column).hasClass('client')) {
// Set column width here
$(column).width(100)
//Or
// $(column).css("width", 100);
}
})
请注意，如果没有指定显式单元（如“em”或“%”)，则假定“px”。 所以在本例中，它实际上是100px。 您可以根据您的要求更新它。
我不想这么说，但我不认为上面的答案会奏效。 首先，您应该以 http://jsfiddle.net/wvtmq5d7/columns()为目标，而不是以columns为目标； 其次，在元素上设置 width不会更改浏览器内部表计算，但定义min-width会更改内部表计算。 还可以使用链接来确保在实例化DataTable后循环columns():const table = $('#data-table').DataTable({
}).columns().header().each(function(value){
if ( $(value).hasClass('client') ) {
$(value).css('min-width', '200px')
}
})
相关问题
