【发布时间】：2018-03-06 00:25:06
【问题描述】：
我正在开发一个 Java Web 应用程序（Spring Frame 工作）。一旦命中某个 URL，就会创建一个 Json 对象。我可以访问这些数据，并且能够对其进行控制台记录。但我需要以表格格式显示这个 Json 对象，它是一个包含 1000 多条记录的数组。我不确定如何去做。我已经使用本教程（https://datatables.net/examples/ajax/null_data_source.html）做了一些事情，但我没有成功。我对这个概念很陌生，我的问题可能真的很垃圾。但我想知道也许我可以从这里得到一些帮助。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="resource/css/jquery.dataTables.min.css"></link>
</h:head>
<h:body>
<button id="processData">ProcessData</button>
<div id="wrapper">
<div id="header">
<h2>List of processed data</h2>
</div>
</div>
<table id="dataTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID1</th>
<th>ID2</th>
<th>Number Of Matching Terms</th>
<th>Matching Terms </th>
<th>Original Terms in Data Source One</th>
<th>Original Terms in Data Source Two</th>
<th>Acceptance Action</th>
<th>Decline Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID1</th>
<th>ID2</th>
<th>Number Of Matching Terms</th>
<th>Matching Terms </th>
<th>Original Terms in Data Source One</th>
<th>Original Terms in Data Source Two</th>
<th>Acceptance Action</th>
<th>Decline Action</th>
</tr>
</tfoot>
</table>
<script src="js/mainJs.js"></script>
</h:body>
这是我的js代码：
$(document).ready(function(){
$("#processData").click(function (){
$.getJSON('http://localhost:8080/gtlc/PVJson', function(data){
console.log(data);
});
var table = $('#dataTable').DataTable( {
"ajax": data,
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Click!</button>"
} ]
});
})
});
</html>
当我查看控制台时，我可以看到以下内容：
这是我的 json 对象的一个小样本
"records": [{
"id1": 1200314690100003429,
"id2": 1045,
"matchingTerms": ["adaptor"],
"orginalTermsTable1": ["AC ADAPTOR FOR JDE", "www.greenlightcorp.net", "AC ADAPTOR FOR JDE", ""],
"orginalTermsTable2": ["Greenlight Technologies, Inc.", "GRC Adaptor for People Soft", "Customized software for SAP, therefore version not specified"]
}, {
"id1": 1200314690100003429,
"id2": 1046,
"matchingTerms": ["adaptor"],
"orginalTermsTable1": ["AC ADAPTOR FOR JDE", "www.greenlightcorp.net", "AC ADAPTOR FOR JDE", ""],
"orginalTermsTable2": ["Greenlight Technologies, Inc.", "GRC Adaptor for Oracle", "Customized software for SAP, therefore version not specified"]
}]
我想知道是否有人可以给我一些提示，告诉我如何获取 json 对象并在 dataTable 上表示它
【问题讨论】：
-
您可能需要立即将
var table = ...和该块的其余部分移到您的console.log 之后，即，删除console.log 之后的});。它认为数据表找不到data，因为它位于不同的代码块中。 (?) 错误是第 16 行，但那是哪一行？ -
@Wass，谢谢你的提示。它不会向我抛出之前的错误，但它也不会显示表中的数据。它提示我这个警告：DataTables 警告：表 id=dataTable - 无效的 JSON 响应。有关此错误的更多信息，请参阅datatables.net/tn/1
-
@user1836957，如果这些问题和您过去的其他问题对您有所帮助，请考虑接受对这些问题的回答，以表达您对这些回答的感谢并将问题标记为已回答。
标签： javascript jquery json datatables