在 jQuery 中向 DataTable 添加新行时出错答案

【问题标题】：Error while adding a new row to DataTable in jQuery在 jQuery 中向 DataTable 添加新行时出错
【发布时间】：2014-02-16 20:01:58
【问题描述】：

我将 dataSource 定义为

function getData(){
     var arr = [];
     for(var i=0; i<1000; i++){
          var obj = {
               'name': 'John', 'company' : 'ABC Corp', 'salary': '$x'
         };
         arr.push(obj);
     }
     return arr;
}

表格被渲染为

var arr = getData();
$('#table1').dataTable({
      'aaData': arr,
      'aoColumns': [
           {'sTitle': 'name'},
           {'sTitle': 'company'},
           {'sTitle': 'salary'}
      ]
}}

现在，当我尝试将新行添加到 dataTable 时

$('#table1').dataTable.fnAddData([
      "&nbsp;", "&nbsp;", "&nbsp;"
]);

我得到一个错误

DataTables 警告（表 id = 'table1'）：从第 1001 行的数据源请求未知参数 'name'

这是什么原因造成的？

【问题讨论】：

这是 IE 吗？只是为了删除可能的 ie 关键字.. 将名称更改为 fname。

标签： javascript jquery datatables jquery-datatables

【解决方案1】：

问题不在于您尝试添加新行。当您尝试将objects 的array 插入为aaData 时，该错误已经出现。您必须通过aoColumns 定义每个对象的哪个属性对应于一列：

var dataTable = $('#example').dataTable({
    aaData : arr,
    aoColumns: [
        {mDataProp: 'name'},
        {mDataProp: 'company'},
        {mDataProp: 'salary'}
    ]
});

现在从object 到aaData 的映射就可以了。请注意，如果您使用 1.9.4 或更高版本的数据表，mDataProp 将重命名为 mData（即使它仍然可以工作）。接下来，

$('#table1').dataTable.fnAddData([
  "&nbsp;", "&nbsp;", "&nbsp;"
]);

错了。 dataTables 应该如何知道它应该如何处理该数组？它会在您的控制台中引发一个巨大的错误（您可能还没有看到，因为脚本已经在aaData : arr 停止。正确的方法是在您的dataTable-object 上调用fnAddData，并在同一位置插入数据方式正如您之前在aoColumns 中定义的数据应该被插入：

dataTable.fnAddData([
  'a', 'b', 'c'
]);

错了

dataTable.fnAddData(
  { name : "a", company : "b", salary : "c" }
);

是正确的。请参阅上面的示例和您在此小提琴中工作的代码 -> http://jsfiddle.net/krs6f/

【讨论】：