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

【问题标题】：Can I use fetch api in jquery-datatables?我可以在 jquery-datatables 中使用 fetch api 吗？
【发布时间】：2019-06-11 06:03:01
【问题描述】：

我了解您可以使用 ajax 来填充数据表。但是你可以使用 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 而不是使用它来填充数据表。

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

【问题讨论】：

标签： ajax datatables fetch-api

【解决方案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') )
    );
  }
});

【讨论】：

【解决方案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

【讨论】：

【解决方案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 正在返回一个承诺。

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

【讨论】：