數據表列未分配

我在我的頁面上使用引導標籤。這些選項卡內部是JQuery數據表。出於某種原因，當用戶在頁面加載數據表格的標題後單擊標籤時，不要與行進行同步。數據表列未分配

如果我點擊標題之一（即訂單列的按鈕），然後列自我修復。有人能幫我在這裏嗎？我已經嘗試了幾個CSS和Javascript「黑客」來解決這個問題。

這裏就是我初始化我的數據表：

$(".dynamic-table").DataTable({ 
    "scrollY": 450, 
    "scrollCollapse": true, 
    "lengthMenu": [[10, 50, 500, -1], [10, 50, 500, "All"]] 
});

來源

2016-03-04 Nic

我找到了解決辦法。這將通過編程方式在標籤頁上點擊第一個th，從而修復未分配的標題。它做了兩次，以使訂單恢復原來的狀態。

/* FIX FOR COLUMNS BEING UNALLIGNED */ 
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { 
    var activeTabPanel = $('.tab-pane.active'); 
    activeTabPanel.find("th:first").click(); 
    activeTabPanel.find("th:first").click(); 
});

來源

2016-03-04 21:09:32 Nic

SOLUTION

使用columns.adjust() API方法來重新計算的列的寬度。

從manual：

呼叫它時，如果初始化時隱藏（例如，在一個標籤），或者當數據顯著改變表變得可見。

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){ 
    $($.fn.dataTable.tables(true)).DataTable() 
     .columns.adjust(); 
});

DEMO

見this jsFiddle代碼和演示。

LINKS

爲解決與jQuery數據表和引導選項卡中最常見的問題，請參見jQuery DataTables – Column width issues with Bootstrap tabs。

來源

2016-03-04 22:43:55

數據表列未分配

回答

相關問題