从DataTable内部的json数组中填充表头标签

I've created a json array that I used to fill a DataTable. In this array the key is defined for the label name that's must be placed inside the thead of my table and the content must be placed inside the tbody.

我创建了一个json数组，用于填充一个DataTable。在这个数组中，键为标签名定义，标签名必须放在表的thead中，内容必须放在tbody中。

My json array looks like this:

我的json数组如下所示:

{
    "Content": [{
        "labelname1": "some content",
        "labelname2": "some content",
        "labelname3": "some content",
        "labelname4": "some content",
    }, {
        "labelname1": "some content",
        "labelname2": "some content",
        "labelname3": "some content",
        "labelname4": "some content",
    }]
}

How can I convert this array by using the DataTable library to a table like below?

如何通过使用DataTable库将这个数组转换为如下所示的表?

<table id="example" class="display">
    <thead>
        <tr>
            <th>labelname1</th>
            <th>labelname2</th>
            <th>labelname3</th>
            <th>labelname4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>some content</td>
            <td>some content</td>
            <td>some content</td>
            <td>some content</td>
        </tr> 
        <tr>
            <td>some content</td>
            <td>some content</td>
            <td>some content</td>
            <td>some content</td>
        </tr>
    </tbody>
</table>

I've tried to do this like below but I get the following error: Uncaught TypeError: Cannot use 'in' operator to search for '3' in naam.

我试过像下面这样做，但是我得到了以下错误:未捕获的类型错误:不能使用“in”操作符在naam中搜索“3”。

// map the json array to an array with only values
var content = $.map(jsonArray, function(value, index) {
     return [$.map(value, function(val, pos) { return [val] })];
});

// map the json array to an array with unique keys
var labels = $.unique($.map(jsonArray, function(value, index) {
     // map all keys
     return $.map(value, function (val, pos) {return [pos]});
}));

$('table').DataTable({ "columns": labels,"data": content});

1 个解决方案

#1

You can do by following ways :

你可以通过以下方式做到:

• Using columns.title
• 使用columns.title
• Using columnDefs
• 使用columnDefs

---

Using columns.title

$(document).ready(function() {

  // data that you want to show in table,
  // you can get this data from server also
  var json_data = {

      "Content": [{
          "labelname1": "some content",
          "labelname2": "some content",
          "labelname3": "some content",
          "labelname4": "some content",
        },
        {
          "labelname1": "some content",
          "labelname2": "some content",
          "labelname3": "some content",
          "labelname4": "some content",
        }
      ]
    },
    columns_title = [];
  
  /*
   Get the first element of the Content array and iterate over it to get all the 
   keys and push object having data and title into the columns_title
  */
  $.each(json_data.Content[0], function(key) {
    columns_title.push({
      "data": key,
      "title": key
    });
  });

  $('#table').dataTable({
    "data": json_data.Content,
    "columns": columns_title
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<table id="table">

</table>

---

Using columnDefs

$(document).ready(function() {

  // data that you want to show in table,
  // you can get this data from server also
  var json_data = {

      "Content": [{
          "labelname1": "some content",
          "labelname2": "some content",
          "labelname3": "some content",
          "labelname4": "some content",
        },
        {
          "labelname1": "some content",
          "labelname2": "some content",
          "labelname3": "some content",
          "labelname4": "some content",
        }
      ]
    },
    column_defs = [],
    count = 0;

  /*
       columnDefs requires a targets property to be set in each definition 
       object (columnDefs.targets). This targets property tells DataTables which 
       column(s) the definition should be applied to.
       It can be:
           * 0 or a positive integer - column index counting from the left
           * A negative integer - column index counting from the right
           * A string - class name will be matched on the TH for the column
           * The string _all - all columns (i.e. assign a default)
      */
  $.each(json_data.Content[0], function(key) {
    column_defs.push({
      "targets": count++,
      "title": key
    });
  });


  // initializing datatable
  $('#table').dataTable({
    "data": json_data.Content,
    "columnDefs": column_defs,
    "columns": [{
        "data": "labelname1"
      },
      {
        "data": "labelname2"
      },
      {
        "data": "labelname3"
      },
      {
        "data": "labelname4"
      }
    ]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<table id="table">

</table>