为什么Datatable页眉和页脚最初没有正确显示？

Question

我已将datatable配置如下：

function BindDataTable(targetGrid) {
        var sortableGrid = $(targetGrid).attr('id');
        var DT = $('#' + sortableGrid).dataTable({
            "fnInitComplete": function () {
                $('#' + sortableGrid + ' thead > tr').removeClass().addClass("HeaderGridView2").css('cursor', 'pointer');
                $('#' + sortableGrid + ' tfoot > tr').removeClass().addClass("FooterGridView2");
            },
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": true,
            scrollY: '500px',
            "bInfo": false,
            "bScrollCollapse": true,
            "bAutoWidth": false,
            "asStripClasses": null, //To remove "odd"/"event" zebra classes
            "fnDrawCallback": function () {
                $('#' + sortableGrid + ' tr').removeClass();
                $('#' + sortableGrid + ' tr:even').addClass("RowGridView2 even");
                $('#' + sortableGrid + ' tr:odd').addClass("AlternatingRowGridView2 odd");
                $('#' + sortableGrid + ' thead > tr').removeClass().addClass("HeaderGridView2").css('cursor', 'pointer');
                $('#' + sortableGrid + ' tfoot > tr').removeClass().addClass("FooterGridView2");
            }
        });

    }

但是当数据表第一次绑定并显示时，由于页眉和页脚未按列宽设置，因此无法正确显示。单击任何列以对表进行排序后，它将按预期显示属性页眉和页脚，如下面的屏幕所示。为什么会这样？

Answer 1

原因

您的表最初可能是隐藏的，例如位于模态窗口，非活动标签或其他隐藏元素中。

解

您需要在显示表格时处理事件并调用columns().adjust() API方法。这将在显示更改后重新计算列宽。

$('#'+initId).DataTable()
    .columns.adjust();

有关详细信息，请参阅columns().adjust() API方法。

LINKS

当最初隐藏表时，请参阅jQuery DataTables – Column width issues with Bootstrap tabs以获取jQuery DataTables中列最常见问题的解决方案。