DataTables响应不调整大小在引导程序断点

我有一个问题，我相信我已经缩小到DataTables响应插件。 See Here DataTables响应不调整大小在引导程序断点

所以在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-->

下面是我使用

<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"/>

的CSS下面是我使用

<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>

来源

2015-08-21 madvora

这里的JS使用的DataTable依赖自举一个例子。

当您启动DataTable时，您是否使用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>

来源

2015-08-21 21:18:43 vanburen

是的，我正确地初始化它。我在我使用的另一个应用程序中使用此响应式插件的经验。这是我第一次将它与Bootstrap混合。如果我看到不同之处，我会尝试发布您的内容并通知您。 – madvora

我尝试了代码，但我认为你自己并没有使用DataTables响应。你没有链接任何在这里找到的响应式css或js文件。 https://cdn.datatables.net/responsive/ 您的版本中的表格仅仅因为Bootstrap而响应，但它根本不使用DataTables插件。 – madvora

我有同样的问题，这是我的解决方法：

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

来源

2015-11-05 18:34:16

最近，我有过这样的问题。我不认为你正在使用bootstrap。将您的div更改为以下内容。

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

xs，sm，md，lg是从最小到最大的顺序的屏幕大小。当您应用col-md-6时，它将应用6个空格的宽度来设置md和以上的尺寸。您还需要指定它应占用xs及以上尺寸屏幕的全宽度。

来源

2016-01-28 15:49:46 aclelland

DataTables响应不调整大小在引导程序断点

回答

相关问题