jQuery DataTables с Bootstrap Styling и отзывчивое расширение не работает

Question

В моей странице html я заменил пример этого link. В голове теге у меня есть это:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="http:////cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet"> 
    <link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet"> 

для CSS и это:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="http:////cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> 
    <script src="http:////cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script> 
    <script src="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script> 

для JavaScript.

В таблице это:

<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%"> 
      <thead> 
       <tr> 
        <th>First name</th> 
        <th>Last name</th> 
        <th>Position</th> 
        <th>Office</th> 
        <th>Age</th> 
        <th>Start date</th> 
        <th>Salary</th> 
        <th>Extn.</th> 
        <th>E-mail</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Quinn</td> 
        <td>Flynn</td> 
        <td>Support Lead</td> 
        <td>Edinburgh</td> 
        <td>22</td> 
        <td>2013/03/03</td> 
        <td>$342,000</td> 
        <td>9497</td> 
        <td>q.flynn@datatables.net</td> 
       </tr> 
       <tr> 
        <td>Quinn</td> 
        <td>Flynn</td> 
        <td>Support Lead</td> 
        <td>Edinburgh</td> 
        <td>22</td> 
        <td>2013/03/03</td> 
        <td>$342,000</td> 
        <td>9497</td> 
        <td>q.flynn@datatables.net</td> 
       </tr> 
       <tr> 
        <td>Quinn</td> 
        <td>Flynn</td> 
        <td>Support Lead</td> 
        <td>Edinburgh</td> 
        <td>22</td> 
        <td>2013/03/03</td> 
        <td>$342,000</td> 
        <td>9497</td> 
        <td>q.flynn@datatables.net</td> 
       </tr> 
      </tbody> 
     </table> 

Я называю DataTable в конце тела с:

<script> 
     $(document).ready(function() { 
      $('#example').dataTable({ 
       responsive: true 
      }); 
     }); 
    </script> 

Моего кодом кажется таким же пример на DataTable сайта. Он работает, и мой не работает. Зачем?

Answer 1

Не рушится ли работа? В чем проблема, которую вы получаете. Любая консольная ошибка? Я скопировал тот же код, что и вы упомянули выше, и создал пример скрипки. Вы можете проверить это здесь? Fiddle Example for Responsive DataTable Надеюсь, это поможет.

HTML

<div class="row"> 
<div class="col-md-12"> 
<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="90%"> 
      <thead> 
       <tr> 
        <th>First name</th> 
        <th>Last name</th> 
        <th>Position</th> 
        <th>Office</th> 
        <th>Age</th> 
        <th>Start date</th> 
        <th>Salary</th> 
        <th>Extn.</th> 
        <th>E-mail</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Quinn</td> 
        <td>Flynn</td> 
        <td>Support Lead</td> 
        <td>Edinburgh</td> 
        <td>22</td> 
        <td>2013/03/03</td> 
        <td>$342,000</td> 
        <td>9497</td> 
        <td>q.flynn@datatables.net</td> 
       </tr> 
       <tr> 
        <td>Quinn</td> 
        <td>Flynn</td> 
        <td>Support Lead</td> 
        <td>Edinburgh</td> 
        <td>22</td> 
        <td>2013/03/03</td> 
        <td>$342,000</td> 
        <td>9497</td> 
        <td>q.flynn@datatables.net</td> 
       </tr> 
       <tr> 
        <td>Quinn</td> 
        <td>Flynn</td> 
        <td>Support Lead</td> 
        <td>Edinburgh</td> 
        <td>22</td> 
        <td>2013/03/03</td> 
        <td>$342,000</td> 
        <td>9497</td> 
        <td>q.flynn@datatables.net</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

CSS

body { font-size: 140% 
} 
.row{ 
     border:1px solid black; 
}  
table.dataTable th, 
table.dataTable td { 
     white-space: nowrap; 
} 

JS:

$(document).ready(function() { 
    $('#example').DataTable(); 
}); 

Answer 2

Похоже, что слишком много // символов в ваших CSS & Js линий. Вторая ссылка CSS имеет:

link href="http:////cdn.datatables...... 

и должно быть:

link href="http://cdn.datatables...... 

Второй и третий вызовы сценария имеют один и тот же вопрос, тоже.

Answer 3

Ha! У меня была такая же проблема.

<link href="http://cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css" rel="stylesheet"> 

ссылается неправильный CSS-файл, который:

responsive.dataTables.css 

И почему это соглашение об именах для таблиц стилей, отличных от именования для файлов JavaScript? Не знаю!

Answer 4

Помещение: Я пишу этот ответ, потому что сталкиваюсь с той же проблемой, и поскольку я не нахожу хороший пример/учебник, я объясню, как я буду с этим справляться.

---

Я предлагаю посмотреть на исходный код на странице DataTables Bootstrap Styling

DataTables Bootstrap Styling

Эта страница показывает DataTables и Отзывчивый расширение используется с основой Bootstrap обеспечения стилизации

Сначала было сказано, что под демонстрационной таблицей, отображаемой в стиле Bootstrap DataTables, существуют правильные CSS, JS и HTML для использования в этом случае, и если я не ошибаюсь, они также размещаются в правильном порядке,

у вас есть еще один вариант, чтобы пойти для:

просто посмотреть на исходный код этой страницы, например, в Firefox жму Ctrl-U и в адресной строке он открыт

view-source:https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

это позволяет увидеть исходный код оказанной HTML.

Найдите ту же команду для своего браузера, и вы увидите, как на веб-сайте DataTables они настраивают сценарии CSS (es) и JS (es), чтобы заставить ее работать.

Что выглядит резким, что они просто использовать этот скрипт для инициализации таблицы

$(document).ready(function() { 
    $('#example').DataTable(); 
}); 

так не используется responsive ключевое слово,

, что делает его ярким, что магия выглядит сделано с помощью CSS синглов и JS (если правильно загружена).

В конце концов, чтобы начать с безопасной точки, поместите Js скрипты погрузочные в разделе HEAD, тестовой страницы HTML и начать с делать это успешно работать,

только после положительного теста, при необходимости , перемещайте их туда, где хотите.

Answer 5

<script> 
     $(document).ready(function() { 
      $('#example').dataTable({ 
       responsive: true 
      }); 
     }); 
    </script> 

Я использую эту помощь.