引导数据表表不一样

Question

我正在尝试创建一个带有 3 个选项卡的引导选项卡式 div，每个选项卡都有自己的表（3 个单独的数据表 - https://datatables.net）。我已经初始化了 3 个表并对其进行了测试，但是当我使用虚拟文本/值创建其中 2 个表时，第二个表会缩小，因此它不适合整个宽度。当我初始化没有数据的表时不会发生这种情况，并且第一个表似乎总是按要求工作，全宽，无论它是否用数据初始化。我似乎看不出为什么连续的表格没有全宽显示。任何帮助深表感谢。干杯。

JSFiddle

HTML

<div class="row">
<div class="col-lg-12">
    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#sent" aria-controls="sent" role="tab" data-toggle="tab">Sent</a></li>
        <li role="presentation"><a href="#received" aria-controls="received" role="tab" data-toggle="tab">Received</a></li>
        <li role="presentation"><a href="#completed" aria-controls="completed" role="tab" data-toggle="tab">Completed</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="sent">
            <br>
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover quotes" id="sentTable">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Reply</th>
                                    <th>Date Created</th>
                                    <th>Last Updated</th>
                                    <th>Quote</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="received">
            <br>
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover quotes" id="receivedTable">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Reply</th>
                                    <th>Date Created</th>
                                    <th>Last Updated</th>
                                    <th>Quote</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.table-responsive -->
        </div>
        <div role="tabpanel" class="tab-pane" id="completed">
            <br>
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover quotes" id="completedTable">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Reply</th>
                                    <th>Date Created</th>
                                    <th>Last Updated</th>
                                    <th>Quote</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.table-responsive -->
        </div>
      </div>

    </div>
</div>
<!-- /.col-lg-12 -->

JavaScript

$(document).ready(function() {
    $('#sentTable').DataTable( {
        "columns": [
            { "data": "title" },
            { "data": "description" },
            { "data": "reply" },
            { "data": "datecreated" },
            { "data": "dateupdated" },
            { "data": "quote" }
        ],
        "data": [{
    "title":"mytitle",
    "description":"mydescription",
    "reply":"cvfsdfgsdfg",
    "datecreated":"2016-07-06 09:20:56",
    "dateupdated":"2016-07-06 15:57:01",
    "quote":"100"
  }]
    } );
    $('#receivedTable').DataTable( {
        "columns": [
            { "data": "title" },
            { "data": "description" },
            { "data": "reply" },
            { "data": "datecreated" },
            { "data": "dateupdated" },
            { "data": "quote" }
        ],
  "data": [{
    "title":"mytitle",
    "description":"mydescription",
    "reply":"cvfsdfgsdfg",
    "datecreated":"2016-07-06 09:20:56",
    "dateupdated":"2016-07-06 15:57:01",
    "quote":"100"
  },
  {
    "title":"mytitle",
    "description":"mydescription",
    "reply":"the best reply by far.",
    "datecreated":"2016-07-06 09:34:59",
    "dateupdated":"2016-07-06 15:57:26",
    "quote":"56"
  }]
    } );
    $('#completedTable').DataTable( {
        "columns": [
            { "data": "title" },
            { "data": "description" },
            { "data": "reply" },
            { "data": "datecreated" },
            { "data": "dateupdated" },
            { "data": "quote" }
        ]
    } );
} );

Answer 1

根据数据表网站上的this forum post，这是一个尚未解决的问题（希望不是），或者可以通过在切换选项卡时调用columns.adjust() 来解决。更详细的，你需要调用：

$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();

每当用户切换标签时。 Here 是我从中获取该行代码的示例页面。

来自该页面的引用：

这需要特别考虑的原因是，当 DataTable 在隐藏元素中初始化时，浏览器没有任何测量值来提供 DataTable

这可以解释第二个和第三个选项卡的大小不正确，尽管奇怪的是它们的大小正确但没有数据。

但是，就像该论坛帖子中所说的那样，如果在进行更改后您仍然遇到问题，那么您可能不走运（目前），在这种情况下，我建议您回到 BviLLe_Kid 的答案。请注意，Allan（来自该论坛帖子）是该插件的作者，所以如果有人知道，他会的。

Answer 2

只是一个快速修复..您可以为第二个表格设置内联样式并将宽度设置为 100%。

<div role="tabpanel" class="tab-pane" id="received">
        <br>
                <div class="dataTable_wrapper">
                    <table class="table table-striped table-bordered table-hover quotes" id="receivedTable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Reply</th>
                                <th>Date Created</th>
                                <th>Last Updated</th>
                                <th>Quote</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <!-- /.table-responsive -->
    </div>