2012-02-06 6 views
4

Я пытаюсь инициализировать DataTable, но не могу.Какие файлы необходимы для использования dataTable?

<style type="text/css" title="currentStyle"> 
    @import "demo_page.css"; 
    @import "demo_table.css"; 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.dataTables.js"></script> 
  1. Что не так?

  2. Требуется ли структура таблицы?

  3. Данные необходимы?

<table id="example">  
    <thead> 
     <tr> 
      <th>Column 1</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>data</td> 
     </tr> 
    </tbody> 
</table> 
+0

Пожалуйста, разместите HTML-таблицу – 472084

+0

Я проверю. Благодарю. – Spirit

+0

Мне кажется, что есть утечка файлов заголовков. Я переделал свой заголовок в шахту. В результате [он работал до] он [не работает после моих изменений]. – Spirit

ответ

4

Вам нужно только два файла инициализации:

  1. JQuery (однако вы хотите включить его); а затем
  2. jquery.dataTables.js (или сокращенная версия).

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

Если это не инициализация с этими двумя файлами и вызов $('#myTable').dataTable() (в функции готовности документа), то происходит что-то еще, и вам нужно будет посмотреть на консоль JavaScript, чтобы узнать, какие ошибки выбрасываются.

Здесь в их jsbin среды: http://live.datatables.net/olofeg

Нет CSS, только два JS-файлы, хорошо сформированный стол и вызов dataTable() из готовой функции документа.

3

Чтобы использовать DataTable у вас есть много вариантов, одна возможность иметь хорошо сформировавшимися (с <thead> и <tbody>) HTML таблицы "преобразовать"

<style type="text/css" title="currentStyle"> 
    @import "demo_page.css"; 
    @import "demo_table.css"; 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.dataTables.js"></script> 
<table id="example"> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>data</td> 
     </tr> 
    </tbody> 
</table> 
<script type="text/javascript"> 
//initialize datatables 
    (function($){ 
     $('#example').dataTable(); 
    }); 
</script> 
+0

Нет, он не работает после добавления заголовка, тела, тегов doctype. – Spirit

+0

, вероятно, это зависит от структуры папок. – Spirit

+0

@ Конечно, этот код требует, чтобы все файлы находились в одной папке (demo_table.css, demo_page.css, jquery.dataTables.js, jquery.js и html-файл) –

1

Вы должны вызвать функцию dataTable в javascript

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("example").dataTable(); 
    }); 
</script> 
0

Я исследовал целый день. Предположительно, jQuery используется большим числом людей, но я не мог найти блог «Single», в котором говорится, что все «голые минимальные» вещи, которые будут импортированы в ваш html/jsp для , используя функциональные возможности jQuery datatable ... поэтому у меня есть скомпилирован это в небольшой HTML-страницы, как показано ниже (это полностью работает вещи, поэтому, пожалуйста, начать отсюда и построить его свой путь ..)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 
    "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html lang="en"> 
 
<head> \t \t 
 
\t <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
\t <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> 
 
\t <link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"> 
 
\t  
 
\t <script type="text/javascript"> 
 
\t \t $(document).ready(function() { 
 
\t \t \t $("#companies").dataTable({ 
 
\t \t \t \t "sPaginationType": "full_numbers", 
 
\t \t \t \t "bJQueryUI": true 
 
\t \t \t }); 
 
\t \t }); 
 
\t </script> 
 
</head> 
 
\t 
 
    <body id="dt_example"> 
 
     <div id="container"> 
 
      <div id="demo_jui"> 
 
       <table id="companies" class="display"> 
 
        <thead> 
 
         <tr> 
 
          <th>Company name</th> 
 
          <th>Address</th> 
 
          <th>Town</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <th>Atlassian</th> 
 
\t \t \t \t \t \t \t <th>Paramatta</th> 
 
\t \t \t \t \t \t \t <th>Sydney</th> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <th>Oracle</th> 
 
\t \t \t \t \t \t \t <th>Whitefield</th> 
 
\t \t \t \t \t \t \t <th>India</th> 
 
\t \t \t \t \t \t </tr> 
 
        </tbody> 
 
       </table> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

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