当我尝试用固定的列初始化数据表时,它不起作用,并且当我水平滚动时,第一行也显示两次。
对不起,我现在已经编辑了问题以添加代码。我希望这会有所帮助。
我的代码如下:
t = $('#m_table_1').DataTable({
retrieve: true,
autoWidth: false,
sScrollX: '100%',
sScrollY: '500px',
scrollCollapse: true,
fixedHeader: true,
fixedColumns: {
leftColumns: 2,
},
dom: "<'row'<'col-sm-12'tr>>\n\t\t\t<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>",
buttons: ["print", "copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"],
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
pageLength: 20,
language: {
lengthMenu: "Display _MENU_"
},
processing: !0,
serverSide: !0,
oLanguage: {
sProcessing: ` <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="max-width: 100%">
<span class="title">Loading...</span>
</div>
</div>`
},
ajax: {
url: "{{route('attendanceajax')}}",
type: "get"
},
columns: a,
columnDefs: [{
className: "td-reset",
targets: "_all"
},
{
targets: 1,
width: "300px"
},
{
targets: "_all",
createdCell: function (td, cellData, rowData, row, col) {
switch (cellData) {
case 'A':
$(td).find('a').addClass('list-absent');
break;
case 'P':
$(td).find('a').addClass('list-present');
break;
case 'SL':
$(td).find('a').addClass('list-sick-leave');
break;
case 'PH':
$(td).find('a').addClass('list-public-holiday');
break;
case 'V':
$(td).find('a').addClass('list-vecation');
break;
case 'PD':
$(td).find('a').addClass('list-pending');
break;
case 'O':
$(td).find('a').addClass('list-pay-off');
break;
case '':
$(td).find('a').addClass('attendance-not-marked');
break;
}
}
},
{
targets: 1,
width: "500px"
}
],
});
结果看起来像这样 Image when the page is loaded
This is the page when u scroll horizontally. The first row is overlapping