如何使用具有以下数据的 DataTable 呈现表格？答案

【问题标题】：How to render the table using DataTable with the following data?如何使用具有以下数据的 DataTable 呈现表格？
【发布时间】：2020-03-11 04:35:31
【问题描述】：

var data = [
    {
        "Area": "Plant",
        "Equipment": "E-312A",
        "PermitNo": 4321.0,
        "PermitType": "Hot Work",
        "Section": "A"
    },
    {
        "Area": "pipe",
        "Equipment": "E-312A",
        "PermitNo": 231.0,
        "PermitType": "Hot Work",
        "Section": "B"
    },
    {
        "Area": "A",
        "Equipment": "P-100A",
        "PermitNo": 45.0,
        "PermitType": "Hot Work",
        "Section": "A"
    }
]

我想要的输出：应该有表格分页，即page1应该包含数据[0]的数据， page2 包含 data[1] 等等。列值只是属性和值。

 Property        value
=====================================
  Area           Plant
  Equipment      E-312A
  PermitNo       4321.0
  PermitType    Hot Work
  Section            A

【问题讨论】：

到目前为止你有什么尝试？
$(table).DataTable({ bSort: false, aoColumns: [{ sWidth: "45%" }, { sWidth: "45%" }], "scrollY": "200px", “scrollCollapse”：真，“信息”：真，“分页”：真}）；。我也在动态生成表格

标签： javascript jquery datatable

【解决方案1】：

请尝试以下数据表代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>

  </body>
  <div id="div1"> 
  <table  cellspacing="0" width="100%"  id="mytable">
        <thead>
           <tr>
           </tr>
        </thead>
        <tbody >

        </tbody>
        </table>
</div>
  <script>
  var data = [
               {
                    "Area": "Plant",
                    "Equipment": "E-312A",
                    "PermitNo": 4321.0,
                    "PermitType": "Hot Work",
                    "Section": "A"
                },
                {
                    "Area": "pipe",
                    "Equipment": "E-312A",
                    "PermitNo": 231.0,
                    "PermitType": "Hot Work",
                    "Section": "B"
                },{
                    "Area": "A",
                    "Equipment": "P-100A",
                    "PermitNo": 45.0,
                    "PermitType": "Hot Work",
                    "Section": "A"
                }

]

$(document).ready( function () {


  var exampleRecord = data[0];
var keys = Object.keys(exampleRecord);


for(var i=0;i<data.length;i++)
{
if(i==0){
$("#mytable thead tr").append('<th>Property</th> <th>Value</th>');
}


for(var j=0; j<keys.length; j++)
{

var keyValue=keys[j];

    var tr="<tr>";
    var td1="<td>"+keyValue+"</td><td>"+data[i][keyValue]+"</td></tr>";


   $("#mytable").append(tr+td1); 
  } 


}


 var table = $('#mytable').DataTable({
  bSort: false,
  "scrollY": "200px",
  "scrollCollapse": true, 
    "info": true, 
    "paging": true,
    "pageLength": keys.length
 });

});


  </script>
</html>

CSS 代码：

 body {
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}


div.container {
  min-width: 980px;
  margin: 0 auto;
}

【讨论】：

感谢您的回答，但是，我不希望列的标题成为键。请查看我想要的输出，其中“属性”列应由键组成，“值”应由值组成
嗨@reciever，我刚刚更新了我的答案，请再试一次。
太棒了！！...再次感谢@Pramod