Javascript 在DataTable上表示Json对象数据对我来说不起作用
我正在开发一个JavaWeb应用程序Spring框架。一旦命中某个URL，就会创建一个Json对象。我有权访问此数据，并且能够将其console.log。但是我需要显示这个Json对象，它是一个表格式的超过1000条记录的数组。我不确定的是怎么做。我用这个教程做了一些事情，但没有成功。我对这个概念非常陌生，我的问题可能真的很糟糕。但我想也许我能从这里得到一些帮助Javascript 在DataTable上表示Json对象数据对我来说不起作用,javascript,jquery,json,datatables,Javascript,Jquery,Json,Datatables,我正在开发一个JavaWeb应用程序Spring框架。一旦命中某个URL，就会创建一个Json对象。我有权访问此数据，并且能够将其console.log。但是我需要显示这个Json对象，它是一个表格式的超过1000条记录的数组。我不确定的是怎么做。我用这个教程做了一些事情，但没有成功。我对这个概念非常陌生，我的问题可能真的很糟糕。但我想也许我能从这里得到一些帮助 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.o
<!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>
我想知道是否有人可以给我一些提示，告诉我如何获取json对象并在dataTable上表示它。问题是dataTable在ajax请求后一微秒就被初始化了 发送Ajax请求时，可能需要1、2、3或10秒才能返回数据。。。因此，在Ajax响应返回之前，数据是未定义的 在回调函数中移动DataTable初始化，它应该可以工作 更好的解决方案：
您可能需要移动var table=。。。该块的其余部分紧跟在console.log之后，即删除}；在console.log之后。它认为datatables找不到数据，因为它位于不同的代码块中。错误是第16行，但那是哪一行？@Wass，谢谢你的提示。它不会抛出前面的错误，但也不会在表中显示数据。它提示我以下警告：DataTables警告：table id=dataTable-无效的JSON响应。有关此错误的更多信息，请参阅@ USE1836957，请考虑接受该问题和其他过去问题的答案，如果它们帮助您显示对这些响应的赞赏和标记问题作为回答。类型：数据不是未定义的。数据是未定义的。@ USE1818957数据项在学习时是挑剔的。看起来JSON记录嵌套在名为records的包装器中。DataTables查找以数据开头的JSON。您需要定义与要在此处显示更多信息的数据相对应的dataSrc：如果您可以粘贴JSON的一个小片段，我可以为您创建一个工作示例。@user1836957这里是工作的小提琴：我没有加载CSS，所以它看起来很难看，但它可以工作。最好的解决方案是使用DataTable的内部Ajax函数，而不是将其包装在getJSON函数中。。。像这样：@user1836957这里有一个带有注释的更新：@user1836957在JSON中，matchingTerms是一个数组。表中的列名命名为匹配项数。我只是想根据数组的大小显示一个数字。要获取数组中的元素数，需要使用array.length。。。至于在新创建的按钮上附加事件监听器，我建议您阅读上的jQuery方法。这是一把小提琴：
$(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>
"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"]
}]
$(document).ready(function() {
var data = {
"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"]
}]
};
var table = $('#dataTable').DataTable({
"data": data.records,
"columns": [{
"data": "id1"
},
{
"data": "id2"
},
{
"data": "matchingTerms",
"render": function(data, type, row, meta) {
return data.length;
}
},
{
"data": "matchingTerms"
},
{
"data": "orginalTermsTable1"
},
{
"data": "orginalTermsTable2"
},
{
"data": "",
"render": function(data, type, row, meta) {
return "<button>Click</button>";
}
},
{
"data": "",
"render": function(data, type, row, meta) {
return "<button>Click</button>";
}
}
]
});
});
$(document).ready(function() {
var table = $('#dataTable').DataTable({
"ajax": {
"url" : "http://localhost:8080/gtlc/PVJson",
"dataSrc" : "records"
},
"columns": [{
"data": "id1"
},
{
"data": "id2"
},
{
"data": "matchingTerms",
"render": function(data, type, row, meta) {
return data.length;
}
},
{
"data": "matchingTerms"
},
{
"data": "orginalTermsTable1"
},
{
"data": "orginalTermsTable2"
},
{
"data": "",
"render": function(data, type, row, meta) {
return "<button>Click</button>";
}
},
{
"data": "",
"render": function(data, type, row, meta) {
return "<button>Click</button>";
}
}
]
});
});