Datatable加载时最后一列New Total显示undefined，修改输入后正常如何解决

问题原因 #

问题由两个错误共同导致：

• AJAX是异步请求，你在Datatable初始化后立即遍历计算total字段时，AJAX请求还没返回，表格还没有加载到真实数据，赋值操作无效
• 直接遍历Datatable实例无法获取行数据，且计算时用到的r.qty、r.price和你数据源里的字段quantity、cost不匹配，取值为undefined导致计算结果异常

最优解决方案 #

直接修改New Total列的render逻辑，不需要依赖提前赋值的total字段，加载时会自动基于行数据计算结果，修改输入框更新数据后也会自动重新渲染：

{
    title: "New Total",
    "render": function (data, type, row) {
        return "$" + calcTotal(row.quantity, row.cost);
    }
}

修改后删除你原来写的这段无效代码即可：

var table = $('#example').DataTable();
$.each(table, function (i, r) {
    r.total = calcTotal(r.qty, r.price);
});

保留total字段的方案 #

如果你一定要保留通过total字段取值的逻辑，可以在Datatable配置里添加initComplete回调，等数据加载完成后再批量计算赋值：

var table = $('#example').DataTable({
    "ajax": {
        "url": apiurl,
        "type": 'GET',
        "datatype": 'json'
    },
    columns: [
        { title: "Item Key", data: "itemKey" },
        { title: "Description", data: "description" },
        { title: "Pounds", data: "pound" },
        {
            title: "Current Cost", data: function (data, type, row) {
                return '<input type="number" class ="price-input"  value="' + data.cost + '" style="background-color:lightgoldenrodyellow;">';
            }
        },
        { title: "Current Cost", data: "cost" },
        { title: "Unit", data: "unit" },
        {
            title: "Quantity", data: "quantity"
        },
        {
            title: "Total", data: function (data, type, row) {
               return data.cost * data.quantity;
            }
        },
        {
            title: "New Total", "data": "total",
            "render": function (data, type, row) {
                return "$" + data;
            }
        }
    ],
    // 新增初始化完成回调，等数据加载完成后执行
    "initComplete": function() {
        const api = this.api()
        // 遍历所有行计算total值
        api.rows().every(function() {
            const rowData = this.data()
            rowData.total = calcTotal(rowData.quantity, rowData.cost)
            this.data(rowData)
        })
        api.draw()
    }
});

同样需要删除你之前写的那段独立的遍历赋值代码。

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