Могу ли я использовать fetch api в jquery-datatables?

Question

Я понимаю, что вы можете использовать ajax для заполнения таблицы данных. Но вы можете использовать fetch? Потому что у меня есть эта обычная таблица, заполненная динамически с помощью API fetch.

$(document).ready(function(){
fillTable();
})
//fetch api (AJAX) to fill table
fillTable = () => {
fetch('http://localhost:3000/home.json')
.then(response => response.json())
.then(data => {
    let html = '';
    for (i = 0; i < data.length; i++){
        html += '<tr>'+
                    '<td class="tdUsername pv3 w-35 pr3 bb b--black-20">'+ data[i].username + '</td>'+
                    '<td class="tdPassword pv3 w-35 pr3 bb b--black-20">'+ data[i].password + '</td>'+
                    '<td class="pv3 w-30 pr3 bb b--black-20">'+
                      '<div class="btn-group" role="group" aria-label="Basic example">'+
                        '<a class="editButton f6 grow no-underline ba bw1 ph3 pv2 mb2 dib black pointer"  data-toggle="modal">EDIT</a>'+
                        '<a class="deleteButton f6 grow no-underline ba bw1 ph3 pv2 mb2 dib black pointer"  data-toggle="modal">DELETE</a>'+
                      '</div>'+
                    '</td>'+
                '</tr>'
    }
    $('#tblBody').html(html);
})
.catch(err => console.log("ERROR!: ", err))
}

Так что мне интересно, могу ли я использовать fetch-api вместо того, чтобы использовать это для заполнения таблицы данных.

//syntax copied from the website
$('#myTable').DataTable( {
ajax: '/api/myData'
} );

Answer 1

В качестве функции можно использовать опцию 'ajax', см. https://datatables.net/reference/option/ajax#function

В качестве функции выполнение вызова Ajax остается на ваше усмотрение, что позволяет полностью контролировать запрос Ajax.Действительно, при желании для получения требуемых данных можно использовать метод, отличный от Ajax, например, веб-хранилище или базу данных Firebase.

Когда данные получены из источника данных, второй параметр (обратный вызов)здесь) должен вызываться с одним переданным параметром - данными, используемыми для рисования таблицы.

Пример:

$('#example').dataTable( {
  "ajax": function (data, callback, settings) {
    callback(
      JSON.parse( localStorage.getItem('dataTablesData') )
    );
  }
});