如何在数据表中动态填充文本框的值

Question

我正在从之前在表格单元格中显示的 API 获取数据。我现在已向单元格添加了一个输入框，我希望我的值现在显示在文本框中。

下面的代码用硬编码字符串“剩余时间”填充值

    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) {
                            return '<input class="form-control" id="Markup" name="Markup" type="text"  value = ' +'TimeRemaining'+ '  >'
                        }
                    },
                    {
                        '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>'
                    }
    
                ]

Answer 1

在您提供给

render

的函数中，

data

参数将包含在调用 API 时从该字段接收的值。因此，您需要附加该值：

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

请注意，这可以通过使用箭头函数和模板文字进一步简化：

{
  data: 'TimeRemaining',
  render: (d, t, r) => `<input class="form-control" id="Markup" name="Markup" type="text" value="${data}" />`
},