jQuery DataTables 和 jQuery UI Accordion 的列宽问题

debugcn 发表于 Dev

基思

我正在使用带有 jQuery UI 手风琴的数据表。

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

表定义

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

当我点击表格标题时，列标题然后与数据列正确对齐。

陀螺编码网

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

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

有关更多信息、示例和详细信息，请参阅jQuery DataTables：Bootstrap 选项卡的列宽问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。