JSON的HTML表SBadmin引导程序_JavaScript

我正在尝试从JSON构建表，但未正确加载数据。 我想在桌子上分页。 我尝试遵循SB Admin Bootstrap的格式，但无法加载任何数据。

我的HTML代码是：-

<div class="dataTable_wrapper">
 <table class="table table-striped table-bordered table-hover" id="agents">
  <thead>
    <tr>
     <th> employeeNumber</th>
     <th> fullName</th>
     <th>employeeEmail</th>
     <th>jobTitle</th>
     <th>deptNo</th>
     <th>deptName</th>
     <th>managerEmail</th>
     <th>managerId</th>
     <th>managerName</th>
     <th>assignmentLastModifiedBy</th>
     <th>assignmentLastModifiedDate</th>
     <th>country</th>
     <th>theatre</th>
     <th>paymentAnalyst</th>
     <th>commDateFrom</th>
    </tr>
   </thead>
  </table>
</div>

我的剧本是：-

<script>
  $(document).ready(function() {
  $('#agents').dataTable( {
  "ajax": 'http://localhost:8080/TestQuartz/json/agent.json'
    } );
    } );
</script>

我的JSON文件是：-

{"agent":[
{"country":"AUS","employeeNumber":"397142","assignmentLastModifiedBy":null,"assignmentLastModifiedDate":null,"paymentAnalyst":"Khoo, T","fullName":"ABC","theatre":"ASIA","managerId":"249058","commDateFrom":"2015-06-15 00:00:00.0","deptName":"Global Virtual Sales - ","managerName":"Turner, J","jobTitle":"VIRTUAL SALES ACCOUNT ","managerEmail":"ert","deptNo":"115331063","employeeEmail":"bre"},
{"country":"DEU","employeeNumber":"196091","assignmentLastModifiedBy":null,"assignmentLastModifiedDate":null,"paymentAnalyst":"Hatlak, T","fullName":"Gros, S","theatre":"EURO","managerId":"52367","commDateFrom":"2006-11-01 00:00:00.0","deptName":"Global Virtual Sales - Germany HQ","managerName":"Mer, W","jobTitle":"TERRITORY BUSINESS MANAGER.III.SALES.XYZ","managerEmail":"wme","deptNo":"515031281","employeeEmail":"sim"},
{"country":"FIN","employeeNumber":"598401","assignmentLastModifiedBy":null,"assignmentLastModifiedDate":null,"paymentAnalyst":"Hatlak, T","fullName":"Kur, Es","theatre":"EURO","managerId":"144218","commDateFrom":"2011-10-01 00:00:00.0","deptName":"EU SS Geo Finland OTHER","managerName":"Lunt, Tha","jobTitle":"CLIENT SERVICES MANAGER.II.SERVICE SALES.XYZ","managerEmail":"tlu","deptNo":"561038082","employeeEmail":"eku"},
{"country":"USA","employeeNumber":"399411","assignmentLastModifiedBy":null,"assignmentLastModifiedDate":null,"paymentAnalyst":"Spaulding, S,"fullName":"Hen, Cr Jo","theatre":"US","managerId":"153592","commDateFrom":"2015-06-22 00:00:00.0","deptName":"Michigan Select","managerName":"Wil, Sc A","jobTitle":"SYSTEMS ENGINEER-C.II.SALES.XYZ","managerEmail":"sco","deptNo":"020230434","employeeEmail":"cra"}
]}

有人可以帮我吗？

问候。

您的数据是从agent对象而不是data对象中data ，因此您需要一个dataSrc 。 另外，不是从数组中获取数据，而是从对象中获取数据，因此需要使用column data选项。

<script>
$(document).ready(function() {
  $('#agents').dataTable( {
     "ajax": 'http://localhost:8080/TestQuartz/json/agent.json',
     "dataSrc": "agent",
     "columns": [
         { "data" : "employeeNumber"},
         { "data" : "fullName" },
         ....
         { "data" : "commDateFrom" }
     ]
  } );
} );
</script>

就样式而言，请记住使用文件。 该CSS替代了标准Datatables CSS-您不需要两者。

JSON的HTML表SBadmin引导程序

问题描述

1楼