從Javascript源創建數據表

Question

我正在嘗試基於用JSON數據填充的javascript var的輸入來構建數據表（1.10.7）。 雖然我已經成功地將數據表與ajax源一起使用，但我從未嘗試僅提供自己的變量，但是在這種情況下，我需要這樣做。

這是我的變量：

json = [
 {"dateReceived":"2015-01-01","designCustomer":"MULTITEST 1","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"2016-04-05","designCustomer":"MULTITEST 2","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"1982-04-18","designCustomer":"MULTITEST 3","designCustomerLocation":"SUNNYVALE, CA"}
 ]

根據DataTables關於Javascript來源的數據的頁面 ，

This is achieved using the dataDT option in the initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the columns.dataDT option).

我對他們的測試字符串和我的差異感到困惑：

var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A']

也就是說，他們的測試變量不包含field names ，而我的則包含。

這是我為嘗試解析變量json而編寫的代碼：

var table = $('#ltc-table').DataTable( {    
    "data" : json,        
    "columns" : [
      { "title" : "designCustomer" },
      { "title" : "designCutomerLocation" },
      { "title" : "dateReceived" },
  ],
  "lengthMenu": [ 25, 50, 101 ],
  "oLanguage": {
  "sSearch": "Filter Results: "
  }
});

根據我上面鏈接的頁面，看來我正在正確執行此操作，但是卻出現錯誤：

Uncaught Error: DataTables warning: table id=ltc-table - Requested unknown parameter '0' for row 0.

有小費嗎？

Answer 1

如果要將對象用作數據源而不是數組，則需要使用columns.data選項綁定列：

json = [
 {"dateReceived":"2015-01-01","designCustomer":"MULTITEST 1","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"2016-04-05","designCustomer":"MULTITEST 2","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"1982-04-18","designCustomer":"MULTITEST 3","designCustomerLocation":"SUNNYVALE, CA"}
];

var table = $('#ltc-table').DataTable( {    
    "data" : json,        
    "columns" : [
      { "data" : "designCustomer" },
      { "data" : "designCustomerLocation" },
      { "data" : "dateReceived" }
  ],
  "lengthMenu": [ 25, 50, 101 ],
  "oLanguage": {
  "sSearch": "Filter Results: "
  }
});

觀看演示