我有一个数据表,其中表体滚动,但表头不滚动。我想让表头也滚动。为此,我在jquery.dataTables.css文件中添加了一些代码:
div.dataTables_scrollHead{
overflow: scroll !important;
}
但是现在表格标题会自动滚动,当标题滚动时,表格主体不会滚动。
知道如何让标题滚动到正文吗?非常感谢您的帮助!
这是我的DataTable代码:
table = $('#dashboardDataTable').DataTable( {
data : dashBoardMainData,
"columns": dashboardColumns,
"destroy" : true,
"paging" : false,
"scrollY" : dashboardHeight,
"scrollX" : true,
"sScrollX": "100%",
"bScrollCollapse": true,
"searching" : false,
"info" : false,
"ordering" : true,
"fixedColumns": true,
dom : 'Zlfrtip',
"colResize": {"tableWidthFixed": false},
"autoWidth" : true,
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
var i=1;
if(!isNUllOrEmpty(dispData)){
for(var x in tableJson.totalRow){
$(api.column(i++).footer()).html(dispTotalData[tableJson.totalRow[x]]);
}
$('#dashboardDataTable .dataTables_scrollFoot').css({"height":"auto"});
$('#dashboardDataTable .DTFC_LeftFootWrapper').css({"height":"auto"});
}else{
$('#dashboardDataTable .dataTables_scrollFoot').css({"height":"auto"});
$('#dashboardDataTable .DTFC_LeftFootWrapper').css({"height":"auto"});
$('#dashboardDataTable .dataTables_scrollBody').css({"height":"40"});
for(var x in tableJson.totalRow){
$(api.column(i++).footer()).html('');
}
}
},
"fnDrawCallback": function() {
var dataLength = dispData.length;
//This function is for appending child data when ever sort happening.
for(kp=0;kp<childRows.length;kp++){
var childKey = childRows[kp].key;
if(!isNUllOrEmpty(childKey)){
var childStr = childDataMap[childKey]
if(!isNUllOrEmpty(childStr)){
childRows[kp].value.after(childStr);
}
}
}
}
});