Question

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

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

第一个表显示了xls和pdf的tabletools。但是，第2，第3，第n个选项卡显示所有tabletools输出（xls，pdf，copy，cdv，print等）。除了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) );
    }
});

这是前两个表的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">

任何帮助都将不胜感激!!

Answer 1

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

您可以尝试以下几种方法：

在css和datatable选项中设置宽度 OR
仅在选中并显示选项卡时初始化表。（标签shown事件）
将标签内容元素css调整为不隐藏但放置在屏幕外，以便它们仍具有尺寸

使用jQueryUI选项卡很容易做到最后，并且通常的做法是解决与谷歌地图相关的渲染宽度相关小部件。我不确定bootstrap如何管理标签内容元素显示

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

1 个答案: