Jquery DataTables-循环通过列/标题并设置宽度

我想遍历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。您可以根据自己的要求进行更新。

我认为您可以轻松地使用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。您可以根据自己的要求进行更新。

我不想这么说，但我认为上面的答案永远不会奏效。首先，您应该以列为目标，而不是列；第二，在元素上设置宽度不会更改浏览器的内部表计算，但定义最小宽度会更改浏览器的内部表计算。还可以使用链接，以确保在实例化DataTable后列是循环的：

const table = $('#data-table').DataTable({
}).columns().header().each(function(th) {
  if ( $(th).hasClass('client') ) {
    $(th).css('min-width', '200px') 
  }
})

---

我不想这么说，但我不认为上面的答案会起作用。首先，您应该以列为目标，而不是列；第二，在元素上设置宽度不会更改浏览器的内部表计算，但定义最小宽度会更改浏览器的内部表计算。还可以使用链接，以确保在实例化DataTable后列是循环的：

const table = $('#data-table').DataTable({
}).columns().header().each(function(th) {
  if ( $(th).hasClass('client') ) {
    $(th).css('min-width', '200px') 
  }
})

---

如何设置px。这个$column.width100px？是的，我们需要将它指定为.width100px。。但这是不需要的，默认情况下是PX。请考虑将答案标记为帮助未来用户。谢谢如何设置px。这个$column.width100px？是的，我们需要将它指定为.width100px。。但这是不需要的，默认情况下是PX。请考虑将答案标记为帮助未来用户。谢谢是的，你说得对，它的栏目不是栏目。非常感谢你，伙计！是的，你说得对，它的栏目不是栏目。非常感谢你，伙计！