如何在數據表中呈現來自`dataSrc` function 的列？

Question

我想使用 AJAX 請求將 API 中的數據顯示到數據表中，這是我的 API 響應：

{
    "title": "success",
    "data": {
        "name": "yogi",
        "email": "yogi@gmail.com",
        "activity": [
            {
                "name": "pergi"
            },
            {
                "name": "belanja"
            },
            {
                "name": "makan"
            },
            {
                "name": "tidur"
            }
        ]
    }
}

這是我的數據表腳本：

$(document).ready(function () {
    $("#activity-list").DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: `${baseurl}/api/user/${user_id}/activity`,
            dataSrc: function (json) {
                let results = [];
                for (let i = 0; i < json.data.activity.length; i++) {
                    results.push({
                        name: json.data.name,
                        email: json.data.email,
                        activity: json.data.activity[i].name,
                    });
                }
                return results;
            },
        },
    });
});

為什么數據沒有出現，而是我收到錯誤消息？

Answer 1

您唯一缺少的是columns選項，它將您的results數組映射到 HTML 表的列：

$("#activity-list").DataTable({
  processing: true,
  serverSide: true,
  columns: [
    { data: "name" },
    { data: "email" },
    { data: "activity" }
  ],
  ajax: {
    url: '[my test URL here]',
    dataSrc: function (json) {
      let results = [];
      for (let i = 0; i < json.data.activity.length; i++) {
        results.push({
          name: json.data.name,
          email: json.data.email,
          activity: json.data.activity[i].name,
        });
      }
      return results;
    }
  }
});

---

這假設您定義了一個 HTML 表，該表已經具有您要顯示的列標題：

<table id="activity-list" class="display dataTable cell-border" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Activity</th>
        </tr>
    </thead>
</table>

（或者，如果您願意，可以使用title將這些標題添加到 DataTables columns選項。）