Javascript数据表中的自动换行列数据
Word wrap column data in Javascript datatable
我有一个JS数据表,我们输入客户信息,在某些情况下,一些客户参考是这样的
reference_text=%26reference%5Ftext%3D%2526reference%255Ftext%253Dtest%252520ipsum%25252C%25252008%25252DAug%25252D08%2546%26&
这打破了我的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
}
}
);
}
})
http://jsfiddle.net/63g6e655/3/设置autoWidth
为false并定义您的首选column
width
:
var table = $('#example').DataTable({
autoWidth: false,
columns : [
{ width : '50px' },
{ width : '50px' },
{ width : '50px' },
{ width : '50px' },
{ width : '50px' },
{ width : '50px' }
]
});
然后,最重要的是-添加这个CSS:
table.dataTable tbody td {
word-break: break-word;
vertical-align: top;
}
word-break
是重要的部分,vertical-top
是为眼睛:)
演示-> http://jsfiddle.net/qh63k1sg/
在你的小提琴上面似乎不起作用,但那是因为你将每个字符串作为值添加到<select>
,最终变得更长。为了防止这种情况,在将长字符串插入<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/
相关文章:
- 如何在内容可编辑或其他地方找到通过自动换行创建的换行符
- 在 35 个字符后的多行文本框中自动换行
- 在 CSS/JS 中,如何在每 n 个单词处自动换行
- 如何在锚标记中自动换行文本 URL
- 三.js自动换行
- 获取字符串、提取 ID 和自动换行
- 从服务器 csv 文件中提取的数据缺少换行符
- 使用棱镜.js防止自动换行
- 使用Javascript选择最后一次自动换行后的最后一行
- 自动换行指定长度的字符串
- 如何检测文本区域中的自动换行
- CSS/JS-你能像对待行一样对待浏览器自动换行来给它们上色吗
- 控制jQuery中的自动换行和取消换行方法
- 如何检测一行何时自动换行到文本区域中?
- 控制文本中自动换行的位置
- 如果输入值为>1,将jQuery自动换行
- JointJS中的自动换行
- 文本区域自动换行
- JavaScript 字符串自动换行匹配另一个字符串
- 从数据库检索数据时换行