使用对象数组更新数据表

时间:2018-04-08 14:30:59

标签: javascript jquery datatables

下面有一系列对象。

DaggerBlogComponent.builder()
          .applicationComponent(((BlogApplication)getApplication()).getApplicationComponent())
          .blogModule(new BlogModule())
          .build().inject(this);

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

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

   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"
    }
]

我在数组中添加新对象,如下所示:

编辑:somedata可以如下:

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);

但它似乎不起作用。表格仍然是空的。

1 个答案:

答案 0 :(得分:1)

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

将其更改为

rows

工作jsfiddle.

要使用myDataTable.clear().rows.add(arrayObjects).draw(); API,您必须将row更改为简单数组或单个对象,如下所示

arrayObjects