jQuery DataTable溢出和文本换行问题

16 浏览
0 Comments

jQuery DataTable溢出和文本换行问题

我有一个DataTable（full-width css 类设置宽度= 100%）

LOB Creditor Line 1 Creditor Line 2 Address City State Zip

...

 

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\'...这可以防止溢出，但是所有列的宽度都被设置为相同的宽度。

谢谢

admin 更改状态以发布 2023年5月20日
0

2 答案

0 Comments

下面的CSS声明适用于我:

.td-limit {
    max-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

0
0 Comments

我接受了行高只能为一行的限制（对一些人来说这是一种好处）。用于包含长字符串的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进行设置）。没有明确宽度的任何列都平均分配剩余空间。

这可能看起来是很多妥协，但对我来说最终的结果是值得的。

0