JavaScript — таблица данных JQuery AJAX не загружает стандартные функции после перезагрузки данных

Question

JavaScript — таблица данных JQuery AJAX не загружает стандартные функции после перезагрузки данных

Я добавил DataTables в таблицу, которую я получаю, используя AJAX, используя PHP и SQL. На самой первой загрузке, после выполнения первого поиска все нормально и все работает как задумано. Однако при поиске во второй раз, когда весь код, используемый для поиска, был снова пройден, функциональность DataTable перестает работать.

Я добавил несколько предупреждений в важные части файла DataTable и обнаружил, что после первого поиска он никогда не возвращается в файл.

Хотя, возможно, мне нужно «переинициализировать» DataTable, видя, как все содержимое данных изменилось после моего поиска снова.

Много времени провел в поисках онлайн, с множеством предложений, касающихся Destroy, Clear и т. Д. Но, похоже, ничего не работает.

Вот мой код, как вы можете видеть, он настроен на выполнение чего-то другого после первого поиска, но не уверен, как это исправить, поскольку сортировка, разбиение на страницы, поиск и т. Д. Все не работают:

$.ajax({
type:'POST',
url:'/ITSMIS/data/asset/search.php',
data:HardwareAsset,
dataType: "html",
success:function(data){

LoadDataTableHeaders();

var NotSearched = document.getElementById("no-search-default");
var TableContainer = document.getElementById("data-table-container");
var NoSearchResults = document.getElementById("no-search-results");

if(NotSearched.style.display !== 'none'){
$(NotSearched).hide();
}
if(data){
if(TableContainer.style.display == 'none'){
$(TableContainer).show();
}
$(NoSearchResults).hide();
$('#data-table-results').html(data);

$("input:checkbox:not(:checked)").each(function() {
var DataTableColumn = "table ." + $(this).attr("name");
$(DataTableColumn).remove();
});

if ( ! $.fn.DataTable.isDataTable( '#data-table' ) ) {
$('#data-table').DataTable();
}
else{

}
}
else{
if(NoSearchResults.style.display == 'none'){
$(TableContainer).hide();
$(NoSearchResults).show();
}
}
}
})

1

ajax datatables javascript jquery php

Решение

Другие решения

Вы можете попробовать просто повторно инициализировать Datatables, вызвав

$('#data-table').DataTable({
destroy: true
});

эта опция позволит Datatables уничтожить предыдущий экземпляр, если он существует, и инициализировать, как если бы это был первый раз.

1

Источник

Accepted Answer

Это должно сделать недействительной и перерисовать таблицу, когда она уже выходит.
(Добавлен параметр ‘full-rest’ после того, как я нашел это: https://datatables.net/reference/api/draw ())

if (  $.fn.DataTable.isDataTable( '#data-table' ) ) {
$('#data-table').DataTable().rows().invalidate().draw('full-reset');
}
else{
$('#data-table').DataTable();
}

1