Как вручную обновить таблицу datatables новыми данными JSON


99

Я использую плагин 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 в таблицах данных - не поймите меня неправильно!) и обновить таблицу этими данными. Как я могу это сделать с помощью API таблиц данных? Документация очень запутанная, и я не могу найти решение. Любая помощь будет очень признательна. Спасибо.


Как насчет удаления существующего тела таблицы и создания его нового?
Репортер

Ответы:


178

РЕШЕНИЕ: (Примечание: это решение предназначено для таблиц данных версии 1.10.4 (на данный момент), а не для устаревшей версии).

УТОЧНЕНИЕ Согласно документации API (1.10.15), к API можно получить доступ тремя способами:

  1. Современное определение DataTables (верхний регистр):

    var datatable = $( selector ).DataTable();

  2. Устаревшее определение DataTables (нижний регистр):

    var datatable = $( selector ).dataTable().api();

  3. Используя newсинтаксис.

    var datatable = new $.fn.dataTable.Api( selector );

Затем загрузите данные так:

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

Используйте, draw(false)чтобы оставаться на той же странице после обновления данных.

Ссылки API:

https://datatables.net/reference/api/clear ()

https://datatables.net/reference/api/rows.add ()

https://datatables.net/reference/api/draw ()


4
Это было слишком сложно найти, большое спасибо! Использование этого для сохранения данных между обращениями к серверу.
Дуг

Что насчет datatables версии 1.9.4. Я столкнулся с той же проблемой
Хардик Масалавала

5
Я просто хочу добавить, что вы также можете связать методы (т.е. datatable.clear().rows.add(newDataArray).draw()). Что касается этого комментария, я использую версию 1.10.18
Sal_Vader_808

как я могу добавить один столбец с помощью кнопки управления
ajinkya

31

Ты можешь использовать:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle

Обновить. И да, текущая документация не так хороша, но если у вас все в порядке, используя старые версии, вы можете обратиться к устаревшей документации .


Да, вы правы, но я использую последнюю версию таблиц данных. В любом случае, я нашел решение и обновил свой вопрос. Спасибо за проявленный интерес :)
Indy

1
@CookieMan, пожалуйста, удалите свою правку и опубликуйте ее в качестве ответа. После этого отметьте его как принятый.
Репортер

это решение не обновляет раздел пагинации
Алок Дешвал,

Это круто. Спасибо
Крис

8

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

Сначала проверьте, существует ли экземпляр таблицы данных, используя $ .fn.dataTable.isDataTable

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

    if ($.fn.dataTable.isDataTable('#dataTableExample')) {
        $('#dataTableExample').DataTable().destroy();
    }

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });

5

Вот решение для устаревшей версии 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);

Это работает для последней версии (пожалуйста, учитывайте дату комментария). Спасибо, Викас!
Telmo

Это сработало для меня. Но я не понимаю, почему я могу использовать все эти примеры: var datatable = $ (selector) .DataTable (); var datatable = $ (селектор) .dataTable (). api (); var datatable = new $ .fn.dataTable.Api (селектор); Но при добавлении .row (). Add () не работает.
Фернандо Пальма,

4

В моем случае я не использую встроенный ajax api для передачи Json в таблицу (это связано с некоторым форматированием, которое было довольно сложно реализовать в обратном вызове рендеринга datatable).

Мое решение состояло в том, чтобы создать переменную во внешней области функций onload и функцию, которая обрабатывает обновление данных ( var table = nullнапример).

Затем я создаю экземпляр своей таблицы в методе загрузки

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

и, наконец, в функции, которая обрабатывает обновление, я вызываю методы clear () и destroy (), извлекаю данные в таблицу html и повторно создаю экземпляр таблицы данных как таковой:

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

Надеюсь, кому-то это пригодится!


2
Уничтожение всего стола при каждом обходе обходится довольно дорого, и состояние также теряется. Вы должны рассмотреть принятый ответ, в котором сохраняется состояние таблицы.
nhaberl
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.