Question

我正在使用Datatables，一个用于创建自定义表的jQuery插件。我正在尝试创建一个包含许多列的表，其中至少有一列包含大量文本。问题是具有长文本的列不是更宽，而是更高，使得表更难以供用户阅读。

如何使文本列更宽更低？

以下是我的问题的截图：

enter image description here

这是我的问题：

http://live.datatables.net/ujudij/edit#javascript,html

Answer 1

您可能会考虑使用css文本溢出属性：http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/并与具有长文本的单元格的工具提示结合使用。

Answer 2

在数据表渲染完成后，您可以检查每个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);
               }
           });
        });
    }
  });
});

See this code demo here

您也可以使用 var l = $（this）.height（）; 来使用单元格高度，但我认为这不会为您提供正确的结果，因为在调整宽度之前其他单元格相同可能没有大文本的行也有相同的高度，因此它们的宽度属性也会使用此更改，这对您的情况不正确，我想

虽然我认为更好的想法是修剪文字以限制，添加“更多”链接并使用某些插件显示全文，例如qTip

Answer 3

我写了一个小的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("&nbsp;").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);

Answer 4

您需要使用aoColumnDefs，它允许您按标题或编号定位特定列，并使用插件的本机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) 
]
});

});

a working example

documentation

如果您事先不知道要定位哪些列，则始终可以获得每个单元格中字符串的length，并采取相应措施。也就是说，如果长度超过某个没有。在chars中，您将列号添加到数组中，稍后传递给aTargets

Answer 5

您可以根据需要放大列，我使用了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这样的css属性：200px;溢出：隐藏;你也可以在单元格底部应用垂直渐变（透明到白色），为长单元格提供漂亮的褪色效果。

Answer 6

$(document).ready( function () {
$('#example').dataTable( {
"bAutoWidth": false
} );
} );

稍后在表格中为width设置<td>。

Answer 7

最简单的方法是使用nobr html标记包装进入表中的任何内容。它可能不是最优雅的解决方案，但它可以工作，您可以使用CSS来限制单元格宽度并设置溢出。我克隆了你的例子here。

通过阅读DataTables文档，只有在现有DOM元素上调用datatable()时，手动解决方案才有效。如果要在从数组或AJAX源加载数据时执行此操作，则可能必须使用jQuery以编程方式使用nobr标记将数据包装在每个表单元格中。关于这一点的好处是你可以更好地控制你决定现在的东西。

DataTables API提供pre-init或post-init API调用 - 您可以将回调绑定到jQuery函数，该函数遍历表中的所有TD并将内容包装在nobr中标签

我希望这是有道理的。祝你好运！

Answer 8

您可以使滚动条自动显示在超大数据

上

<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>

Answer 9

为每列指定自己的宽度。

$(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%" }
    ]
  });
} );

Answer 10

您的解决方案是%

将此td类的名称从odd gradeA更改为what_ever并添加此

    width: 80%;

当然你可以随心所欲地玩它。

或更改此

 <tr class="odd gradeA"> //of the long text

到

  <tr style="width: 80%">

将触发所有其他td 所以你也可以通过td向其他%做同样的事情。希望它有所帮助

Answer 11

在我看来，你应该限制你的脚本在服务器端的输出，它会创造更好的视觉效果，但也节省一些带宽，并将减少页面加载

Answer 12

即兴创作@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));
               }
           });
        });
    }
  });
});

将限制变量更改为适合您的任何内容.........

表格列太高了

12 个答案: