Question

我了解您可以使用ajax填充数据表。但是可以使用提取吗？因为我有这个普通表，所以使用提取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'
} );

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

如果有人正在寻找答案。

是的，您可以使用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/

Answer 3

我自己正在寻找这个答案，因为我试图尽可能远离 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

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

3 个答案: