В инструментах разработчика Google Chrome появляется следующая ошибка:
Uncaught TypeError: невозможно прочитать свойство 'className' из undefined
Код, на который выдается ошибка:
var oTable = $('#resultstable').dataTable({
"bAutoWidth" : true,
"iDisplayLength" : 10,
"bFilter" : false,
"bLengthChange" : false
});
resultstable - это идентификатор таблицы в html:
<table cellpadding="0" cellspacing="0" border="0" id="resultstable"
name="resultstable" class="display datatable">
Странно то, что после тега таблицы есть оператор if. Таблица работает отлично, и CSS отображается правильно, когда программа отправляется в раздел else if{}, но она выдает указанную выше ошибку и CSS не применяется, когда она находится в разделе if{}.
Помогите пожалуйста!
Другой ответ поставил меня на правильный путь.
Более кратко, ошибка заключалась в том, что созданная таблица была неправильной.
Мои столбцы заголовков (внутри ада, конечно), не совпадали с моими столбцами строк (внутри тела)
В моей ситуации у меня было слишком много столбцов внутри заголовка.
Другая возможная причина: если вы указываете больше столбцов в атрибуте "aoColumnDefs", чем в таблице есть "td".
var yourTable = $('#product-search-results-table').dataTable({
// If you only have three columns in the HTML table, then this line will cause an error, because it lists four columns in "aoColumnDefs".
"aoColumnDefs": [{ "bSortable": false, "aTargets": [0, 1, 2, 3] }]
});
Datatables требует, чтобы ваша таблица html была идеальной. Я обнаружил, что получил эту ошибку, когда у меня не было равного количества <th> и <td>. Убедитесь, что у вас нет дополнительного заголовка.
Я получил ту же ошибку, что и сейчас. Однажды я столкнулся с очень похожей ошибкой, используя библиотеку Chosen. Проблема заключалась в том, что (в случае Chosen) использовались идентификаторы с символами [], что путало Javascript между css-селекторами и идентификаторами (помните, что в CSS мы можем использовать [] для указания атрибутов).
В случае с DataTables, однако, я заметил, что сами DataTables script добавляли class = " " до первого элемента в каждом элементе tr внутри tbody.
Причина этого в том, что вывод HTML из php имел логическую ошибку. Код неисправности:
<?php
for ($currentRow = 0 ; $currentRow <= $query_length; $currentRow++) {
?>
<tr>
<?php
list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow);
echo "<td class = \"detailed-job-row\">" . $job_title . "</td>";
echo "<td class = \"detailed-job-row\">" . $company_name . "</td>";
echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>";
echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_city . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>";
?>
</tr>
<?php
} ?>
</tbody>
</table>
<?php
}
?>
В нижней части длинной длинной таблицы произошла ошибка, указывающая, что postgres не может перейти к строке 208. Это сказало мне, что мне нужно прекратить цикл в i - 1 или $currentRow - 1.
Следовательно, фиксированный рабочий код:
<?php
for ($currentRow = 0 ; $currentRow <= $query_length - 1; $currentRow++) {
?>
<tr>
<?php
list($job_id, $company_id, $job_title, $industry_id, $profession_int, $job_openings, $job_city, $job_salary_start, $job_end_date, $job_start_date, $job_skills, $company_name, $isConfidential, $job_experience_level) = dbRow($query_results, $currentRow);
echo "<td class = \"detailed-job-row\">" . $job_title . "</td>";
echo "<td class = \"detailed-job-row\">" . $company_name . "</td>";
echo "<td class = \"detailed-job-row\">" . $industry_id . "</td>";
echo "<td class = \"detailed-job-row\">" . $profession_int . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_openings . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_city . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_salary_start . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_end_date . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_start_date . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_skills . "</td>";
echo "<td class = \"detailed-job-row\">" . $job_experience_level . "</td>";
?>
</tr>
<?php
} ?>
</tbody>
</table>
<?php
}
?>
Выполнение этого изменения позволило корректно работать с DataTables.
Итак, хотя я не могу предоставить рабочее решение, я советую вам посмотреть на ваш html-разметку, поскольку это может быть источником вашей проблемы (например, имеет ли ваша таблица tbody?).
В моем конкретном случае у меня были свойства aTargets, заданные с индексами массива вне границ для моих элементов.
$('.datatable').dataTable({
aoColumnDefs: [
{
bSortable: false,
aTargets: [0, 6]
}
],
aaSorting: []
});
Этот набор содержит 7 столбцов td, но их было всего 6. Измените его следующим образом:
$('.datatable').dataTable({
aoColumnDefs: [
{
bSortable: false,
aTargets: [0, 5]
}
],
aaSorting: []
});
Он бросает эту ошибку, потому что когда dom сначала загружает, вы использовали до объявления.
для этой ошибки у меня было одно решение, написанное ниже:
вы можете добавить, если особый элемент условия не undefined, как показано ниже
if(document.getElementsByTagName('button') !== undefined){
// and write your needed code here
}
Обнаружена аналогичная проблема. Корневой случай состоял в том, что, хотя dataTable собирался взять под контроль таблицу, наш код также пытался манипулировать свойствами таблицы в одно и то же время. Сообщение об ошибке не говорит об этом, однако, как только таблица осталась управляемой только с помощью dataTable, проблема исчезла.