分页时数据表列宽自动增加

Question

我的页面上有三个数据表，带有分页选项。表上的数据通过ajax 加载。在对桌子进行任何操作之前，一切都是完美的。如果我对表格进行分页，那么表格的大小会自动增加。这是我的代码：

$.ajax({
        type: 'GET',
        url: '/get/data',
        success: function (resp) {

            let str = '';
            for (let j = 1; j < resp.length; j++) {
                str += `<tr>
                                <td>${moment(resp[j].purchase_date).format('MM-DD-YYYY')}</td>
                                <td>${resp[j].items}</td>
                            </tr>\n`;
            }
            $("#table1 tbody").html(str);
            initDataTable();
        }
    });


    function initDataTable() {
            $('#table1').DataTable({
                "scrollY": 250,
                "scrollX": false,
                "pagingType": "full",
                "autoWidth": false,
                "pageLength": 10,
                bFilter: false,
                bInfo: false,
                aoColumnDefs: [
                    {
                        bSortable: false,
                        aTargets: [-1]
                    }
                ]
            });
        }

这是数据表的 CSS。

#table1, #table2, #table3 {
    table-layout: fixed;
    width: 100% !important;
}

.dataTables_wrapper {
    background: #fff;
    border-radius: 8px;
    padding:0 30px 0px;
    overflow: hidden;
}

.dataTables_wrapper table.dataTable thead .sorting {
    background: url(../img/sort_both.png) no-repeat center right!important
}

.dataTables_wrapper table.dataTable thead .sorting_asc {
    background-image: url(../img/sort_asc.png)!important;
    background-repeat: no-repeat!important
}

.dataTables_wrapper table.dataTable thead .sorting_desc {
    background-image: url(../img/sort_desc.png)!important;
    background-repeat: no-repeat!important
}

Answer 1

默认情况下，Datatable 通过documentation 中给出的默认sWidth 属性将智能宽度应用于所有列。您可以在 aoColumnDefsaoColumnDefs 属性中为特定列修改它。