我正在使用datatables动态列。 这是代码:
var tableData;
var tableName='#rdiTable';
$(document).ready(function (){
jQuery.ajax({
type : "GET",
url : "table/"+document.getElementById("hiddenIdCar").value,
headers: {'Content-Type': 'application/json'},
beforeSend: function() {
waitingModal.showPleaseWait();
},
success: function(data,status,xhr){
//No exception occurred
if(data.success){
tableData = data.result;
$.each(tableData.columns, function (k, colObj) {
var str = '<th style="width: 50px;" data-html="true" data-toggle="tooltip" title="<b>NAME</b>:'+ colObj.parName + '<br><b>DESCRIPTION</b>:' + colObj.description + '<br><b>NOTE</b>: ' + colObj.note + '"></i>' + colObj.parName + '</th>';
$(str).appendTo(tableName+'>thead>tr');
});
} else {
waitingModal.hidePleaseWait();
notifyMessage(data.result, 'error');
}
},
error: function(xhr,status,e){
window.location.href = "/500";
}
}).complete(function() {
//initialize datatable
if ( ! $.fn.DataTable.isDataTable( tableName ) ) {
var rdiTable = $(tableName).DataTable({
scrollCollapse: true,
scrollX: true,
scrollY: '60vh',
paging: false,
"data": tableData.data,
"columns": tableData.columns,
fixedColumns: {
leftColumns: 4
},
"initComplete": function(settings){
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
//add timeout because otherwise user could see a too fast waiting modal
setTimeout(function(){
waitingModal.hidePleaseWait();
}, 1000);
}
});
}
else {
rdiTable.ajax.url("table/"+document.getElementById("hiddenIdCar").value).load();
}
});
});
并在HTML代码中:
<div class="box-body">
<!-- Fleets table -->
<table id="slTable" class="table table-bordered table-striped">
<thead>
<tr>
</tr>
</thead>
</table>
</div>
问题是某些单元格的值太长而且表格会拉伸列或行。是否可以将所有单元格设置为相同的大小来减小值?我可以像在列上一样在单元格上添加弹出窗口。我只找到了columns.width,但是我的列数量很大且不可预测。也许我必须设置css值,但我怎么能把它们放进去?谢谢 这是json的一个例子(它有很多字段)
其中一些细胞非常长,如1x0000000020300000000x000200003000200 ......
我应该在'style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;"'
附近添加<td
更新:可能与
#slTable td {
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
max-width:1px;
}
</style>
我已经解决了,我正在测试。