Как обновить JQuery DataTables из Ajax Call [duplicate]
Конечно, есть много таких подходов, как синхронный запрос, обещание, но из моего опыта я думаю, что вы должны использовать подход обратного вызова. Естественно, что асинхронное поведение Javascript. Итак, ваш фрагмент кода можно переписать немного иначе:
function foo() {
var result;
$.ajax({
url: '...',
success: function(response) {
myCallback(response);
}
});
return result;
}
function myCallback(response) {
// Does something.
}
5 ответов
В моем случае я не использую встроенный ajax api для подачи Json в таблицу (это связано с некоторым форматированием, которое было довольно сложно реализовать внутри обратного вызова рендеринга datatable).
My решение заключалось в создании переменной во внешней области функций onload и функции, которая обрабатывает обновление данных (например, var table = null).
Затем я создаю экземпляр таблицы в методе on load
$(function () {
//.... some code here
table = $("#detailReportTable").DataTable();
.... more code here
});
и, наконец, в функции, которая обрабатывает обновление, я вызываю метод clear () и destroy (), извлекаю данные в таблицу html и повторно создаю datatable как таковой:
function getOrderDetail() {
table.clear();
table.destroy();
...
$.ajax({
//.....api call here
});
....
table = $("#detailReportTable").DataTable();
}
Надеюсь, кто-то найдет это полезным!
-
1– nhaberl 16 March 2018 в 13:49
Вам нужно уничтожить старый экземпляр таблицы данных, а затем повторно инициализировать таблицу данных
Сначала Проверьте, существует ли экземпляр таблицы данных с помощью $ .fn.dataTable.isDataTable
, если существует, затем уничтожить его, а затем создать новый экземпляр, подобный этому
if ($.fn.dataTable.isDataTable('#dataTableExample')) {
$('#dataTableExample').DataTable().destroy();
}
$('#dataTableExample').DataTable({
responsive: true,
destroy: true
});
Вот решение для устаревшего datatable 1.9.4
var myData = [
{
"id": 1,
"first_name": "Andy",
"last_name": "Anderson"
}
];
var myData2 = [
{
"id": 2,
"first_name": "Bob",
"last_name": "Benson"
}
];
$('#table').dataTable({
// data: myData,
aoColumns: [
{ mData: 'id' },
{ mData: 'first_name' },
{ mData: 'last_name' }
]
});
$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);
Вы можете использовать:
$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);
Обновить. И да, текущая документация не так хороша, но если вы используете старые версии, вы можете ссылаться на устаревшую документацию .
-
1– covfefe 5 January 2015 в 12:52
-
2– reporter 5 January 2015 в 14:17
-
3– Max 12 October 2016 в 10:27
-
4– Alok Deshwal 23 June 2017 в 09:36