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響應不調整大小在引導程序斷點

回答

相關問題