jQuery JavaScript Datatables列凝聚/擠在一起

好吧我在我的頁面上的隱藏元素的表上加載數據表時發現問題。我擁有的是一些基於「Tab」的頁面，當時唯一可見的是活動標籤，而當時所有其他標籤都是display:none。當我手動調用選項卡作爲主選項卡時，表或它的列沒有問題。只有當標籤初始隱藏時，表格的初始顯示問題纔是問題。jQuery JavaScript Datatables列凝聚/擠在一起

我說初始顯示，因爲當我點擊一個列標題來排序給定的列表時，表似乎自行更正，列不再擠壓/凝聚在一起。

這是我目前的DataTable代碼

$('#'+tableID).dataTable(
{ 
    "sPaginationType": "full_numbers", 
    "bPaginate": false, 
    "bFilter": false, 
    "bAutoWidth": true, 
    "sScrollY": tableY+"px", 
    "bScrollCollapse": true, 
    "oLanguage": { 
     "sInfo": "Showing _END_ Events." 
    }, 
    "aaSorting": [[ 1, "asc" ]], 
    "aoColumns": [ 
     null, 
     null 
     ] 
});

，我試圖像指定列寬：

"aoColumns": [ 
     { "sWidth": "80%" }, 
     { "sWidth": "20%" } 
     ]

這也不起作用。所以我現在陷入困境，試圖解決這個問題，但並不確定在哪裏/如何開始。

也爲參數的緣故可以說我的表結構類似於..

<table> 
    <thead> 
    <tr><td></td><td></td></tr> 
    </thead> 
    <tfoot> 
    <tr><td></td><td></td></tr> 
    </tfoot> 
    <tbody> 
    <tr><td></td><td></td></tr> 
    <tr><td></td><td></td></tr> 
    <tr><td></td><td></td></tr> 
    </tbody> 
</table>

來源

2012-05-30 chris

您是否探索過此問題中提供的任何答案：http://stackoverflow.com/questions/604933/jquery-datatables-table-width-problem？接受的答案包括一個相關的數據錶鏈接：http://datatables.net/examples/api/tabs_and_scrolling.html – mg1075

在這篇文章之前和之後進行了更多的搜索。我結束了找出解決方案。我知道它必須處理元素被隱藏的事實，以及瀏覽器沒有考慮寬度/高度等因素的情況下顯示：無。當然，我正在開發的系統是這樣開發的，它使得評估問題比本來應該更困難一些，但最終它被綁定到jquery ui並綁定到「標籤」事件之外的正常方法我發現其他地方的例子。 – chris

最後我通過我的搜索解決我自己的問題，並根據關就有關數據表API文檔給出的例子/ jquery ui。

我的解決方案是綁定到jquery ui的選項卡事件，然後根據選擇的選項卡啓動我的函數來構建我需要的表。

$(document).ready(function() { 
    $("#storage").bind('tabsselect', function(event, ui) 
    { 
     if (ui.index === 1) 
     { 
      tables.statistics("metrics", "metric"); 
     } 
    }); 
});

來源

2012-05-31 19:00:42 chris

jQuery JavaScript Datatables列凝聚/擠在一起

回答

相關問題