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

Question

我正在使用datatables

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

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

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

问题：

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

2. 如何将宽度 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'
    }],
  });

});

Answer 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?

Answer 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,
  }
}]

优点：

1. 它使用column.width 选项并应用css 而不是classes
2. 无需定义```类
3. 使用createdRow回调实现自动化
4. 列标题总是在一行中，这意味着如果表格宽度太小，它们不会在高度上拉伸
5. 列的最小宽度始终是保持列标题在一行中所需的值。如果您为一列提供 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'
          });
        }
      });
    },
  });