时间戳

首页 > 解决方案 > 如何使用具有以下数据的 DataTable 呈现表格？

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

问题描述

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 应该包含 data[0] 的数据，page2 应该包含 data[1] 等等。列值只是属性和值。

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

标签： javascriptjquerydatatable

解决方案

请尝试以下数据表代码：

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

推荐阅读