我正在使用Datatables，一个用于创建自定义表的 jQuery 插件。我现在正在尝试创建一个包含许多列的表，其中至少一个包含大量文本。问题是长文本的列不是创建得更宽，而是更高，使表格更难于用户阅读。
如何使文本列更宽且更低？
这是我的问题的屏幕截图：
这是我的问题可见：
问问题
2317 次
12 回答
6
可能您可能会考虑使用 css text-overflow 属性：http ://css-tricks.com/snippets/css/truncate-string-with-ellipsis/并结合具有长文本的单元格的工具提示。
于 2012-11-25T04:50:32.473 回答
5
数据表渲染完成后，您可以检查每个 td 的文本长度。如果文本长度超过您定义的限制，您可以为该表格单元格设置更大的宽度，即 td。这样，即使您不知道它在表格中的位置，您也可以加宽超出所需高度的任何单元格
这是代码
$(document).ready(function() {
$('#example').dataTable({
"sScrollX":"100%",
"fnInitComplete": function(oSettings, json) {
$('#example tr').each(function(i){
$('td', this).each(function(j){
// get length of text
var l = $(this).text().length;
// set larger width if text length is greater than 300 characters
if(l > 300){
$(this).width(400);
}
});
});
}
});
});
您还可以使用var l = $(this).height();来使用单元格高度 但我认为这不会为您提供正确的结果，因为在调整宽度之前，同一行中可能没有大文本的其他单元格也具有相同的高度，因此它们的宽度属性也将使用它来更改，这对您来说不正确情况，我猜
虽然我认为一个更好的主意是修剪文本以限制，添加一个“更多”链接并使用像qTip这样的插件显示全文
于 2012-11-26T12:08:05.673 回答
4
我写了一个小的 jQuery 插件来限制元素的文本行，希望这能有所帮助。
/**
* Binaray search with callback
*/
function bisearch(left, right, search, getter){
var pos, result;
if (typeof getter !== "function") {
getter = function (x) {
return x;
};
}
while (left <= right) {
pos = (left + right) / 2 | 0;
result = getter(pos);
if (result < search) {
left = pos + 1;
}
else if (result > search) {
right = pos - 1;
}
else {
return pos;
}
}
return -1;
}
;(function($){
var getLineHeight = function(el) {
var self = el,
$self = $(self),
content = $self.html(),
lineHeight;
if (typeof $self.attr("style") !== "undefined") {
orgStyleAttr = $self.attr("style");
}
$self.html(" ").css("min-height", "0px");
lineHeight = $self.height();
$self.html(content);
if (typeof orgStyleAttr !== "undefined") {
$self.attr("style", orgStyleAttr);
} else {
$self.removeAttr("style");
}
return lineHeight;
}
$.fn.limitLines = function(maxLines){
$(this).each(function(){
var self = this,
$self = $(self),
content = $self.html(),
height = $self.height(),
lineHeight = getLineHeight($self),
maxHeight = lineHeight * maxLines;
if (Math.floor(height/lineHeight) <= maxLines)
return;
// this search will stop when the text meet the line count,
// but the last line will be of any length
var middleOfLastLine = bisearch(0, content.length, maxLines, function (n){
$self.html(content.substring(0, n));
return Math.floor($self.height() / lineHeight);
});
// search for position from current to current plus one more line,
// until we find the excact position(p) to stop,
// where if one more letter was added,
// there will be a new line
var endOfLastLine = bisearch(middleOfLastLine, content.length, maxLines + .5, function (n){
$self.html(content.substring(0, n - 3) + '...');
var before = Math.floor($self.height() / lineHeight);
$self.html(content.substring(0, n - 2) + '...');
var after = Math.floor($self.height() / lineHeight);
return (before + after) / 2;
});
$self.html(content.substring(0, endOfLastLine -3) + '...');
});
};
})(jQuery);
于 2012-11-26T05:45:02.777 回答
3
您需要使用aoColumnDefswhich 允许您按标题或编号定位特定列，并使用插件的本机sWidth属性设置所需列的宽度：
$(document).ready(function() {
var data = $('#example').dataTable({
"sScrollX":"100%",
"aoColumnDefs": [
{ "sWidth": "1500px", "aTargets": [5] } // this will target the 6th column (the first being 0)
]
});
});
如果您事先不知道要定位哪些列，您可以随时获取length每个单元格中的字符串，并采取相应措施。也就是说，如果长度超过某个数字。字符，您将列号添加到数组中，稍后传递给aTargets
于 2012-11-26T21:44:46.067 回答
2
您可以根据需要放大一列，我使用了 70%，但您也可以使用 400px 等像素
http://live.datatables.net/ajemid/4/edit
$(document).ready(function() {
$('#example').dataTable({
"sScrollX":"100%",
"aoColumnDefs": [
{ "sWidth": "70%", "aTargets": [ 0 ] }
]
});
} );
"aTargets": [ 0 ] 用于第一列，1 用于第二列，依此类推。
为了限制文本，您可以应用诸如 max-height:200px; 之类的 CSS 属性。和溢出：隐藏；您还可以在单元格底部应用垂直渐变（对白色透明），为长单元格提供很好的淡入白效果。
于 2012-11-28T17:15:40.327 回答
1
$(document).ready( function () {
$('#example').dataTable( {
"bAutoWidth": false
} );
} );
稍后设置width在 <td>您的桌子内。
于 2012-11-19T11:04:15.000 回答
1
nobr最简单的做法是使用html 标记将任何进入表格的内容包装起来。它可能不是最优雅的解决方案，但它会起作用，您可以使用 CSS 来限制单元格宽度并设置溢出。我在这里克隆了你的例子。
通读 DataTables 文档，手动解决方案可能仅在您调用datatable()现有 DOM 元素时才有效。如果您想在从数组或 AJAX 源加载数据时执行此操作，您可能必须nobr使用 jQuery 以编程方式将每个表格单元格中的数据包装起来。这样做的好处是您可以更好地控制您决定不包装的内容。
DataTables API 提供pre-init或post-init API 调用 - 您可以将回调绑定到 jQuery 函数，该函数遍历表中的所有 TD 并将内容包装在nobr标签中。
我希望这是有道理的。祝你好运！
于 2012-11-27T18:01:08.990 回答
1
您可以使其滚动条自动出现在超大数据上
<style>
.box{width:250;height:75;overflow:auto}
</style>
<div class="box" >your data here will only have a scrollbar if it overflows your predefined height width parameters</div>
于 2012-11-28T01:03:21.973 回答
1
为每列指定您自己的宽度。
$(document).ready(function() {
$('#example').dataTable({
"sScrollX":"100%",
"aoColumns": [
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" },
{ "sWidth": "30%" }
]
});
} );
于 2012-11-28T11:58:44.113 回答
0
你的解决方案是%
将此 td 类的名称从更改odd gradeA为what_ever并添加
width: 80%;
当然，你可以随心所欲地玩它。
或改变这个
<tr class="odd gradeA"> //of the long text
到
<tr style="width: 80%">
并且所有其他tds 都将被触发，因此您也可以对其他tds 做同样的事情，%
希望对您有帮助
于 2012-11-29T09:07:26.420 回答
0
在我看来，你应该限制你的脚本在服务器端的输出，它会创造更好的视觉效果，但也会节省一些带宽，并减少页面负载
于 2012-11-29T11:58:35.803 回答
0
即兴发挥@Burhan 的回复：您可以限制直接显示在单元格中的字符并将其添加到单元格的标题中，这样它就会创建一种工具提示的效果（== qTip??）
$(document).ready(function() {
$('#example').dataTable({
"sScrollX":"100%",
"fnInitComplete": function(oSettings, json) {
$('#example tr').each(function(i){
$('td', this).each(function(j){
// get length of text
var l = $(this).text().length;
var limit = 200;
// set larger width if text length is greater than 300 characters
if(l > limit){
$(this).attr('title',$(this).text())
.text($(this).text().substr(0,limit));
}
});
});
}
});
});
将限制变量更改为对您来说舒适的任何内容.........
于 2012-11-29T12:40:33.267 回答