javascript - 使用对象数组更新数据表

Question

下面有一组对象。

   var arrayObjects= [
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    },
    {
        "name":       "Garrett Winters",
        "position":   "Director",
        "salary":     "$5,300",
        "start_date": "2011/07/25",
        "office":     "Edinburgh",
        "extn":       "8422"
    }
]

数组通过我的应用进行的一些 API 调用动态更新。

我实例化了一个数据表，如图所示。此时的数组，arrayObjects是空的。

HTML
<table id="myTable" class="table table-striped table-dark">
         <thead>
          <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Salary</th>
              <th>Office</th>
          </tr>
      </thead>
    </table>
JAVASCRIPT
var myDataTable=$('#myTable').DataTable( {
    data: arrayObjects,
    columns: [
         { data: 'name' },
         { data: 'position' },
         { data: 'salary' },
         { data: 'office' }
    ]
} );

我按如下方式在数组中添加新对象:

编辑:一些数据可以如下所示:

var somedata = {
        "name":       "James",
        "position":   "CEO",
        "salary":     "$13,140",
        "start_date": "2017/04/25",
        "office":     "London",
        "extn":       "54211"
    }
arrayObjects.push(somedata);

如何向表中添加数据/之后如何更新表？我试过:

myDataTable.clear().row.add(arrayObjects).draw();

但是好像不行。表格仍然是空的。

Answer 1

问题在于使用 row API 而不是 rows API，因为您存储为对象数组。

改成

myDataTable.clear().rows.add(arrayObjects).draw();

工作 jsfiddle.

---

要使用 row API，您必须将 arrayObjects 更改为简单数组或单个对象，如下所示

var arrayObjects = ['James', 'CEO', '$13000', 'London'];
// or
var arrayObjects = {
  "name": "James",
  "position": "CEO",
  "salary": "$13,140",
  "office": "London"
};

// it will work now
myDataTable.clear().row.add(arrayObjects).draw();