javascript - 使用 Jquery 数据表的复杂列宽

Question

我用下面的代码创建了一个数据表

$(document).ready( function () {
    $('#data-table').DataTable( {
        "bFilter": false,
        "scrollY": 300,
        "scrollX": true,
        "paging":   false,
        "ordering": false,
        "info":     false,
        "columnDefs": [
        { "width": "20%", "targets": 0 }
    ]

    });
} );

请注意，我将每列的宽度设置为 20%。我的问题是如何为第 1 列指定宽度，同时仍然能够为其余列设置宽度？

我在数据表网站上看到过这样的例子:

$('#example').dataTable( {
  "columns": [
    { "width": "20%" },
    null,
    null,
    null,
    null
  ]
} );

但我不认为这对我有用，因为它看起来好像需要我提前知道我的表有多少列，而用户要求列数是可变的。

Answer 1

尝试用这个替换您的 columnDefs 部分(并添加适当的百分比):

"columnDefs": [
        { "width": "(percentage)%", "targets": "_all" }
        { "width": "(other percentage)%", "targets": 0 }
]

这会将第一列设置为一个宽度，将其他列设置为不同的宽度。

目标定义了哪一列将受到影响。将其设置为整数会影响从左到右开始的列(即 '"targets": [0, 1]' 会影响最左边和第二左边的列)。负整数从右到左影响列。字符串“_all”将影响所有列。