Question

我在一个隐藏变量中有JSON数据（使用旧式回发，而不是ajax调用）。我已经在下面的代码中编写了相同的代码以填充到数据表中。

var BatchDataList = JSON.parse($('#BatchDataJSON').val());
$('#BatchListTable').DataTable(
{
    'data': BatchDataList,
    'columnDefs': [
        {
            data: "BatchID"
        },
        {
            data: "BatchType"
        },
        {
            data: "CreatedDate"
        },
        {
            data: "IsBatchCompleted"
        }
    ],
    "autoWidth": false,
    responsive: true,
    "scrollX": true,
});

实际的表定义如下。

<table id="BatchListTable" class="table table-bordered table-striped table-hover dataTable" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th>Batch ID</th>
                                        <th>Batch Type</th>
                                        <th>Create Date</th>
                                        <th>Completed</th>
                                    </tr>
                                </thead>
                                <tbody runat="server">
                                </tbody>
                            </table>

运行此代码时，出现错误，提示“请求参数未知”。我以为我的JSON可能无效。但这似乎很好。这是一个例子。

[{"BatchID":"31-a1eac15c","CreatedDate":"2018-12-19T11:51:18.577","IsBatchCompleted":false,"BatchType":"Conversion"},
{"BatchID":"31-b3e8cc7e","CreatedDate":"2018-12-19T10:18:51.27","IsBatchCompleted":false",BatchType":""}]

我认为将JSON分配给数据表的方式存在问题。但是我似乎无法弄清楚我在这里缺少什么。

P.S。我尝试直接使用变量的值，而不进行分析。在这种情况下也是同样的问题。

Answer 1

尝试将targets属性放在columndefs中：但是您需要根据表格对数据列进行排序。

inspect [Id, Node, Timestamp]
#⇒ "[Id, Node, Timestamp]"

根据表格列对JSON进行排序：

var BatchDataList = JSON.parse($('#BatchDataJSON').val());
$('#BatchListTable').DataTable(
{
    'data': BatchDataList,
    'columnDefs': [
       {targets: 0}
    ],
    "autoWidth": false,
    responsive: true,
    "scrollX": true,
});

Answer 2

解决了问题。

需要两件事。必须删除空的tbody标签。并将columnDefs更改为columns。是的，s中的columns非常重要。第一次这样做是我的错误。

使用变量中的JSON数据填充JQuery数据表

2 个答案: