使用 jquery 的数据 tables 插件动态设置 table 标题 - 从数据 object 获取标题

Question

我正在寻找一种动态设置 table 标题的方法。有一个执行数据库查询的搜索表单，每次都会根据用户选择获得不同的 data-set。

现在 html 中的标题是 hard-coded。

这就是我设置 table:

的方式

<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' : [...] } 并将其添加到数据表中，字段名称作为标题，字段 objects 作为数据。

如果您的 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
    });
});

使用 jquery 的数据 tables 插件动态设置 table 标题 - 从数据 object 获取标题

dynamically set table titles with jquery's Datatables plugin - get titles from data object

javascript

jquery

jquery-datatables