Question

我试图创建一个带有3个标签的bootstrap tabbed 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

根据datatables网站上的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>

Bootstrap数据表表格不相同

HTML

的JavaScript

2 个答案: