jQuery DataTable溢出和文本包装问题 [英] jQuery DataTable overflow and text-wrapping issues

问题描述

我有以下DataTable（全宽css类集width = 100％）

 < table class =数据全宽> 
< thead> 
< L< / th> 
< th>债权人第1行< 
< th>债权人第2行< 
< th>地址< / th> 
< th> City< / th> 
< th>状态< / th> 
< th> Zip< / th> 
< th>< / th> 
< / thead> 
< tbody> 
 ... 
< / tbody> 
< / table> 
  

Javascript：

 code> 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'...这样可以防止溢出但将所有列设置为相同宽度。

感谢

解决方案

有些人的好处）让我的行只有一行文本高。包含长字符串的CSS将变为：

  .datatable td {
 overflow：hidden; / *这是什么修复扩展* / 
文本溢出：省略号; / *不支持所有浏览器，但我接受了权衡* / 
白色空间：nowrap; 
} 
  

使用我自己的代码，最初失败后，我认识到可能有助于人们的第二个要求。表本身需要有一个固定的布局，或者单元格将不断尝试扩展以适应内容。如果DataTables样式或您自己的样式尚未这样做，您需要设置它：

  table.someTableClass {
 table-layout：fixed 
} 
  

现在文本被截断为省略号，实际上看到可能隐藏的文本，您可以实现一个工具提示插件或一个详细信息按钮或某些东西。但是一个简单而肮脏的解决方案是使用JavaScript将每个单元格的标题设置为与其内容相同。我使用jQuery，但是你不需要：

  $（'。datatable tbody td' index）{
 $ this = $（this）; 
 var titleVal = $ this.text（）; 
 if（typeof titleVal ===string&& titleVal！= =''）{
 $ this.attr（'title'，titleVal）; 
} 
}）; 
  

DataTables还提供行和单元格渲染级别的回调，因此您可以提供设置标题的逻辑而不是使用 jQuery.each 迭代器。但是，如果您有其他监听器修改单元格文本，则可能最后使用$ code> jQuery.each 更好地触发。

这个整个截断方法也有一个限制，你表示你不是粉丝：默认情况下，列将具有相同的宽度。我确定要始终如一地广泛或一致缩小的列，并明确设置基于百分比的宽度（您可以在标记或sWidth中执行）。任何没有明确宽度的列都可以均匀分配剩余的空间。

这似乎是一个妥协，但最终的结果是值得的。 p>

I have the following DataTable (full-width css class sets width = 100%)

<table class="datatable full-width">
    <thead>
        <th>LOB</th>
        <th>Creditor Line 1</th>
        <th>Creditor Line 2</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip</th>
        <th></th>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Javascript:

var profileTable =
            $(".datatable").dataTable({
                "iDisplayLength": 25,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bAutoWidth": false
            });

Everything works fine until there is a record with a long text string...when a record appears with really long text, the data table overflows on the right of the page. (See Screenshot Below, the red line is where the page should end) http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg

Can someone tell me how to either wrap the text in the cells or prevent this overflow issue?

I've tried via 'table-layout: fixed'...this prevents the overflow but sets all of the columns to the same width.

Thanks

解决方案

I settled for the limitation (to some people a benefit) of having my rows only one line of text high. The CSS to contain long strings then becomes:

.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;
}

[edit to add:] After using my own code and initially failing, I recognized a second requirement that might help people. The table itself needs to have a fixed layout or the cells will just keep trying to expand to accomodate contents no matter what. If DataTables styles or your own styles don't already do so, you need to set it:

table.someTableClass {
  table-layout: fixed
}

Now that text is truncated with ellipses, to actually "see" the text that is potentially hidden you can implement a tooltip plugin or a details button or something. But a quick and dirty solution is to use JavaScript to set each cell's title to be identical to its contents. I used jQuery, but you don't have to:

  $('.datatable tbody td').each(function(index){
    $this = $(this);
    var titleVal = $this.text();
    if (typeof titleVal === "string" && titleVal !== '') {
      $this.attr('title', titleVal);
    }
  });

DataTables also provides callbacks at the row and cell rendering levels, so you could provide logic to set the titles at that point instead of with a jQuery.each iterator. But if you have other listeners that modify cell text, you might just be better off hitting them with the jQuery.each at the end.

This entire truncation method will ALSO have a limitation you've indicated you're not a fan of: by default columns will have the same width. I identify columns that are going to be consistently wide or consistently narrow, and explicitly set a percentage-based width on them (you could do it in your markup or with sWidth). Any columns without an explicit width get even distribution of the remaining space.

That might seem like a lot of compromises, but the end result was worth it for me.

这篇关于jQuery DataTable溢出和文本包装问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！