如何在Data Table中动态为文本框填充API返回数据

问题出在你render函数里硬写了字符串TimeRemaining，而没有调用API返回的实际数据。直接把拼接的字符串换成参数data就行，这个参数就是当前行TimeRemaining字段的真实值，另外记得给value属性加引号避免格式问题：

修改后的代码：

columns: [
    { 'data': 'Studentid' },
    { 'Testid': 'Testid' },
    { 'data': 'Name' },
    { 'data': 'Surname' },
    { 'data': 'ExamNo' },
    { 'Studentid': 'Studentid' },
    { 'data': 'TestName' },
    { 'data': 'StartDate'},
    { 'data': 'EndDate' },
    { 'data': 'Description' },
    {
        'data': 'TimeRemaining',
        render: function (data, type, row) {
            // 把硬编码的'TimeRemaining'换成data，同时给value加双引号
            return '<input class="form-control" id="Markup" name="Markup" type="text" value="' + data + '">'
        }
    },
    {
        'data': null,
        "defaultContent": '<button id="btnUpdateTime" type="button" class="btn btn-block btn-primary glow" style="width:100px">Update Time</button>'
    },
    {
        'data': null,
        "defaultContent": '<button id="btnReset" type="button" class="btn btn-block btn-primary mb-2" style="width:100px">Reset</button>'
    }
]

如果你的项目支持ES6模板字符串，代码可以更简洁易读：

render: function (data, type, row) {
    return `<input class="form-control" id="Markup" name="Markup" type="text" value="${data}">`
}

这样input框里就会显示API返回的TimeRemaining对应的值了。

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