省略号解决方案-Jquery + Bootstrap + Datatables [英] Solution for Ellipsis - Jquery + Bootstrap + Datatables
问题描述
我在具有引导程序和jquery的网站上使用大型表(超过2000个条目)的数据表。一些(文本)值太长了,此刻我使用的是这样的东西:
I am using Datatables on a site with bootstrap and jquery for a large (2000+ entries) table. Some of the (text) values are way too long and at the moment I use something like this:
render: function ( data, type, row ) {
return data.length > 35 ?
data.substr( 0, 35 ) +'…' :
data;
}
在数据表中剪切字符串并在html标题中显示完整值。
还有更好的方法吗?就像一个自动剪切但点击后显示全部的插件一样?我找不到东西。
in Datatables to cut the strings and display the full value in the html title. Is there a better way to do this? Like a plugin that automatically cuts but shows all when clicked on or something similar? I was not able to find something.
我看到了jquery dotdotdot,但这并没有给我带来扩展的机会。
I saw jquery dotdotdot but it doesnt give me a click to extend.
推荐答案
修改javascript中的字符串以使它们对于某些DOM元素更可见或适合是完全不可行的。尤其是当您像这里一样有许多在回调中正在预处理的字符串时。
Modifying strings in javascript in order to make them more viewable or "fitted" to certain DOM elements is a total no-go. Especially when you as here have many strings that is being preprocessed in a callback.
如果您将固定宽度强制应用于某些(或全部)列,例如:
If you force fixed widths to some (or all) columns, example :
table.dataTable td:nth-child(3) {
max-width: 100px;
}
然后,您可以使用简单的CSS来确保列的内容不是
Then you can use simple CSS to ensure that the content of the columns not is wrapped, not go beyond margins and displays a nice ellipsis if it is too large by
table.dataTable td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
演示-> http://jsfiddle.net/ax1gr1og/
demo -> http://jsfiddle.net/ax1gr1og/
这篇关于省略号解决方案-Jquery + Bootstrap + Datatables的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!