省略号解决方案-jQuery + Bootstrap + Datatables

Question

我正在使用具有引导程序和jquery的网站上的大型（2000多个条目）表使用Datatables。 一些（文本）值太长了，此刻我使用的是这样的东西：

render: function ( data, type, row ) {
                        return data.length > 35 ?
                        data.substr( 0, 35 ) +'…' :
                            data;
                    }

在数据表中剪切字符串并在html标题中显示完整值。 有一个更好的方法吗？ 就像一个自动剪切但点击后显示全部的插件一样？ 我找不到东西。

我看到了jquery dotdotdot，但它没有给我单击扩展的机会。

Answer 1

修改javascript中的字符串以使其对某些DOM元素更可见或“适合”是完全不可行的。 尤其是当您像这里这样有许多在回调中正在预处理的字符串时。

如果您对某些（或全部）列强制使用固定宽度，则示例：

table.dataTable td:nth-child(3) {
  max-width: 100px;
}

然后，您可以使用简单的CSS来确保未包装列的内容，不会超出边距，并且如果列的内容太大，则会显示一个很好的省略号，

table.dataTable td  {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

演示-> http://jsfiddle.net/ax1gr1og/