TypeError: oColumn undefined При использовании библиотеки JQuery Datatables
У меня возникла проблема с тем, чтобы библиотека jQuery Datatables отображалась правильно на моей веб-странице Joomla.
http://datatables.net
script выполняет половину стилизации моей таблицы, а затем отказывается (я получаю цвет заголовка таблицы и цвет текста, но нет элементов управления 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>
Ответы
Ответ 1
Для корректной работы данных ваши таблицы должны быть сконструированы с соответствующими тегами <thead>
и <tbody>
.
Все необходимые DataTables в вашем HTML - это хорошо сформированный (т.е. допустимый HTML), с заголовком (определенным тегом HTML) и телом (тегом)
Datatable docs
Ответ 2
Отсортировано!, оказывается, что 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 и т.д. выглядит следующим образом:
<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>
Ответ 3
Надеюсь, это поможет всем вам, по крайней мере, получить от него намек.
http://datatables.net/forums/discussion/comment/42607
Моя проблема была, TypeError: col is undefined.
Обобщенный ответ:
Число элементов TH внутри элемента TR внутри THead элемент таблицы ДОЛЖЕН БЫТЬ РАВНО к количеству элементов TD (или количество столбцов в строках таблицы) в элементе (-ях) TR ваш TBody в таблице.
Вы можете прочитать пояснение ниже:
Проблема заключалась в том, что я не поставил достаточно элементов 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 в элементе THead Tr также могут быть элементами TD, так как он также корректно обрабатывает HTML до требуемого уровня с помощью данных jQuery DataTables!
Надеюсь, я помог некоторым из вас сэкономить ваше время!:)
Ответ 4
Попробуйте следующее:
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
]
});