DataTables固定列在scrollX激活时太短

时间:2018-04-02 14:57:02

标签: javascript jquery datatables

我目前正在使用固定列处理带有dataTables的项目,我遇到了固定列和scrollX的问题。我目前正在使用桌面上的完美滚动条,以便从表体中删除不需要的滚动条,这完全按照我的预期工作,直到我将表格调整为激活scrollX的程度。当发生这种情况时,表体仍然按预期运行并按预期运行,但固定列高度则缩短17px(Chrome中正常滚动条的高度)。无论我尝试什么,我似乎无法解决这个问题。

期望的效果(查看&#34右侧的垂直线;客户名称" - 它到达底部)

enter image description here

不受欢迎的效果(查看&#34右侧的垂直线;客户名称" - 它没有到达底部)

enter image description here

初始化代码

    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'
    }
});

0 个答案:

没有答案