如何在 MDBootstrap 中为 DataTables 使用 async .update() 方法？

Question

我是 MDBootstrap 的新手，我正在尝试学习如何使用数据表。我在他们的网站上看到了异步 table 更新的示例，但是我发现将其转换为我的用例很混乱。

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

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

为了简单起见，我们假设 PHP 端点 returns 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 }
    );
  });
});

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

谢谢

Answer 1

您必须更改 fetch 中的 link 以用于您端点的 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

如何在 MDBootstrap 中为 DataTables 使用 async .update() 方法？

How do I use the async .update() method for DataTables in MDBootstrap?

javascript

json

twitter-bootstrap

bootstrap-5

mdbootstrap