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

问题

Im searching for a way to set tables titles dynamically. there's a search form that performs database queries, and gets a different data-set each time, according to user choice.

right now titles are hard-coded in the html.

this is how I set up the 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" }
      ]
  });
});

sample data:

[{
  "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"
}]

I'd like to set tfoot, thead, according to the data I get from the server, so I only have one template for many situations

回答1:

Well. Your question does not make completely sense. If you can hardcode columns, why cant you hardcode the titles? I mean, if the email field is static, then the title email would be static too?

Anyway, I think you wants both - a template where you can pass any JSON with any number of fields and titles / field names. The following template does that :

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

script :

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

This will take any JSON with any number of fields on the form { 'data' : [...] } and make it to a dataTable with field names as titles and field objects as data.

If your JSON is on the form

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

then simply rename the data references to 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
    });
});

if your JSON is a plain array [{ ... }, { ... }] then skip the data reference completely :

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

来源：https://stackoverflow.com/questions/30476323/dynamically-set-table-titles-with-jquerys-datatables-plugin-get-titles-from-d