Мои DataTables работали правильно (по большей части) для доски объявлений, но недавно я заметил, что получаю ошибки, и функции фильтрации и сортировки не отображаются на моей веб-странице. Я знаю, что это общая проблема, но я не видел никакой документации, если кто-то использует DOM для своего источника данных.
Я рассмотрел множество других запросов здесь, в StackOverflow, а такжеЧасто задаваемые вопросы по DataTables: https://www.gyrocode.com/articles/jquery-datatables-common-javascript-console-errors/#typeerror-cannot-read-property-length-of-undefined https://www.gyrocode.com/articles/jquery-datatables-common-javascript-console-errors/#typeerror-adata-is-undefined
О которых все говорят, если вы используете AJAX для загрузки своего набора данных, а я - нет. Согласно DataTables.net для меня, чтобы использовать DOM в качестве моего источника, это должно быть так же просто, как вставить
$(document).ready(function() {
$('#example').DataTable();
} );
в мой Javascript, и включая эти 2 библиотечных файла: https://code.jquery.com/jquery-3.3.1.js https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
Согласно:
https://datatables.net/examples/data_sources/dom.html
Вот что у меня сейчас есть:
Header.php:
<!--NEED FULL JS NOT SLIM-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- MDBootstrap Datatables -->
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
DOM / Page в WordPress:
<div class="table-responsive">
<table id="jobBoardTable" class="table table-striped table-bordered">
<thead>
<tr>
<th id="date" class="first">Date Posted</th>
<th id="region">Region</th>
<th id="country">Country</th>
<th id="city">City</th>
<th id="academic-field">Academic Field</th>
<th id="position">Position(s) Name</th>
<th id="job-start-date">Job Start Date</th>
<th id="app-close-date">Application Closing Date</th>
<th id="details">Job Link</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">9-October-2019</td>
<td>North America</td>
<td>Canada</td>
<td>Toronto</td>
<td>The Faculty of Information and the Department of Statistical Sciences - University of Toronto</td>
<td>Associate Professor, Statistical Information</td>
<td>1 July 2020</td>
<td>25 November 2019</td>
<td><a class="btn btn-default" href="https://chroniclevitae.com/jobs/0000507495-01">Details</a></td>
</tr>
...
</tbody>
</table>
</div>
Footer.php:
<script>$(document).ready(function () {
if($('#jobBoardTable')){
//$.fn.dataTable.moment( 'DD-MMM-YYYY' );
// $.fn.dataTable.moment( 'DD MMM YYYY' );
$('#jobBoardTable').DataTable();
$('.dataTables_length').addClass('bs-select');
}
});</script>
Я также пытался удалить свое выражение if в нижнем колонтитуле безрезультатно.
Я ожидаю, что DataTables будут функционировать и видеть окно поиска, стрелки вверх и вниз рядом с каждым заголовком таблицы и разбиение на страницы.
Что я на самом деле получаю, так это первое, предупреждениевторая ошибка:
jQuery.Deferred exception: Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined
at Ma (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js:37:72)
at HTMLTableRowElement.<anonymous> (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js:30:42)
at https://code.jquery.com/jquery-3.3.1.min.js:2:1326
at Function.map (https://code.jquery.com/jquery-3.3.1.min.js:2:3169)
at w.fn.init.map (https://code.jquery.com/jquery-3.3.1.min.js:2:1294)
at pa (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js:30:22)
at e (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js:106:15)
at HTMLTableElement.<anonymous> (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js:106:198)
at Function.each (https://code.jquery.com/jquery-3.3.1.min.js:2:2573)
at w.fn.init.each (https://code.jquery.com/jquery-3.3.1.min.js:2:1240) undefined
Затем следует эта ошибка, когда все загружено:
Uncaught TypeError: Cannot read property 'length' of undefined
at Ma (jquery.dataTables.min.js:37)
at HTMLTableRowElement.<anonymous> (jquery.dataTables.min.js:30)
at jquery-3.3.1.min.js:formatted:72
at Function.map (jquery-3.3.1.min.js:formatted:171)
at w.fn.init.map (jquery-3.3.1.min.js:formatted:71)
at pa (jquery.dataTables.min.js:30)
at e (jquery.dataTables.min.js:106)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:106)
at Function.each (jquery-3.3.1.min.js:formatted:137)
at w.fn.init.each (jquery-3.3.1.min.js:formatted:68)
Спасибо за помощь.