Question

我正在使用带有jQuery UI手风琴的DataTables。

我有代码在打开手风琴部分时用数据（vis json）填充Datatable，但这并没有正确对齐标题。

表格定义

        $('#tblSuppContacts').dataTable({
              "autoWidth":false
            , "footer": false
            , "info":false
            , "JQueryUI":true
            , "language": {"emptyTable":"No Contacts For Supplier"}
            , "ordering":true
            , "paging":false
            , "scrollY":"325px"
            , "scrollCollapse": true
            , "columnDefs": [
                        { className: "LeftNoWrap", "targets": [ 1,2,3,4,5,6,7 ] }
                    ,   { className: "RightNoWrap", "targets": [ 0 ] }
                ]
        });

这是在手风琴部分打开时触发的代码，它会在读取之前检查表格是否有任何行。

var table = $('#tblSuppAddress').DataTable();
if ( ! table.data().any() ) {fncSuppAddressRead();}

然后此代码将数据加载到表中。

    if ( $.fn.DataTable.isDataTable('#tblSuppContacts') ) {
        $('#tblSuppContacts').DataTable().clear();
    }

    var dTable = $('#tblSuppContacts').DataTable();

    for (var i = 0; i < pData.length; i++) {
        dTable.row.add([
             fncFormatNumber(pData[i].REF,0,"N")
            ,trim(pData[i].NAME)
            ,trim(pData[i].DEPARTMENT)
            ,trim(pData[i].POSITION)
            ,trim(pData[i].PHONE)
            ,trim(pData[i].FAX)
            ,trim(pData[i].COMMENT)
            ,trim(pData[i].EMAIL)
        ]);
    }
    $('#tblSuppContacts').DataTable().draw();
}

当我点击表格标题时，列标题会正确排列数据列。

Answer 1

当手风琴内容变得可见时，使用下面的代码强制jQuery DataTables重新计算最初隐藏表的列宽。

$(".accordion").accordion({
   activate: function( event, ui ) {
      $($.fn.dataTable.tables(true)).DataTable()
         .columns.adjust();
   }
});

有关更多信息，示例和详细信息，请参阅jQuery DataTables: Column width issues with Bootstrap tabs。

jQuery DataTables和jQuery UI Accordion的列宽问题

1 个答案: