2017-02-01 2 views
0

Я пытаюсь понять, почему Datatables (https://datatables.net/) Отзывчивый не работает. Все остальное работает отлично, подкачки, поиск, заказ и т. Д., Но не реагирует?Datatables - Отзывчивый не работает?

Ниже приведено то, что у меня есть.

Bootstrap 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

Pls создать и показать свою скрипку – 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://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css в ваш заголовок и пропустил Nowrap в классе в соответствии с их примерами.
  • Я лично предложил бы инициировать отзывчивую dataTable через javascript как , он предоставит больше возможностей для настройки вашего пользовательского интерфейса.

Пожалуйста, обратитесь к этим ссылкам для справки 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

Смежные вопросы