javascript - 使用 jquery 的 Datatables 插件动态设置表格标题 - 从数据对象获取标题

Question

我正在寻找一种动态设置表格标题的方法。有一个搜索表单可以执行数据库查询，并根据用户的选择每次获取不同的数据集。

现在标题是硬编码在 html 中的。

这是我设置表格的方式:

<table id="searchResults" class="display table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>agentId</th>
      <th>confirmTime</th>
      <th>name</th>
      <th>amount</th>
      <th>currency</th>
      <th>amountUSD</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>agentId</th>
      <th>confirmTime</th>
      <th>name</th>
      <th>amount</th>
      <th>currency</th>
      <th>amountUSD</th>
    </tr>
  </tfoot>
</table>

JavaScript:

Api.getDeposits(formData).then(function(res){
  $('#searchResults').dataTable( {
      "data": res,
      "scrollX": "100%",
      "columns": [
          { "data": "agentId" },
          { "data": "confirmTime" },
          { "data": "name" },
          { "data": "amount" },
          { "data": "currency" },
          { "data": "amountUSD" }
      ]
  });
});

示例数据:

[{
  "agentId": 70,
  "amount": 250,
  "amountUSD": 250,
  "confirmTime": "2015-04-28 10:49:00",
  "currency": "USD",
  "email": "name@mail.ru",
  "name": "some name",
  "paymentMethod": "Credit Card",
  "status": "approved"
}]

我想根据从服务器得到的数据设置tfoot,thead,所以对于很多情况我只有一个模板

Answer 1

嗯。你的问题没有完全意义。如果可以对列进行硬编码，为什么不能对标题进行硬编码？我的意思是，如果 email 字段是静态的，那么标题 email 也会是静态的吗？

无论如何，我认为您两者都想要 - 一个模板，您可以在其中传递具有任意数量的字段和标题/字段名称的任何 JSON。以下模板可以做到这一点:

<table id="example"></table>

脚本:

$.getJSON('url/to/json/data', function(json) {
    var keys = Object.keys(json['data'][0]),
        columns = [];
    for (var i=0;i<keys.length;i++) {
        columns.push(
            { data: keys[i], title: keys[i] }   
        );
    }
    var table = $('#example').DataTable({
        data : json.data,
        columns : columns
    });
});

这将采用 any JSON 格式 any 表单 { 'data' : [...] } 并将其制作成一个数据表，其中字段名称作为标题，字段对象作为数据。

如果你的JSON在表单上

{ "agents": [
  {
    "agentId": 70,
    ...
  }, ...
]

然后简单地将 data 引用重命名为 agents ；

$.getJSON('url/to/json/data', function(json) {
    var keys = Object.keys(json['agents'][0]),
        columns = [];
    for (var i=0;i<keys.length;i++) {
        columns.push(
            { data: keys[i], title: keys[i] }   
        );
    }
    var table = $('#example').DataTable({
        data : json.agents,
        columns : columns
    });
});

如果您的 JSON 是一个普通数组 [{ ... }, { ... }] 然后完全跳过 data 引用:

$.getJSON('url/to/json/data', function(json) {
    var keys = Object.keys(json[0]),
        columns = [];
    for (var i=0;i<keys.length;i++) {
        columns.push(
            { data: keys[i], title: keys[i] }   
        );
    }
    var table = $('#example').DataTable({
        data : json,
        columns : columns
    });
});