我试图在我的应用程序中添加DataTable。 https://datatables.net/ 我有一个WebPage,其中数据表显示在onclick事件上,当系统触发onclick事件ajax调用get,数据将来自Java servlet。下面是我的代码
JSP:
<table id="testTable" class="display" cellspacing="0"
width="100%" cellpadding="0" border="0">
<thead>
<tr>
<th>Test</th>
<th>Description</th>
<th>Result</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
</table>
JQuery的:
function getTestData(name, e, bId) {
$('#testTable').dataTable( {
"serverSide": true,
"processing": true,
"ajax":{
"type" : "POST",
"dataSrc": "data",
"url" : "Servlet",
"dataType": "json",
"data" : {
name : name,
e : e,
bId : bId,
method : "getTestData"
},
"sEcho": 0,
"processing": true,
"columns":[
{ "data": "tId" },
{ "data": "description" },
{ "data": "rst" },
{ "data": "startDate" },
{ "data": "endDate" }
]
}
} );
}
Servlet在JSON下面返回:
{
"data": [
{
"tId": "1",
"description": "desc",
"rst": "P",
"startDate": "2016-09-13 07:59:31.0",
"endDate": "2016-09-13 07:59:51.0"
},
{
"tId": "2",
"description": "desc",
"rst": "S",
"startDate": "2016-09-13 07:59:51.0",
"endDate": "2016-09-13 07:59:51.0"
}
]
}
我收到以下错误:
DataTables warning: table id=testTable - Requested unknown parameter '0' for row 0, column 0.
我知道错误的原因,但不确定我在上面的代码中做错了什么,我想在jquery代码中有问题。请帮忙。
提前致谢
答案 0 :(得分:0)
JSON应采用以下格式
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
[
"Airi",
"Satou",
"Accountant",
"Tokyo",
"28th Nov 08",
"$162,700"
],
[
"Angelica",
"Ramos",
"Chief Executive Officer (CEO)",
"London",
"9th Oct 09",
"$1,200,000"
]
]
}
https://datatables.net/examples/data_sources/server_side.html
答案 1 :(得分:0)
更改初始化代码以匹配您的JSON数据格式,如下所示。
$('#testTable').dataTable({
"ajax": {
"type": "POST",
"url": "Servlet"
},
"columns": [
{ "data": "tId" },
{ "data": "description"},
{ "data": "rst" },
{ "data": "startDate" },
{ "data": "endDate"}
]
});
请参阅this jsFiddle以获取代码和演示。
答案 2 :(得分:0)
初始化数据表的方式不正确,可以通过不同的方式查看here。
@ Gyrocode.com的回答可以从你可能正在努力的事情中找到答案。 我只是给你一个答案,我想也许可以考虑获取数据并将其传递给你的数据表
$.getJSON("http://example/servlet_data.json", function(fromServer) {
$('#testTable').DataTable( {
data: fromServer.data,
columns: [
{ data: "tId" },
{ data: "description"},
{ data: "rst"},
{ data: "startDate"},
{ data: "endDate"}
]
} );
}).fail(function(){
alert("Error occurred getting data from the server");
})
快乐编码