jQuery DataTables column.width选项无法按预期工作 [英] jQuery DataTables column.width option not working as expected

问题描述

我正在使用数据表

1. 根据文档，它说使用columns.width选项控制列宽度
2. 当我使用columns.width和渲染表时，它会忽略此宽度并使用自己的宽度

1. as per documentation, it says to use columns.width option to control column width
2. when I use columns.width and render table, it ignores this width and uses its own width

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

1. 我正在使用两列带有长字符串的列来测试我是否对其应用宽度
2. 列名称具有较长的字符串，没有空格
3. 列说明中包含带有空格的长字符串
4. 我正在尝试将200px宽度应用于名称列

1. I am using 2 columns with long strings to test if i an apply width to it
2. column name has long string without spaces
3. column description has long string with spaces
4. I am trying to apply width 200px to name column

问题:

1. 如果表仍将强制使用其自身宽度，则此columns.width的意义是什么

如何将200px宽度应用于名称列并在运行中看到它?

how can I apply width 200px to name column and see it in action ?

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'
    }],
  });

});

推荐答案

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

The width property is merely useful for overall relative widths. In your case you also have a word-wrap issue. Define a CSS class and apply it to the column:

.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/

updated fiddle -> https://jsfiddle.net/bvgu0cL3/30/

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

Since you are wrapping the content into a <span> you might consider adding a class to that <span> instead of the <th> and <td>'s which className does.

如果您希望完全控制宽度，请参见以下答案-> jQuery DataTables固定为其中一列的大小?

If you want total control over the widths, see this answer -> jQuery DataTables fixed size for ONE of the columns?

这篇关于jQuery DataTables column.width选项无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！