Javascript 如何使用带有以下数据的DataTable呈现表？_Javascript_Jquery_Datatable

Javascript 如何使用带有以下数据的DataTable呈现表？

javascript jquery

Javascript 如何使用带有以下数据的DataTable呈现表？,javascript,jquery,datatable,Javascript,Jquery,Datatable,我想要的输出：应该有表分页，即第1页应该包含数据[0]的数据，第2页包含数据[1]等。列值仅为属性和值 var data = [ { "Area": "Plant", "Equipment": "E-312A", "PermitNo": 4321.0, "PermitType": "Hot Work", "Section": "A" }, { "Area": "pipe",

我想要的输出：应该有表分页，即第1页应该包含数据[0]的数据，第2页包含数据[1]等。列值仅为属性和值

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

请尝试以下数据表代码：

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

到目前为止，您尝试了什么？$（表）.DataTable（{bSort:false，aoColumns:[{sWidth:“45%”，{sWidth:“45%”，}]，“scrollY:“200px”，“scrollCollapse:”true，“info:”true，“paging:”true}）；。此外，我正在为答案生成表dynamicallyThanks，但是，我不希望列的标题成为键。请查看我想要的输出，其中“属性”列应该由键组成，“值”应该由valuesHi@receiver组成，我刚刚更新了我的答案，请再试一次。太好了！！。。。再次感谢@Pramod

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

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


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