Question

我有一个像这样的数组：

"products": {
  "111111": {
    "date": "01.01.2018",
    "amount": 10,
    "user_id": "user1",
  }
  "222222": {
    "date": "10.10.2018",
    "amount": 15,
    "user_id": "user1,
  }
}

“ 111111”和“ 222222”是ID，它们是根据所选用户动态生成的。

我要显示以下几列：product_id，日期，金额，user_id

当列名是动态的时，有没有一种方法可以填充表？

谢谢！

Answer 1

如果您可以稍微更改json的格式，则可以在初始化数据表时轻松地将其分配为data属性的数组。如果不是这种选择，则可以通过遍历键值对并将该数据添加到json数组中，将其解析为以下格式。

$(document).ready(function() {
  var products = [{
      "product_id": "111111",
      "date": "01.01.2018",
      "amount": 10,
      "user_id": "user1",
    },
    {
      "product_id": "222222",
      "date": "10.10.2018",
      "amount": 15,
      "user_id": "user1",
    }
  ];

  var table = $('#example').DataTable({
    data: products,
    columnDefs: [
      { targets: 0, data: "product_id"},
      { targets: 1, data: "date" },
      { targets: 2, data: "amount" },
      { targets: 3, data: "user_id" }
    ]
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>product_id</th>
        <th>date</th>
        <th>amount</th>
        <th>user_id</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

如何使用带有动态键的多维数组填充dataTable

1 个答案: