У меня возникла проблема с тем, чтобы библиотека jQuery Datatables отображалась правильно на моей домашней странице Joomla. http://datatables.net
Скрипт наполовину укладывает мой стол, а затем отказывается (я получаю цвет заголовка таблицы и цвет текста, но нет элементов управления datatables и т. Д.).
Firebug также бросает следующую ошибку:
TypeError: oColumn is undefined В моих шаблонах Joomla index.php у меня есть следующее в <head> :
<script src="./datatables/js/jquery.js" type="text/javascript"></script> <script src="./datatables/js/jquery.dataTables.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function() { jQuery('#staff_table').dataTable({ "bLengthChange": true, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": true } ); } ); </script>
HTML / PHP выглядит так:
<h3>Members of Staff</h3> <p>If you're looking for a member of staff at Tower Road Academy, you'll find their details here.</p> <table class="staff_table" id="staff_table"> <tr class="staff_table_head"> <th>Name</th> <th>Job Title</th> <th>Email Address</th> </tr> <?php $result = mysql_query("SELECT * FROM itsnb_chronoforms_data_addstaffmember"); while($row = mysql_fetch_array($result)) { echo '<tr>'; echo '<td>' . $row['staff_name'] . '</td><td>' . $row['staff_job'] . '</td><td><a href=mailto:"' . $row['staff_email'] . '">' . $row['staff_email'] . '</a>' . '</td>'; echo '</tr>'; } ?> </table>
Для корректной работы данных ваши таблицы должны быть сконструированы с использованием тегов <thead> и <tbody> .
Все необходимые DataTables в вашем HTML – это хорошо сформированный (то есть действительный HTML), с заголовком (определенным тегом HTML) и телом (тегом)
Datatable docs
Сортировано это! Оказывается, datatables ОЧЕНЬ строго о html, который он принимает, прежде чем он выдает ошибку. Я добавил теги в свой html, и теперь он работает, также обратите внимание, что у вас должны быть теги для столбцов заголовка, а не теги, так как это также вызывает ошибку.
Теперь код html выглядит так:
<h3>Members of Staff</h3> <p>If you're looking for a member of staff at Tower Road Academy, you'll find their details here.</p> <table class="staff_table" id="staff_table"> <thead> <tr class="staff_table_head"> <th>Name</th> <th>Job Title</th> <th>Email Address</th> </tr> </thead> <?php $result = mysql_query("SELECT * FROM itsnb_chronoforms_data_addstaffmember"); while($row = mysql_fetch_array($result)) { echo '<tr>'; echo '<td>' . $row['staff_name'] . '</td><td>' . $row['staff_job'] . '</td><td><a href=mailto:"' . $row['staff_email'] . '">' . $row['staff_email'] . '</a>' . '</td>'; echo '</tr>'; } ?> </table>
и вызов jquery etc выглядит так:
<script src="./datatables/js/jquery.js" type="text/javascript"></script> <script src="./datatables/js/jquery.dataTables.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#staff_table').dataTable({ "bLengthChange": true, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": true } ); } ); </script>
Надеюсь, это поможет всем вам, по крайней мере, получить от него намек.
http://datatables.net/forums/discussion/comment/42607
Моя проблема: TypeError: col undefined.
Обобщенный ответ:
Количество элементов TH в элементе TR в элементе THead таблицы ДОЛЖНО быть равнозначным количеству элементов TD (или количеству столбцов в строках таблицы) внутри элемента (ов) TR вашего тела в таблице.
Вы можете прочитать пояснение ниже:
Проблема состояла в том, что я не поставил достаточно элементов Th или Td в секции thead равным количеству столбцов, которые я печатаю как Td-элементы внутри элементов Tr в разделе TBody.
Следующий код дал мне ошибку.
<thead> <tr> <th> Heading 1</th> <th> Heading 2</th> </tr> </thead> <tbody> <tr> <td> Column 1 </td> <td> Column 2</td> <td> Column 3</td> </tr> </tbody>"
Но просто добавление еще одного элемента Th в элемент Tr внутри элемента THead заставил его работать как шарм! 🙂 И я получил подсказку из приведенной выше ссылки.
Кроме того, я обнаружил, что все элементы TH в элементе TH Thead также могут быть элементами TD, так как это также допустимый HTML на требуемый уровень с помощью данных jQuery DataTables!
Надеюсь, я помог некоторым из вас сэкономить ваше время! 🙂
Попробуй это:
jQuery('#staff_table').dataTable({ "bPaginate": true, "bLengthChange": true, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": true, "aoColumns": [ null, null //put as many null values as your columns ] });