Datatable.js可以从对象中创建表格。

Question

Datatable.js可以从对象中创建表格。

3

假设我有一组包含要存储到数据表中的数据的对象。根据文档，我通常会执行以下操作：

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 + "]";

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

- ale10ander

2个回答

1

我认为您需要关于JavaScript源数据的示例。

正如您自己所看到的，它使用以下代码创建表格。

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

- cs04iz1

是的，这就是我在问题中提到的例子。 :) 但我不知道如何使用它从对象中获取数据。似乎我仍然需要事先知道我的数据是什么。 - ale10ander

你正在使用的JSON并没有给你特定的数据。它只是数据，而你必须知道它们代表什么。现在，如果你有一个对象，其属性描述了值，你可以执行以下操作来填充表格：$.each(your_object, function(index, value) {
$("#your_table").DataTable().row.add([value.property1, value.property2, ....,value.propertyN]).draw(); }); - cs04iz1

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gyrocode.com · Accepted Answer

这可以通过初始化对象中的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>