jquery - 从 DataTable 内的 json 数组填充表头标签

Question

我创建了一个 json 数组，用于填充数据表。在此数组中，为标签名称定义了键，该名称必须放置在表格的 thead 内，并且内容必须放置在 tbody 内。

我的 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",
    }]
}

如何使用 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>

我尝试按如下方式执行此操作，但出现以下错误:未捕获类型错误:无法使用“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});

Answer 1

您可以通过以下方式进行:

• 使用 columns.title
• 使用 columnDefs

<小时/>

使用 columns.title

$(document).ready(function() {

  // data that you want to show in the table,
  // you can get this data from the 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>

<小时/>

使用 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>