Javascript jquery 数据表 - 设置列宽和换行文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39666677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery datatable - set column width and wrap text
提问by Vimalan Jaya Ganesh
We are using the Scroller plugin for our jquery data table to allow virtual scrolling. However, we have requirement to support text wrapping inside a cell, as user would like to view the entire text instead of truncated one. I observed that it does not wrap the text by default. Is there a way to support this feature? Any possible workaround?
我们正在为我们的 jquery 数据表使用 Scroller 插件以允许虚拟滚动。但是，我们需要支持单元格内的文本换行，因为用户希望查看整个文本而不是截断的文本。我观察到它默认情况下不会包装文本。有没有办法支持这个功能？任何可能的解决方法？
Fiddlerhttps://jsfiddle.net/Vimalan/2koex0bt/1/
提琴手https://jsfiddle.net/Vimalan/2koex0bt/1/
html Code:
html代码：
<table id="example" class="display" cellspacing="0" width="100%"></table>
js code:
js代码：
var detailsSample = "DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations."
var dataList = [];
for (var i=1; i<=500; i++)
{
var dataRow = {};
dataRow.ID = i;
dataRow.FirstName = "First Name " + i;
dataRow.LastName = "Last Name " + i;
if (i%5 ==0)
{
dataRow.Details = detailsSample;
}
else
{
dataRow.Details = "Large text "+i;
}
dataRow.Country = "Country Name";
dataList.push(dataRow);
}
$('#example').DataTable( {
data: dataList,
deferRender: true,
scrollX: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
searching: false,
paging: true,
info: false,
columns: [
{ title: "ID", data: "ID" },
{ title: "First Name", data: "FirstName" },
{ title: "Change Summary", data: "LastName"},
{ title: "Details", data: "Details", "width": "400px" },
{ title: "Country", data: "Country" }
]
} );
Expectation
期待
In the above table, the "Details" column should always have a width of 400px and the text in that column should wrap.
在上表中，“详细信息”列的宽度应始终为 400 像素，并且该列中的文本应换行。
Any suggestion will be greatly appreciated.
任何建议将不胜感激。
回答by Vimalan Jaya Ganesh
Found the solution by wrapping the column data in a div and setting the white-space, width css properties for the div.
通过将列数据包装在 div 中并为 div 设置空白、宽度 css 属性找到了解决方案。
Fiddler:https://jsfiddle.net/Vimalan/2koex0bt/6/
提琴手：https : //jsfiddle.net/Vimalan/2koex0bt/6/
JS
JS
$('#example').DataTable( {
data: dataList,
deferRender: true,
scrollX: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
searching: false,
paging: true,
info: false,
columns: [
{ title: "ID", data: "ID" },
{ title: "First Name", data: "FirstName" },
{ title: "Change Summary", data: "LastName"},
{ title: "Details", data: "Details" },
{ title: "Country", data: "Country" }
],
columnDefs: [
{
render: function (data, type, full, meta) {
return "<div class='text-wrap width-200'>" + data + "</div>";
},
targets: 3
}
]
} );
CSS
CSS
.text-wrap{
white-space:normal;
}
.width-200{
width:200px;
}
回答by Keith
Not sure if you add in stylesheets or not, but set your table-layout to fixed and add in the white-space. Currently you are using white-space:no-wrap which negates what you're trying to do. Also I set a max-width to all your td's so this will happen whenever there is overflow.
不确定是否添加样式表，但将表格布局设置为固定并添加空白。目前您正在使用 white-space:no-wrap 否定您正在尝试做的事情。此外，我为您的所有 td 设置了最大宽度，因此只要有溢出就会发生这种情况。
Add this at the end of your jQUery
将此添加到您的 jQUEry 的末尾
https://jsfiddle.net/2koex0bt/5/
https://jsfiddle.net/2koex0bt/5/
$(document).ready(function(){
$('#example').DataTable();
$('#example td').css('white-space','initial');
});
If you want to just use the api, do this ( add in anymore CSS to change the styling ).
如果您只想使用 api，请执行此操作（添加更多 CSS 以更改样式）。
If you want to do it with CSS, do this:
如果你想用 CSS 做到这一点，请执行以下操作：
table {
table-layout:fixed;
}
table td {
word-wrap: break-word;
max-width: 400px;
}
#example td {
white-space:inherit;
}
