Datatable.js 从 object 制作 table

Question

假设我有一组 object，每个都包含我要存储到数据 table 中的数据。根据文档，我通常会做类似的事情：

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'],
    ['Gecko', 'Camino 1.0', 'OSX.2+', '1.8', 'A'],
    ['Gecko', 'Camino 1.5', 'OSX.3+', '1.8', 'A'],
    ['Gecko', 'Netscape 7.2', 'Win 95+ / Mac OS 8.6-9.2', '1.7', 'A'],
    ['Gecko', 'Netscape Browser 8', 'Win 98SE+', '1.7', 'A'],
    ['Gecko', 'Netscape Navigator 9', 'Win 98+ / OSX.2+', '1.8', 'A'],
    ['Misc', 'PSP browser', 'PSP', '-', 'C'],
    ['Other browsers', 'All others', '-', '-', 'U']
];

但我的数据显示为 object 的数组。我可以在 for 循环中遍历它们并获取每条数据吗？例如，如果我有一个包含标题和一些数据的 object, obj，则以下内容不起作用：

var finalObj = "["
for (var i = 0; i < obj.length; i++) {
    finalObj = finalObj + "['" + obj[i].title + "','" + obj[i].data + "']";
}
finalobj = finalObj + "]";

这导致我的数据table 每列仅包含一个字母。创建格式如上例的字符串（或其他 object）的正确方法是什么？

Answer 1

这是使用 data option in the initialization 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.data 选项实现的）

有关代码和演示，请参见下面的示例。

$(document).ready( function () {
  
  var obj = [
        {
            "title": "Tiger Nixon",
            "data": "System Architect"
        },
        {
            "title": "Garrett Winters",
            "data": "Accountant"
        },
        {
            "title": "Ashton Cox",
            "data": "Junior Technical Author"
        }
  ];
  
  $('#example').DataTable({
    "data": obj,
    "columns": [
       { "data": "title" },
       { "data": "data" }
    ]
  });

});

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display" width="100%">
        <thead>
          <tr>
            <th>Title</th>
            <th>Data</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Title</th>
            <th>Data</th>
          </tr>
        </tfoot>

        <tbody>
        </tbody>
      </table>
    </div>
  </body>
</html>

Answer 2

我认为您需要有关 javascript sourced data

的示例

如您所见，它使用以下代码创建 table

 $('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    } );

Datatable.js 从 object 制作 table

Datatable.js make table from object

javascript

jquery

datatables

jquery-datatables