jQuery动态列DataTable实现问题：数据展示不符预期求解决

现有代码与数据 #

HTML代码 #

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

data.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));
        }
    });
});

问题现象 #

• 期望效果：表格每行显示一组Category和Price对应的数据，共5行2列
• 实际效果：表格仅2行，第一行是所有Category值，第二行是所有Price值

问题原因 #

DataTable要求data参数是行对象数组（每个元素对应一行数据，包含各列字段），但当前Object.values(response)返回的是两个数组（分别对应Category和Price的所有值），格式不符合DataTable的要求。

解决方案 #

需要将按列存储的数据转换为按行存储的结构，修改success回调中的数据处理逻辑：

$(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 };
            });
            
            // 将按列存储的数据转换为按行存储的数组
            var rowData = [];
            // 获取数据总行数（取第一列的元素数量）
            var rowCount = Object.values(response[Object.keys(response)[0]]).length;
            for (let i = 0; i < rowCount; i++) {
                let row = {};
                Object.keys(response).forEach(key => {
                    row[key] = response[key][i];
                });
                rowData.push(row);
            }
            
            $('#example').DataTable({
                data: rowData,
                columns: columns
            });
        },
        error: (error) => {
            console.log(JSON.stringify(error));
        }
    });
});

代码说明 #

1. 列名获取逻辑和原代码一致，确保动态生成表头
2. 计算总行数：通过第一列的元素数量确定表格的总行数
3. 循环构建行数据：遍历每一行索引，为每个列名赋值对应位置的数据，最终组成符合要求的行对象数组
4. 将转换后的rowData传入DataTable的data参数，即可渲染出期望的表格效果

内容的提问来源于stack exchange，提问作者koukis