Rails jQuery dataTables頁面上的多個表格無法正常工作

我讀過關於使用dataTable關於頁面上多個表格的文檔。所以，它應該工作。Rails jQuery dataTables頁面上的多個表格無法正常工作

我在選項卡中使用每個表的Bootstrap。每個表格都顯示一些dataTable控件。

第一個表格顯示xls和pdf的tabletools。但是，第2，第3，第n個選項卡顯示了所有的tabletools輸出（xls，pdf，copy，cdv，print等）。除輸出外，其他輸出類型均不起作用。

這裏是我的jQuery：

$(document).ready(function() { 

$('.dataTable').dataTable({ 
    "sDom": 'CT<"clear">lfrtip', 
    "oTableTools": { 
     "aButtons": [ 
      { 
       "sExtends": "xls", 
       "sButtonText": "Excel", 
       "mColumns": "visible" 
      }, 
      { 
       "sExtends": "pdf", 
       "sPdfOrientation": "landscape", 
       "sPdfMessage": "Endeavor", 
       "mColumns": "visible" 
      } 
     ], 
     "sSwfPath": "/swf/copy_cvs_xls_pdf.swf" 
    }, 
    "oColVis": { 
     "buttonText": "Show/Hide", 
     "aiExclude": [ 0 ], 
     "bRestore": true, 
     "sAlign": "left" 
    }, 
    "bStateSave": true, 
    "fnStateSave": function (oSettings, oData) { 
     localStorage.setItem('DataTables_'+window.location.pathname, JSON.stringify(oData)); 
    }, 
    "fnStateLoad": function (oSettings) { 
     return JSON.parse(localStorage.getItem('DataTables_'+window.location.pathname)); 
    } 
});

這裏是第2代表的HTML表格元素：

<table class="display dataTable table table-striped table-bordered" id="dataTable1" style="" aria-describedby="dataTable1_info"> 
<table class="display dataTable table table-striped table-bordered" id="dataTable2" style="" aria-describedby="dataTable2_info">

任何幫助，將不勝感激！

來源

2013-01-13 Reddirt

問題是由於隱藏的元素沒有尺寸。如果您正在使用自動大小的數據表，然後當它檢查父的尺寸，隱藏標籤父母沒有寬度，並且看到在呈現不規則性導致

您可以嘗試幾件事情：

在css和數據表選項中設置寬度或
只有當選項卡被選中並可見時才初始化表格。（標籤shown事件）
調整選項卡的內容元素的CSS爲不隱藏，但放在離屏幕所以他們仍然有尺寸

最後是容易jQueryUI的標籤做，是解決渲染寬依賴部件常見的做法像谷歌地圖。我不確定bootstrap如何管理標籤內容元素顯示

來源

2013-01-13 02:22:42 charlietfl

感謝您的信息！ – Reddirt

Rails jQuery dataTables頁面上的多個表格無法正常工作

回答

相關問題