大佬教程收集整理的这篇文章主要介绍了jQuery DataTable溢出和文本包装问题,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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 });
@R_831_6944@,直到有一个长文本字符串的记录…当一个记录显示真正长的文本,数据表溢出在页面的右侧。 (见下面的屏幕截图,红线是页面应该结束的地方)
http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg
有人可以告诉我如何封装在单元格中的文本或防止此溢出问题?
我试过通过’table-layout:fixed’…这可以防止溢出,但将所有的列设置为相同的宽度。
谢谢
.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; }
[编辑添加:]使用我自己的代码,最初失败后,我认识到可能有助于人的第二个要求。表本身需要有固定的布局或单元格将只是继续尝试扩展到适应内容无论什么。如果DataTables样式或您自己的样式尚未这样做,则需要设置:
table.someTableClass { table-layout: fixed }
现在文本被截断为省略号,实际上“看到”潜在隐藏的文本,你可以实现一个工具提示插件或一个细节按钮或东西。但一个快速和肮脏的解决方案是使用JavaScript来设置每个单元格的标题与其内容相同。我使用jQuery,但你不必:
$('.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到底。
这整个截断方法也将有一个限制,你已经表明你不喜欢:默认列将有相同的宽度。我识别将持续宽或持续缩窄的列,并明确设置基于百分比的宽度(您可以在您的标记或使用sWidth)。任何没有显式宽度的列都会得到剩余空间的均匀分布。
这可能看起来像很多妥协,但最终的结果是值得的。
以上是大佬教程为你收集整理的jQuery DataTable溢出和文本包装问题全部内容,希望文章能够帮你解决jQuery DataTable溢出和文本包装问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。