从 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' page on Javascript-Sourced Data,

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

如果您想使用 objects as data source 而不是数组，您需要使用 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: "
  }
});

见demo

从 Javascript 来源创建数据表

Creating datatables from Javascript source

javascript

jquery

json

datatables