2017-02-01 36 views
0

我想了解为什么Datatables(https://datatables.net/)响应将无法正常工作。其他一切都很好,分页,搜索,订购等,但没有响应?数据表 - 响应不工作?

以下是我所拥有的。

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

任何帮助将不胜感激。

+0

看看你是否错过了任何所需的文件或任何文件的冲突。逐一检查。这可能会导致帮助。 –

+0

?我不确定我关注? @ AT-2016 – Kray

+0

请创建并展示您的小提琴 – Manoj

回答

2

尝试按照以下顺序加载库,如DEMO

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
<script data-require="[email protected]*" 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="[email protected]*" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" /> 
<link data-require="[email protected]*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 
1

请参考以下链接供参考 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