时间戳

首页 > 解决方案 > 如何在 MDBootstrap 中为 DataTables 使用异步 .update() 方法？

javascript - 如何在 MDBootstrap 中为 DataTables 使用异步 .update() 方法？

问题描述

我是 MDBootstrap 的新手，我正在尝试学习如何使用 DataTables。我已经在他们的网站上看到了异步表更新的示例，但是我发现将其转换为我的用例令人困惑。

我有兴趣专门学习如何使用异步表更新方法，因为我希望我的表根据我从下拉列表中收集的过滤器动态更新四列。

我希望该表通过调用一个 PHP 端点来获取其数据，该端点将以 JSON 形式返回数据，但我不明白如何使用该asyncTable.update()方法（基于他们的示例）。

为简单起见，我们假设 PHP 端点返回类似于以下内容的 JSON：

[ { "a": "a string", "b": "another string", "c": "another string", "d": "another string" }, { "a": "a string", "b": "another string", "c": "another string", "d": "another string" }]

根据 MDBootstrap 站点（如下所列）的示例代码片段，如何修改代码以调用我自己的端点？我不理解.update()示例代码方法中的 javascript 语法：

const columns = [
  { label: 'A', field: 'a' },
  { label: 'B', field: 'b' },
  { label: 'C', field: 'c' },
  { label: 'D', field: 'd' },
];

const asyncTable = new mdb.Datatable(
  document.getElementById('datatable'),
  {
    columns,
  }
);

//var url = 'MY OWN PHP ENDPOINT URL';
var url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
  .then((response) => response.json())
  .then((data) => {
    asyncTable.update(
      {
        rows: data.map((user) => ({
          ...user,
          address: `${user.address.city}, ${user.address.street}`,
          company: user.company.name,
        })),
      },
      { loading: false }
    );
  });
});

对于如何使用我自己的端点而不是提供的示例端点和数据结构来使用此方法，我将不胜感激。

谢谢

标签： javascriptjsontwitter-bootstrapbootstrap-5mdbootstrap

解决方案

您必须更改fetch端点 URL 的链接

  fetch('https://custom-api.com/rows')

update() 方法有两个参数：data和options。更改 URL 后，您必须修改data参数以对应您的数据。在您的示例中，它将如下所示：

   fetch('https://your-url.com/rows')
  .then((response) => response.json())
  .then((data) => {
    asyncTable.update(
      {
        rows: data.map((row) => ({
          a: row.a,
          b: row.b,
          c: row.c,
          d: row.d
        })),
      },
      { loading: false }
    );
  });

这个例子对你来说可能看起来更干净：https ://mdbootstrap.com/snippets/standard/m-duszak/3000204#js-tab-view

推荐阅读