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

Question

我将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([
      " ", " ", " "
]);

我得到一个错误

DataTables warning(table id ='table1'):从行1001的数据源请求的未知参数'name'

是什么导致这个？

Answer 1

问题不在于您尝试添加新行.当您尝试插入一个已经出现的错误array的objects作为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([
  " ", " ", " "
]);

是错的.dataTables应该如何知道它应该如何处理该数组呢？它在您的控制台中引发了一个巨大的错误(您可能还没有看到,因为脚本已经停止了aaData : arr.正确的方法是调用fnAddDatadataTable对象,并以与之前相同的方式插入数据,aoColumns定义数据应该插入:

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

是错的

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

是正确的.请参阅上面的示例以及您在此小提琴中运行的代码 - > http://jsfiddle.net/krs6f/