Javascript Javascript数据表中的自动换行列数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33275446/
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
Word wrap column data in Javascript datatable
提问by Rajneesh Kumar Gobin
I have a JS datatable where we input customer information, on certain case some customer reference are as such
我有一个 JS 数据表，我们在其中输入客户信息，在某些情况下，一些客户参考就是这样
reference_text=%26reference%5Ftext%3D%2526reference%255Ftext%253Dtest%252520ipsum%25252C%25252008%25252DAug%25252D08%2546%26&
This breaks my html table and forces a column to grow out of proportion as this does not contain a space, i have setup a example in JS fiddle to illustrate this issue, is there a way we can force this column to be in a consistent format with the other or wrap the text to make it fit in the column?
这打破了我的 html 表并迫使一列不成比例地增长，因为它不包含空格，我在 JS fiddle 中设置了一个示例来说明这个问题，有没有办法可以强制该列采用一致的格式与另一个或包装文本以使其适合列？
$(document).ready(function () {
if ($('#report_gen_user').length) {
$('#report_gen_user').dataTable(
{
"iDisplayLength": -1,
initComplete: function () {
var api = this.api();
api.columns().indexes().flatten().each(function (i) {
if (i == 2 || i == 9) {
var column = api.column(i);
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
$(".hidefooter").html("");
}
});
},
"aLengthMenu": [
[15, 25, 35, 50, 100, -1],
[15, 25, 35, 50, 100, "All"]
],
"aoColumnDefs": [{
"bVisible": false,
"aTargets": []
}],
"aaSorting": [],
"fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {
var columnas = [1, 5]; //the columns you wish to add
for (var j in columnas) {
var columnaActual = columnas[j];
var total = 0;
var allTimeTotal = 0;
for (var i = iStart; i < iEnd; i++) {
total = total + parseFloat(aasData[aiDisplay[i]][columnaActual]);
}
total = total.toFixed(2);
for (var counter in aasData) {
allTimeTotal = allTimeTotal + parseFloat(aasData[counter][columnaActual]);
//console.log((aasData[counter][columnaActual]));
}
allTimeTotal = allTimeTotal.toFixed(2);
if (total == allTimeTotal) {
$($(nRow).children().get(columnaActual)).html(' '+total);
} else {
$($(nRow).children().get(columnaActual)).html(' '+total + ' (' + allTimeTotal + ')');
}
} // end
}
}
);
}
})
回答by davidkonrad
Set autoWidthto false and define your prefered columnwidth's :
设置autoWidth为 false 并定义您的首选columnwidth：
var table = $('#example').DataTable({
autoWidth: false,
columns : [
{ width : '50px' },
{ width : '50px' },
{ width : '50px' },
{ width : '50px' },
{ width : '50px' },
{ width : '50px' }
]
});
then, most important - add this CSS :
然后，最重要的是 - 添加这个 CSS ：
table.dataTable tbody td {
word-break: break-word;
vertical-align: top;
}
word-breakis the important part, vertical-topis for the eyes :)
word-break是重要的部分，vertical-top是为了眼睛:)
demo -> http://jsfiddle.net/qh63k1sg/
演示 -> http://jsfiddle.net/qh63k1sg/
In your fiddle the above seems not to work, but that is because you add each and every string as values to a <select>that ends up being even longer. To prevent that, cut long strings off before inserting them as <option>values; you can add ...to the end :
在您的小提琴中，以上似乎不起作用，但那是因为您将每个字符串作为值添加到<select>最终变得更长的 a 中。为了防止这种情况，在将长字符串作为<option>值插入之前剪掉它们；你可以添加...到最后：
column.data().unique().sort().each(function (d, j) {
if (d.length>25) { d=d.substring(0,25)+'...' }
select.append('<option value="' + d + '">' + d + '</option>')
});
your fiddle forked -> http://jsfiddle.net/bdwd1ee7/
你的小提琴分叉 - > http://jsfiddle.net/bdwd1ee7/
