我可以在jquery-datatables中使用fetch api吗？

Question

我知道您可以使用ajax来填充datatable。但是你能使用fetch吗？因为我有这个普通的表，用fetch api动态填充。

$(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而不是用这个来填充datatable。

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

Answer 1

可以使用'ajax‘选项作为函数，请参阅https://datatables.net/reference/option/ajax#function

作为一个函数，进行Ajax调用由您自己决定，这样就可以完全控制Ajax请求。实际上，如果需要的话，可以使用Ajax以外的方法来获取所需的数据，比如Web存储或Firebase数据库。

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

示例：

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

Answer 2

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

        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

Answer 3

如果有人在寻找答案。

可以，您可以使用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返回一个promise。

参考：https://dmitripavlutin.com/javascript-fetch-async-await/