jQuery DataTables column.width 选项未按预期工作

Posted 2023-05-07

【中文标题】jQuery DataTables column.width 选项未按预期工作

【英文标题】：jQuery DataTables column.width option not working as expected

【发布时间】：2018-06-27 11:15:27

【问题描述】：

我正在使用datatables

根据documentation，它说使用columns.width 选项来控制列宽 当我使用columns.width 并渲染表格时，它会忽略这个宽度并使用自己的宽度

JSFIDDLE： https://jsfiddle.net/bababalcksheep/bvgu0cL3/28/

我正在使用带有长字符串的 2 列来测试我是否对其应用宽度 列名称有长字符串，没有空格 列描述有很长的带空格的字符串 我正在尝试将宽度 200px 应用于 name 列

问题：

这个columns.width 的意义何在？如果表格仍会强制使用自己的宽度

如何将宽度 200px 应用于 name 列并查看它的实际效果？

JS：

$(document).ready(function() 
  var table = $('#example').DataTable(
    'autoWidth': false,
    'scrollX': 'true',
    'scrollY': 300,
    'scrollCollapse': true,
    columns: [
      data: 'name',
      title: 'Long Name Issues',
      width:'200px',     
      render: function(data) 
        return  '<span class="">'+ data + '</span>';
      
    , 
      data: 'position',
      title: 'Position'
    , 
      data: 'description',
      title: 'Long Description Issues',
      width:450,
      render: function(data) 
        return data;
      
    , 
      data: 'salary',
      title: 'salary May have Big Title'
    , 
      data: 'age',
      title: 'age'
    ],
    data: [
      name: 'DavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavid',
      position: 'CTO',
      description: 'CTO',
      salary: '1000',
      age: '44'
    , 
      name: 'John',
      position: 'tech',
      description: 'description',
      salary: '1000',
      age: '22'
    , 
      name: 'Amber',
      position: 'CEO',
      description: 'SOME long description with spaces SOME long description with spaces',
      salary: '1000',
      age: '45'
    ],
  );

);

【参考方案1】：

width 属性仅对整体相对宽度有用。在您的情况下，您还有word-wrap 问题。定义一个 CSS 类并将其应用于列：

.px200 
  width: 200px;
  max-width: 200px;
  word-wrap: break-word;

columns: [
  data: 'name',
  title: 'Long Name Issues',
  className: 'px200', //<----
  render: function(data) 
    return  '<span class="">'+ data + '</span>';
  

更新小提琴 -> https://jsfiddle.net/bvgu0cL3/30/

由于您将内容包装到 <span> 中，因此您可能会考虑向该 <span> 添加一个类，而不是 className 所做的 <th> 和 <td>。

如果您想完全控制宽度，请参阅此答案 -> jQuery DataTables fixed size for ONE of the columns?

【讨论】：

感谢您的详细回答。看起来 wdth 选项是没用的。

但是在我的情况下，我希望根据用户偏好应用宽度。用户想要定义列宽。在这种情况下，我不能使用className，所以我想也许我可以使用createdRow，对于给定的宽度，我可以使用 width: 200px; max-width: 200px; word-wrap: break-word;将css应用于td

jsfiddle.net/bababalcksheep/bvgu0cL3/39/show 我添加了 min-width: 200px;对所有列进行分类和应用类。使用更大的屏幕，表格违反了 max-width:200 px 你能解释一下这种行为吗

@django，DT 也倾向于根据容器宽度在整个表格上设置计算宽度。要控制整体宽度，请设置 *_wrapper 宽度，即 #example_wrapper width: 800px; 或类似的 jsfiddle.net/bvgu0cL3/48/show。另请注意，您正在使用引导程序，它会注入 col-sm-12 等类，因此该表实际上是为适应整个容器而设计的。但是，是的，表格通常在某种程度上令人讨厌，而不仅仅是 DT，它的行为不像所有其他块元素。我同意，DT 中的autoWidth 和columns.width 或多或少没用。

【参考方案2】：

基于@davidkonrad 的回答 这是替代方法。

更新： 我创建了一个插件，它在列中应用定义的 css dataTables.colStyle.js

用法：

// init
$('#example').DataTable(
  columnStyle: true // init plugin
);
// use in columns like this
columns: [
  data: 'name',
  title: 'Name',
  css: 
    'width': 200,
    'min-width': 200,
    'word-wrap': 'break-word',
    'max-width': 200,
  
]

优点：

它使用column.width 选项并应用css 而不是classes 无需定义```类 使用createdRow回调实现自动化 列标题总是在一行中，这意味着如果表格宽度太小，它们不会在高度上拉伸 列的最小宽度始终是保持列标题在一行中所需的值。如果您为一列提供 50px 的宽度，即使它必须超过给定的 50px 宽度，它仍会拉伸以使标题在一行中

工作小提琴：https://jsfiddle.net/bababalcksheep/bvgu0cL3/42/

需要更多建议才能使其更优雅

CSS：

/* keep the damn titles in one line*/
.dataTable thead td,
.dataTable thead th 
  white-space: pre;

JS：

  var table = $('#example').DataTable(
     "createdRow": function(row, data, index) 
      var tableApi = this.api();
      var columns = tableApi.settings().init().columns;    
      var tds = $(row).find('td');
      tds.each(function(index) 
        var $td = $(this);
        var columnIndex = tableApi.column(this).index();
        //var columnIndex = tableApi.cell(this).index().column; 
        var hasWidth = columns[columnIndex].width;
        if (hasWidth) 
          $td.css(
            'width': hasWidth,
            'max-width': hasWidth,
            'min-width': hasWidth,//will enforce fixed width, skip if not required
            'word-wrap': 'break-word'
          );
        
      );
    ,
  );