Question

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

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']
];

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

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

这导致我的数据表每列只包含一个字母。创建一个像上面例子那样格式化的字符串（或其他对象）的正确方法是什么？

Answer 1

这是使用初始化对象中的data选项实现的，传入要使用的数据数组（与所有其他DataTables处理数据一样，这可以是使用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

的示例

正如您自己可以看到的，它使用以下代码来创建表

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

Datatable.js从对象创建表

2 个答案: