HTML Table SBadmin Bootstrap 来自 JSON

Question

我正在尝试从 JSON 构建一个 table，但它没有正确加载数据。我想要在 table 中分页。我尝试遵循 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"}
]}

有人可以帮我吗？

此致。

Answer 1

您的数据是从 agent 对象而不是 data 对象中提取的，因此您需要 dataSrc。此外，您不是从数组中获取数据，而是从对象中获取数据，因此您需要使用列 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>

就样式而言，请记住使用 Datatables Bootstrap integration 文件。 CSS 是标准数据表 CSS 的替代品 - 您不需要两者。

HTML Table SBadmin Bootstrap 来自 JSON

HTML Table SBadmin Bootstrap From JSON

html

javascript

json

bootstrapping

datatables