Rails jQuery dataTables页面上的多个表不起作用答案

【问题标题】：Rails jQuery dataTables multiple tables on a page not workingRails jQuery dataTables页面上的多个表不起作用
【发布时间】：2013-01-13 01:53:01
【问题描述】：

我已阅读有关在一个页面上使用多个表的数据表的文档。所以，它应该可以工作。

我正在使用 Bootstrap 与选项卡中的每个表。每个表都显示一些 dataTable 控件。

第一个表格显示了 xls 和 pdf 的表格工具。但是，第 2、第 3、第 n 个选项卡显示所有 tabletools 输出（xls、pdf、复制、cdv、打印等）。除了打印之外，其他输出类型都不起作用。

这是我的 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">

任何帮助将不胜感激！

【问题讨论】：

标签： jquery ruby-on-rails datatables

【解决方案1】：

问题是由于隐藏元素没有维度。如果您对数据表使用自动大小，那么当它检查 parent 的尺寸时，隐藏的选项卡 parent 没有宽度，因此您会在渲染中看到不规则性

你可以尝试几件事：

在 CSS 和数据表选项中设置宽度或
仅选择选项卡并可见时初始化表。（标签shown 事件）
调整标签内容元素 css 使其不隐藏但放置在屏幕外，以便它们仍然具有尺寸

最后一个使用 jQueryUI 选项卡很容易做到，并且是解决渲染宽度依赖小部件（如谷歌地图）的常见做法。我不确定引导程序如何管理选项卡内容元素显示

【讨论】：