Как вручную обновить таблицу datatables с новыми данными JSON
Я использую плагин jQuery datatables и загрузить мои данные, которые я загрузил в DOM в нижней части страницы и инициирует плагин таким образом:
var myData = [
{
"id": 1,
"first_name": "John",
"last_name": "Doe"
}
];
$('#table').dataTable({
data: myData
columns: [
{ data: 'id' },
{ data: 'first_name' },
{ data: 'last_name' }
]
});
сейчас. после выполнения некоторых действий я хочу получить новые данные с помощью ajax (но не ajax option build in datatables - не поймите меня неправильно!) и обновите таблицу с этими данными. Как это сделать с помощью API datatables? Документация очень запутанная, и я не могу найти решение. Любая помощь будет очень большой оцененный. Спасибо.
5 ответов
устранение: (обратите внимание: это решение для datatables версии 1.10.4 (на данный момент) не устаревшая версия).
уточнение на документация по API (1.10.15), доступ к API можно получить тремя способами:
-
современное определение DataTables (верхний регистр верблюда):
var datatable = $( selector ).DataTable();
-
устаревшее определение DataTables (Нижний верблюд case):
var datatable = $( selector ).dataTable().api();
-
С помощью
new
синтаксис.var datatable = new $.fn.dataTable.Api( selector );
затем загрузите данные следующим образом:
$.get('myUrl', function(newDataArray) {
datatable.clear();
datatable.rows.add(newDataArray);
datatable.draw();
});
ссылки на API:
https://datatables.net/reference/api/clear()
вы можете использовать:
$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);
обновление. И да, текущая документация не так хороша, но если вы в порядке, используя более старые версии, вы можете обратиться документов.
в моем случае я не использую встроенный api ajax для подачи Json в таблицу (это связано с некоторым форматированием, которое было довольно сложно реализовать внутри обратного вызова рендеринга datatable).
моим решением было создать переменную во внешней области функций 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();
}
надеюсь, кто-то найдет это полезным!
вот решение для устаревших 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);
вам нужно уничтожить старый экземпляр таблицы данных, а затем повторно инициализировать таблицу данных
сначала проверьте, существует ли экземпляр таблицы данных с помощью $.сноска.объект DataTable.isDataTable
если существует, то уничтожить его, а затем создать новый экземпляр такой
if ($.fn.dataTable.isDataTable('#dataTableExample')) {
$('#dataTableExample').DataTable().destroy();
}
$('#dataTableExample').DataTable({
responsive: true,
destroy: true
});