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

以下是使用Bootstrap的DataTables依赖项的示例。

启动DataTables时，您是否使用responsive选项（responsive: true见下文）？

$('#table1').DataTable({
  responsive: true
});

.box {
  height: 100px;
  width: 100%;
  background: lightblue;
  padding: 20px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/dataTables.bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.8/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <table id="table1" class="table table-striped table-bordered" cellspacing="0">
        <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">Box</div>
    </div>
  </div>
  <!--End Row-->
</div>

Answer 2

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

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

Answer 3

我最近遇到过这样的问题。我认为你没有正确使用bootstrap。将您的div更改为以下内容。

<div class="col-xs-12 col-md-6">

xs，sm，md，lg是屏幕尺寸，从最小到最大。当你应用col-md-6时，它会对md及以上的尺寸应用6个宽度的宽度。您还需要指定它应占用xs及以上尺寸的屏幕的全宽。

DataTables响应未在Bootstrap断点处调整大小

3 个答案: