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

好。你的问题没有完全意义。如果你可以硬编码列，为什么你不能硬编码标题？我的意思是，如果void f() {}字段是静态的，那么标题email也会是静态的吗？

无论如何，我认为你想要两者 - 一个模板，你可以传递任何数量的字段和标题/字段名称的JSON。以下模板执行此操作：

email

脚本：

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

这将使 JSON与 {/ 1>}表单上的任意数量的字段一起使用，并将其转换为带有字段的dataTable将标题命名为标题，将字段对象命名为数

如果你的JSON在表格上

$.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 }); });

然后只需将{ 'data' : [...] }引用重命名为{ "agents": [ { "agentId": 70, ... }, ... ];

data

如果您的JSON是普通数组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 }); });引用：

[{ ... }, { ... }]

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

1 个答案: