Datatables - 反応しない反応ですか？

Question

私はDatatables（https://datatables.net/）Responsiveが動作しない理由を理解しようとしています。他のすべては素晴らしい、ページング、検索、発注などの作業をしていますが、反応しません。

以下は私が持っているものです。

ブートストラップv3.3.6

$(function() { 
 
    $('#ManageUsers').DataTable({ 
 
     paging: true, 
 
     lengthChange: true, 
 
     searching: true, 
 
     ordering: true, 
 
     info: true, 
 
     autoWidth: true, 
 
     responsive: true 
 
    }); 
 
});

<!-- CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
 
<!-- JS --> 
 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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> 
 
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script> 
 

 

 
<!-- CODE --> 
 

 
<table id="ManageUsers" class="table table-bordered table-striped display responsive"> 
 
    <thead> 
 
     <tr> 
 
      <th>...</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>...</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

すべてのヘルプは大歓迎されます。

Answer 1

DEMOのように、ライブラリをロードしてみてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
<script data-require="datatables@*" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script> 
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script> 

<link href="//cdn.datatables.net/responsive/2.1.1/css/dataTables.responsive.css"/> 
<link data-require="datatables@*" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" /> 
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 

Answer 2

• あなたは あなたのヘッダーに https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.cssを逃すとその例に応じてクラスにNOWRAP逃しています。
• 私は個人的には、 としてjavascriptを使用して反応的なdataTableを開始することをお勧めします。これは、あなたのUIをカスタマイズするためのより多くのオプションを提供します。

あなたが任意の必要なファイルまたは競合任意のファイルを見逃しているかどうかを確認してください参照 https://datatables.net/extensions/responsive/examples/initialisation/default.html https://datatables.net/extensions/responsive/examples/initialisation/className.html https://datatables.net/extensions/responsive/examples/initialisation/option.html