设置宽度 jQuery 时数据表中的 columnDefs 不起作用

在使用 jQuery Datatables 插件时，我们有时需要设置每列的宽度，以便更好地适应页面。但是有时我们会发现设置 columnDefs 属性无法生效。

这通常是因为 jQuery Datatables 需要在最初的表格渲染之前就知道每个列的宽度。因此，我们需要使用一些技巧来解决这个问题。

方法一：使用 CSS

我们可以使用 CSS 来设置表格列的宽度，如下所示：

table.dataTable th:nth-child(1),
table.dataTable td:nth-child(1) {
    width: 100px;
}

table.dataTable th:nth-child(2),
table.dataTable td:nth-child(2) {
    width: 200px;
}

table.dataTable th:nth-child(3),
table.dataTable td:nth-child(3) {
    width: 300px;
}

这将覆盖表格默认样式中的列宽，并使每个列具有相应的宽度。

方法二：使用 createdRow 回调函数

我们可以使用 createdRow 回调函数来在表格创建时为每个单元格设置宽度，如下所示：

$('#example').DataTable({
    columnDefs: [
        {width: '100px', targets: 0},
        {width: '200px', targets: 1},
        {width: '300px', targets: 2},
    ],
    createdRow: function(row, data, dataIndex) {
        $(row).find('td:eq(0)').css('width', '100px');
        $(row).find('td:eq(1)').css('width', '200px');
        $(row).find('td:eq(2)').css('width', '300px');
    }
});

这个方法的好处在于，我们可以动态设置列宽度，甚至在表格重新渲染时也能够应用这些设置。

总结

无论使用哪种方法，我们都可以成功地设置表格列的宽度。在实际开发中，我们需要根据自己的需求选择适合自己的方法，以便更好地适应项目。