0

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

我正在将 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">

任何帮助，将不胜感激！！

4

1 回答 1

0

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

你可以尝试几件事：

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

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

于 2013-01-13T02:22:42.830 回答