修复了数据表重叠的列,第一行显示两次

时间:2019-07-13 08:30:13

标签: jquery datatables

当我尝试用固定的列初始化数据表时,它不起作用,并且当我水平滚动时,第一行也显示两次。

对不起,我现在已经编辑了问题以添加代码。我希望这会有所帮助。

我的代码如下:

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

0 个答案:

没有答案