jQuery - 動態數據表 - 數據 JSON

Question

我想創建一個包含動態列和數據的數據表。
我的 html 代碼：

<body>
    <table id="example" class="display">
    </table>
</body>

我的數據.json：

{
    "Category": {
        "0": "Bags",
        "1": "Shoes",
        "2": "School",
        "3": "Video-Games",
        "4": "PC-Games"
    },
    "Price": {
        "0": 10,
        "1": 20,
        "2": 30,
        "3": 40,
        "4": 50
    }
}

在這一點上，我希望類別和價格成為列。

我的js代碼是：

$(document).ready(function name(params) {
    $.ajax({
        url: "data.json",
        method: 'get',
        dataType: 'json',
        success: function (response) {
            var columns = Object.keys(response).map(function (key) {
                return { title: key };
            });

            $('#example').DataTable({
                data: Object.values(response),
                columns: columns
            });
        },
        error: (error) => {
            console.log(JSON.stringify(error));
        }
    });
});

我想要以下結果

但我收到這個：

Answer 1

該文檔建議使用略有不同的data和columns格式。
對於每一列，您必須指定要使用的數據及其標題
並且每一行都必須是一個 object，由分配給它的列data作為鍵控。

我承認 DataTables 文檔導航起來有點不直觀……但它非常完整。

以下是 Ajax success回調中應包含的代碼。

 const data = { "Category": { "0": "Bags", "1": "Shoes", "2": "School", "3": "Video-Games", "4": "PC-Games" }, "Price": { "0": 10, "1": 20, "2": 30, "3": 40, "4": 50 } } const columnKeys = Object.keys(data) const columns = columnKeys.map((column) => ({title: column, data: column})) const rowKeys = Object.keys(data[columnKeys[0]]) const rows = rowKeys.map((rowKey) => { const row = {} columnKeys.forEach((columnKey) => row[columnKey] = data[[columnKey]][rowKey]) return row }) //console.log(columnKeys) console.log(columns) //console.log(rowKeys) console.log(JSON.stringify(rows)) $('#example').DataTable({ data: rows, columns: columns });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script> <body> <table id="example" class="display"> </table> </body>

jQuery - 動態數據表 - 數據 JSON

問題描述

1 個解決方案

解決方案1
1 已采納 2022-12-10 18:11:55

jQuery - 動態數據表 - 數據 JSON

問題描述

1 個解決方案

解決方案1 1 已采納 2022-12-10 18:11:55

解決方案1
1 已采納 2022-12-10 18:11:55