jQuery DataTable 溢出和文本换行问题 [英] jQuery DataTable overflow and text-wrapping issues
问题描述
我有以下 DataTable(全角 css 类集宽度 = 100%)
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:
Javascript:
var profileTable =
$(".datatable").dataTable({
"iDisplayLength": 25,
"bDestroy": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false
});
一切正常，直到出现一个带有长文本字符串的记录......当出现带有非常长文本的记录时，数据表会在页面右侧溢出.(见下面的截图，红线是页面应该结束的地方)http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg
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?
我已经尝试过通过table-layout: fixed"...这可以防止溢出但将所有列设置为相同的宽度.
I've tried via 'table-layout: fixed'...this prevents the overflow but sets all of the columns to the same width.
谢谢
推荐答案
我接受了限制(对某些人来说是一种好处)，即我的行只有一行文本高.包含长字符串的 CSS 变为:
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:] 在使用我自己的代码并最初失败后，我认识到可能对人们有所帮助的第二个要求.表格本身需要有固定的布局，否则无论如何单元格都会不断尝试扩展以容纳内容.如果 DataTables 样式或您自己的样式还没有这样做，您需要设置它:
[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
}
现在文本被省略号截断了，要真正看到"可能隐藏的文本，您可以实现工具提示插件或详细信息按钮或其他东西.但是一个快速而肮脏的解决方案是使用 JavaScript 将每个单元格的标题设置为与其内容相同.我使用了 jQuery，但您不必:
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 还提供行和单元格渲染级别的回调，因此您可以提供逻辑以在该点设置标题，而不是使用 jQuery.each 迭代器.但是，如果您有其他修改单元格文本的侦听器，则最好在末尾使用 jQuery.each 来点击它们.
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.
整个截断方法还有一个限制，你已经表明你不喜欢:默认情况下，列将具有相同的宽度.我确定将始终宽或始终窄的列，并在它们上明确设置基于百分比的宽度(您可以在标记中或使用 sWidth 进行设置).任何没有明确宽度的列都会均匀分布剩余空间.
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屋！
