从Javascript源创建数据表

Creating datatables from Javascript source

本文关键字：数据表 创建 Javascript      更新时间：2023-09-26

我正试图基于填充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"}
 ]

根据Javascript Sourced Data上的DataTables页面，

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.

有什么建议吗？

如果要使用对象而不是数组作为数据源，则需要使用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: "
  }
});

参见演示

相关文章：