jQuery DataTable 溢出和文本换行问题

Question

我有以下数据表(全 Angular css 类设置宽度 = 100%)

<table class="datatable full-width">
    <thead>
        <th>LOB</th>
        <th>Creditor Line 1</th>
        <th>Creditor Line 2</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip</th>
        <th></th>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Javascript:

var profileTable =
            $(".datatable").dataTable({
                "iDisplayLength": 25,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bAutoWidth": false
            });

一切正常，直到出现带有长文本字符串的记录...当出现带有非常长文本的记录时，数据表会在页面右侧溢出。 (见下面的截图，红线是页面应该结束的地方) http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg

谁能告诉我如何将单元格中的文本换行或防止此溢出问题？

我已经尝试通过“table-layout: fixed”...这可以防止溢出，但会将所有列设置为相同的宽度。

谢谢

Answer 1

我满足于让我的行只有一行文本高的限制(对某些人来说是一个好处)。包含长字符串的 CSS 将变为:

.datatable td {
  overflow: hidden; /* this is what fixes the expansion */
  text-overflow: ellipsis; /* not supported in all browsers, but I accepted the tradeoff */
  white-space: nowrap;
}

[编辑添加:] 在使用我自己的代码并最初失败后，我认识到可能对人们有所帮助的第二个要求。表格本身需要有一个固定的布局，否则无论如何单元格都会不断尝试扩展以容纳内容。如果 DataTables 样式或您自己的样式尚未这样做，则需要进行设置:

table.someTableClass {
  table-layout: fixed
}

现在文本被省略号截断了，要真正“看到”可能隐藏的文本，您可以实现工具提示插件或详细信息按钮或其他东西。但一个快速而肮脏的解决方案是使用 JavaScript 将每个单元格的标题设置为其内容相同。我使用了 jQuery，但您不必:

  $('.datatable tbody td').each(function(index){
    $this = $(this);
    var titleVal = $this.text();
    if (typeof titleVal === "string" && titleVal !== '') {
      $this.attr('title', titleVal);
    }
  });

DataTables 还在行和单元格呈现级别提供回调，因此您可以提供在该点设置标题的逻辑，而不是使用 jQuery.each 迭代器。但是，如果您有其他修改单元格文本的监听器，您最好在末尾使用 jQuery.each 来命中它们。

这整个截断方法也将有一个限制，您已经指出您不喜欢:默认情况下，列将具有相同的宽度。我确定将始终变宽或始终变窄的列，并在其上明确设置基于百分比的宽度(您可以在标记中或使用 sWidth 设置)。任何没有明确宽度的列都会均匀分配剩余空间。

这似乎是很多妥协，但最终结果对我来说是值得的。