Ajax 我可以在jquery数据表中使用fetch api吗？

我知道可以使用ajax填充数据表。但是你能用fetch吗？ 因为我有一个普通的表，使用fetchapi动态填充

$(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))
}

---

可以使用“ajax”选项作为函数，请参见

作为一项功能，进行Ajax调用由您自己决定，允许完全控制Ajax请求。事实上，如果需要，可以使用Ajax以外的方法来获取所需的数据，如Web存储或Firebase数据库

从数据源获取数据后，应使用传入的单个参数调用此处的第二个参数回调-用于绘制表的数据

例如：

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

---

如果有人在寻找答案

是的，您可以使用fetch填充datatable，下面是一个示例

fetchEndPointData(dc)
    .then(aggregatedData => {
        $('#table1').dataTable().api().rows.add(aggregatedData);
    }).catch(error => {
      // When fetch ends with a bad HTTP status, e.g. 404
      console.log(error.message);
    });

调用的方法

async function fetchEndPointData(dc) {
  const response = await fetch('/someEndPoint=' + dc);
  const movies = await response.json();
  return movies;
}

注意：fetchEndPointData正在返回一个承诺

---

参考资料：

我自己也在寻找这个答案，因为我试图尽可能远离jquery，但在任何地方都找不到答案。我最终自己解决了这个问题，实现与使用DataTable建议的jQueryAjax调用没有太大区别

        var myTable = $('#myTable').DataTable({
        ajax: async function (data, callback, settings) {
            let response = await fetch("/api/v1/some/end/point", {headers: {Authorization: 'Bearer ' + sessionStorage.getItem("token")}});
            if (response.ok) {
                let msg = await response.json();
                sessionStorage.setItem('token', msg.token);
                console.table(msg.data);
                delete msg['token'];
                callback(msg);
            } else {
                console.log(response);
            }
        },
        ...... followed by the usual DataTable options

        var myTable = $('#myTable').DataTable({
        ajax: async function (data, callback, settings) {
            let response = await fetch("/api/v1/some/end/point", {headers: {Authorization: 'Bearer ' + sessionStorage.getItem("token")}});
            if (response.ok) {
                let msg = await response.json();
                sessionStorage.setItem('token', msg.token);
                console.table(msg.data);
                delete msg['token'];
                callback(msg);
            } else {
                console.log(response);
            }
        },
        ...... followed by the usual DataTable options