jQuery -动态数据表-数据JSON

nr7wwzry  于 2022-12-12  发布在  jQuery
关注(0)|答案(1)|浏览(179)

我要创建具有动态列和数据的DataTable。

我的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));
        }
    });
});

我想要以下结果

但我收到了这个

dtcbnfnu

dtcbnfnu1#

该文档建议的datacolumns略有不同。
对于每一列,必须指定要使用的数据及其title
每一行都必须是一个对象,它由分配给它的列data来键控。
我承认DataTables文档导航起来有点不直观...但是它是非常完整的。
下面是 AJAX success回调中应该包含的代码。
第一个

相关问题