我目前正在使用固定列处理带有dataTables的项目,我遇到了固定列和scrollX的问题。我目前正在使用桌面上的完美滚动条,以便从表体中删除不需要的滚动条,这完全按照我的预期工作,直到我将表格调整为激活scrollX的程度。当发生这种情况时,表体仍然按预期运行并按预期运行,但固定列高度则缩短17px(Chrome中正常滚动条的高度)。无论我尝试什么,我似乎无法解决这个问题。
期望的效果(查看&#34右侧的垂直线;客户名称" - 它到达底部)
不受欢迎的效果(查看&#34右侧的垂直线;客户名称" - 它没有到达底部)
初始化代码
var iTable = $('#datatable').DataTable({
"oLanguage": {
"sSearch": "",
"sSearchPlaceholder": "Enter Keywords Here"
},
"language": {
"emptyTable": "No Pending Inspections!"
},
"ajax": {
"url": domain + '/admin-api/warranties/inspections/',
"dataSrc": ''
},
"deferRender": true,
"order": [ 6, 'asc' ],
"autoWidth": true,
"scroller": true,
"processing": true,
"scrollCollapse": true,
"columns": [
{
data: '_id',
visible: false,
searchable: false
},
{
data: 'userID',
visible: false,
searchable: false
},
{
width: 40,
data: '_id',
"render": function (data) {
return '<div style="width: 26px;padding-top: 6px;"><input type="checkbox" class="filled-in" id="filled-in' + data + '" /><label for="filled-in' + data + '"></label></div>';
},
orderable: false,
"className": "dt-center"
},
{
width: 120,
data: 'name',
"className": "dt-left"
},
{
width: undefined,
data: 'address'
},
{
width: undefined,
data: 'company'
},
{
width: 90,
data: 'jobDetails.dateInstalled',
"render": function (data) {
var date = moment(data).format('M/D/YYYY');
return date;
},
className: "dt-right"
}
],
"paging": true,
scrollX: true,
fixedColumns: {
leftColumns: 4,
heightMatch: 'none'
}
});