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 列长字符串来测试我是否对其应用宽度
2. column name 有没有空格的长字符串
3. 列描述有带空格的长字符串
4. 我正在尝试将宽度 200px 应用于 name 列

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有什么意义，如果表格仍然会强制执行它自己的宽度

1. what is the point of this columns.width if table will still enforce its own width

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

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/

由于您将内容包装到 中，您可能会考虑向该 添加一个类而不是 ; 和 是 className 的作用.

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屋！