jquery - DataTables 响应不在 Bootstrap 断点处调整大小

Question

我遇到了一个问题，我相信我已经将问题缩小到 DataTables Responsive 插件。 See Here

所以在 Bootstrap 中，我有两列，每列六列。左边是DataTable，右边是div框。当浏览器缩小时，这两个元素应该分成自己的行，彼此堆叠在一起，元素居中。但是，在那个断点处，DataTable 不会调整大小以在屏幕上居中。它留在左边。如果您以该宽度刷新页面，它会自行居中，只是不响应断点。
如果您反其道而行之，以手机大小启动页面并将窗口向外展开，则 DataTable 将在左侧的细列中保持收缩状态。

如果我取出响应式插件，它会在断点处自行居中。但是，我想使用这个插件来帮助处理手机大小的表格。

这是该行的示例。

<div class="row">
    <div class="col-md-6">
        <table id="table1" class="table">
            <thead>
                <tr>
                    <th>data</th>
                    <th>data</th>
                    <th>data</th>
                    <th>data</th>
                 </tr>
            </thead>
            <tbody>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-6">
        <div class="box">

        </div>
    </div>
</div><!--End Row-->

这是我正在使用的 CSS

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>    

<link href="//cdn.datatables.net/1.10.8/css/dataTables.dataTables.min.css" rel="stylesheet"/> 

<link href="//cdn.datatables.net/responsive/1.0.7/css/responsive.dataTables.min.css" rel="stylesheet"/>

这是我正在使用的 js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

<script src="//cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>

Answer 1

我遇到了同样的问题，这是我的解决方法:

$(window).resize(function () {
            $("table.dataTable").resize();
});