2016-08-21 4 views
1

У меня есть своеобразная проблема. Я разрабатываю php-сайт, для которого Datatables должны работать с ним. Я заметил, что стиль Datatables не работает, когда я запускаю его на локальном хосте, будь то Firefox или Chrome. Мой код выглядит следующим образом:Datatable styling not working

<!DOCTYPE html> 
<!-- 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
--> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <link rel="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/> 
     <script src="//code.jquery.com/jquery-2.2.3.js" type="text/javascript"></script> 
     <script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script> 
     <script> 
     $(document).ready(function() { 
      $('#example').DataTable(); 
     }); 
     </script> 
    </head> 
    <body> 
     <table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>System Architect</td> 
       <td>Edinburgh</td> 
       <td>61</td> 
       <td>2011/04/25</td> 
       <td>$320,800</td> 
      </tr> 
      <tr> 
       <td>Garrett Winters</td> 
       <td>Accountant</td> 
       <td>Tokyo</td> 
       <td>63</td> 
       <td>2011/07/25</td> 
       <td>$170,750</td> 
      </tr> 
      <tr> 
       <td>Ashton Cox</td> 
       <td>Junior Technical Author</td> 
       <td>San Francisco</td> 
       <td>66</td> 
       <td>2009/01/12</td> 
       <td>$86,000</td> 
      </tr> 
        </tbody> 
    </table> 
    </body> 
</html> 

И это дает мне довольно уродливую версию данных. Функции поиска и фильтрации работают, но отсутствуют стили и переупорядочение столбцов.

Однако странное дело в том, что jsfiddle, что я разработал, содержащий те же данные визуализации, как и следовало ожидать, со всеми стайлинга и т.д ... Скрипку ссылка выглядит следующим образом: https://jsfiddle.net/gkyya29h/

Я использую сервер XAMPP с firefox в качестве браузера по умолчанию. Может кто-нибудь помочь мне понять это? Я могу совершить очень очевидную ошибку, но я не вижу ее. Спасибо.

ответ

6
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 

Ваш тег ссылки на CSS неверен. Возможно, некоторые браузеры не будут обрабатывать их правильно.

+0

OMG ... Спасибо, чувствуя себя глупо сейчас за такую ​​глупую ошибку. – user3889963

+0

Рад, что это помогло. Было бы здорово, если бы вы могли отметить этот вопрос: :) –

1

Там эта простая ошибка в ссылке: Вы писали отн = "текст/CSS"

Попробуйте это:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/> 
-1

Пожалуйста, загрузите файл CSS от //cdn.datatables.net /1.10.12/css/jquery.dataTables.min.css и включить загруженный файл в ваш проект.