DataTable添加行报错‘Requested unknown parameter’求助

问题描述 #

添加新行时触发错误提示：

DataTables warning: table id=table-workshops - Requested unknown parameter 'name' for row 39, column 0.

表格加载已有数据显示正常，但新增行显示为空。

相关代码 #

HTML代码 #

<table class="table table-bordered table-striped table-hover js-basic-example" id="table-workshops">
    <thead>
        <tr>                    
            <th>Workshop</th>
            <th>Number</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

jQuery代码 #

var workshops = JSON.parse(workshops_get());
var table = $('#table-workshops');

table.DataTable({
    destroy: true,
    data: workshops,
    pageLength: 5,
    columns: [
        {data: 'name'},
        {data: "number"},
        {data: "category"},
    ],
    order: [[0, 'asc']]
});

$(document).on('click', '.workshop-add', function(){
    table.DataTable().row.add(['test', 'test', 'test']).draw();
});

问题原因 #

你的DataTables配置采用对象数据源模式（通过columns.data指定了对象属性名name/number/category），但添加新行时传入的是数组格式数据，两者数据结构不匹配。DataTables会尝试从数组中读取name属性，自然找不到对应值，因此报错并显示空行。

解决方案 #

添加新行时传入与原有数据结构一致的对象格式数据，而非数组：

$(document).on('click', '.workshop-add', function(){
    table.DataTable().row.add({
        name: 'test',
        number: 'test',
        category: 'test'
    }).draw();
});

若确实需要使用数组格式添加行，需修改DataTables初始化配置，将columns.data改为数组索引（如{data: 0}），但同时原有数据源也需改为数组格式，这种方式不如保持数据结构一致更稳妥。

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