无法在数据 table 上看到数据 -DataTables 警告：table id=tableData
Can't see a data on datatable -DataTables warning: table id=tableData
您可能觉得这个问题可能重复，但是 none questions/solutions 解决了我的问题，
1) 我正在使用 liferay 6.2 和 serverResource 方法从服务器获取数据并在数据 table 插件上填充数据并从客户端进行 AUI ajax 调用。
2) 我确实提醒接收到的 GSON 对象，一切看起来都正常，但我看不到数据 table 上的数据，并且该对象符合文档，但在控制台上也出现 404 错误。
请参考view.jsp和function getFormDataFromServer()
<%@page import="com.liferay.portal.kernel.search.Document"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<%@page import="javax.portlet.ResourceURL"%>
<%@page import="javax.portlet.*" %>
<portlet:defineObjects />
<portlet:resourceURL var="serveResource">
</portlet:resourceURL>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<head>
<!--links for this page -->
<%--<link href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/js/bootstrap.js" type="text/javascript"></script>--%>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/dataTables.bootstrap.min.css"></link>
<script src="<%=request.getContextPath()%>/js/jQuery.js" type="text/javascript"></script>
<%-- <script src="<%=request.getContextPath()%>/js/dataTables.bootstrap.min.js" type="text/javascript"></script> --%>
<script src="<%=request.getContextPath()%>/js/jquery.dataTables.min.js" type="text/javascript"></script>
</head>
<%-- <p>string from server=${initial_value}</p> --%>
<button class="btn btn-success btn-md" id="getTableData" onclick="getFormDataFromServer()" >View Data</button>
<div id="tableDiv" style="margin-top:10px;margin-left:10px"></div>
<div id="divForm">
<form id="taskform">
<div class="form-group">
<label>Enter the details of a task</label>
<label for="task">Name:</label>
<input type="text" class="form-control" name="<portlet:namespace/>task"/>
<label for="desc">description:</label>
<input type="text" class="form-control" name="<portlet:namespace/>desc"/>
<label for="user">User:</label>
<input type="text" class="form-control" name="<portlet:namespace/>user"/>
<label for="startdate">Start Date:</label>
<input type="date" class="form-control" name="<portlet:namespace/>startdate"/>
<label for="enddate">End Date:</label>
<input type="date" class="form-control" name="<portlet:namespace/>enddate"/>
<button class="btn btn-primary btn-md" onclick="sendFormData()" id="btnSubmit">Submit</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
//$('#getTableData').click(getFormDataFromServer());
});
function sendFormData()
{
//var formdata_jSonObj=JSON.stringify($('#taskform').serializeArray());
AUI().use('aui-io-request',function(A)
{
A.io.request('${serveResource}',
{
method:'post',
data:{'<portlet:namespace/>action':'formdata'},
form:{
id:'taskform'
},
on:{
success:function()
{
alert(this.get('responseData'));
},
failure:function()
{
alert("error in ajax");
}
}
});
}
);
}
function getFormDataFromServer()
{
console.log("-------------------------------getFormDataFromServer method is called");
var table="<table id='tableData' class='display table table-striped table-border' style:'width:100%'>";
table+="<thead><tr>";
table+="<th>Id</th>";
table+="<th>Name</th>";
table+="<th>start date</th>";
table+="<th>end date</th>";
table+="<th>created on</th>";
table+="<th>description</th>";
table+="<th>created by</th>";
table+="</tr></thead></table>";
$('#tableDiv').html(table);
AUI().use('aui-io-request',function(A){
A.io.request('${serveResource}',
{
method:'get',
data:{'<portlet:namespace/>action':'getTableData'},
on:{
success:function()
{
//alert(this.get('responseData'));
var data=this.get('responseData');
console.log(data);
//var tempdata=[{"id":"1","name":"tiger nixon","start_date":"23/4/2019","end_date":"23/4/2019","created_on":"23/4/2019","description":"thippu","created_by":"23/4/2019"}];
var obj={"ajax":data,"columns":[{"data":"id"},{"data":"name"},{"data":"start_date"},{"data":"end_date"},{"data":"created_on"},{"data":"description"},{"data":"user"}]};
//var obj={"ajax":data,"columns":[{data:'id'},{data:'name'},{data:'start_date'},{data:'end_date'},{data:'created_on'},{data:'description'},{data:'user'}]};
$("#tableData").DataTable(obj);
},
failure:function()
{
alert("ajax failure: cannot able to get the data from server, something went wrong");
}
}
});
});
}
</script>
如何解决此 error:DataTables 警告：table id=tableData - Ajax 错误。有关此错误的详细信息，请参阅 http://datatables.net/tn/7
这是文档：link
我看不出有什么问题，帮我找到它。
GSON 对象数据：
[{"name":"testtaskname","description":"estst","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":1},{"name":"testtaskname","description":"sdf","user":"sdf","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":2},{"name":"testtaskname","description":"fs","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":3},{"name":"testtaskname","description":"df","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":4},{"name":"add task","description":"updating the database","user":"thippu","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":5},{"name":"creating the datatable","description":"using bootstrap\u0027s","user":"thippu","start_date":"0032-11-06","end_date":"0033-11-07","created_on":"2019-05-28","id":6},{"name":"task10","description":"check","user":"thippu","start_date":"0032-11-06","end_date":"0033-11-07","created_on":"2019-05-28","id":7},{"name":"task11","description":"check","user":"thippu","start_date":"2019-05-27","end_date":"2019-05-28","created_on":"2019-05-28","id":8},{"name":"task12","description":"check","user":"thippu","start_date":"2019-05-27","end_date":"2019-05-28","created_on":"2019-05-28","id":9},{"name":"task13","description":"check","user":"thippu","start_date":"2019-03-13","end_date":"2019-05-17","created_on":"2019-05-28","id":10},{"name":"creating the datatable","description":"updating the database","user":"testuser","start_date":"2019-06-18","end_date":"2019-06-21","created_on":"2019-06-01","id":11},{"name":"abc task","description":"checking the servlet","user":"user","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":12},{"name":"task demo","description":"description of task is checking the code is reaching or not to server","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":13},{"name":"task demo2","description":"checking the action value","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":14},{"name":"task demo","description":"checking the data","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":15},{"name":"task demo","description":"ggj","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":16},{"name":"demo project","description":"description","user":"thippu","start_date":"2019-06-03","end_date":"2019-06-03","created_on":"2019-06-03","id":17}]
我将一些代码更改为 jquery 部分并且运行良好，
以下是解决方案：
在 function getFormDataFromServer()
success 方法更改为：
{
var tbldata=this.get('responseData');
tbldata=JSON.parse(tbldata);
console.log(tbldata);
var obj={"data":tbldata,"columns":[{"data":"id"},{"data":"name"},{"data":"start_date"},{"data":"end_date"},{"data":"created_on"},{"data":"description"},{"data":"user"}]};
$("#tableData").DataTable(obj);
},
您可能觉得这个问题可能重复，但是 none questions/solutions 解决了我的问题，
1) 我正在使用 liferay 6.2 和 serverResource 方法从服务器获取数据并在数据 table 插件上填充数据并从客户端进行 AUI ajax 调用。
2) 我确实提醒接收到的 GSON 对象，一切看起来都正常，但我看不到数据 table 上的数据，并且该对象符合文档，但在控制台上也出现 404 错误。
请参考view.jsp和function getFormDataFromServer()
<%@page import="com.liferay.portal.kernel.search.Document"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
<%@page import="javax.portlet.ResourceURL"%>
<%@page import="javax.portlet.*" %>
<portlet:defineObjects />
<portlet:resourceURL var="serveResource">
</portlet:resourceURL>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<head>
<!--links for this page -->
<%--<link href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/js/bootstrap.js" type="text/javascript"></script>--%>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/dataTables.bootstrap.min.css"></link>
<script src="<%=request.getContextPath()%>/js/jQuery.js" type="text/javascript"></script>
<%-- <script src="<%=request.getContextPath()%>/js/dataTables.bootstrap.min.js" type="text/javascript"></script> --%>
<script src="<%=request.getContextPath()%>/js/jquery.dataTables.min.js" type="text/javascript"></script>
</head>
<%-- <p>string from server=${initial_value}</p> --%>
<button class="btn btn-success btn-md" id="getTableData" onclick="getFormDataFromServer()" >View Data</button>
<div id="tableDiv" style="margin-top:10px;margin-left:10px"></div>
<div id="divForm">
<form id="taskform">
<div class="form-group">
<label>Enter the details of a task</label>
<label for="task">Name:</label>
<input type="text" class="form-control" name="<portlet:namespace/>task"/>
<label for="desc">description:</label>
<input type="text" class="form-control" name="<portlet:namespace/>desc"/>
<label for="user">User:</label>
<input type="text" class="form-control" name="<portlet:namespace/>user"/>
<label for="startdate">Start Date:</label>
<input type="date" class="form-control" name="<portlet:namespace/>startdate"/>
<label for="enddate">End Date:</label>
<input type="date" class="form-control" name="<portlet:namespace/>enddate"/>
<button class="btn btn-primary btn-md" onclick="sendFormData()" id="btnSubmit">Submit</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
//$('#getTableData').click(getFormDataFromServer());
});
function sendFormData()
{
//var formdata_jSonObj=JSON.stringify($('#taskform').serializeArray());
AUI().use('aui-io-request',function(A)
{
A.io.request('${serveResource}',
{
method:'post',
data:{'<portlet:namespace/>action':'formdata'},
form:{
id:'taskform'
},
on:{
success:function()
{
alert(this.get('responseData'));
},
failure:function()
{
alert("error in ajax");
}
}
});
}
);
}
function getFormDataFromServer()
{
console.log("-------------------------------getFormDataFromServer method is called");
var table="<table id='tableData' class='display table table-striped table-border' style:'width:100%'>";
table+="<thead><tr>";
table+="<th>Id</th>";
table+="<th>Name</th>";
table+="<th>start date</th>";
table+="<th>end date</th>";
table+="<th>created on</th>";
table+="<th>description</th>";
table+="<th>created by</th>";
table+="</tr></thead></table>";
$('#tableDiv').html(table);
AUI().use('aui-io-request',function(A){
A.io.request('${serveResource}',
{
method:'get',
data:{'<portlet:namespace/>action':'getTableData'},
on:{
success:function()
{
//alert(this.get('responseData'));
var data=this.get('responseData');
console.log(data);
//var tempdata=[{"id":"1","name":"tiger nixon","start_date":"23/4/2019","end_date":"23/4/2019","created_on":"23/4/2019","description":"thippu","created_by":"23/4/2019"}];
var obj={"ajax":data,"columns":[{"data":"id"},{"data":"name"},{"data":"start_date"},{"data":"end_date"},{"data":"created_on"},{"data":"description"},{"data":"user"}]};
//var obj={"ajax":data,"columns":[{data:'id'},{data:'name'},{data:'start_date'},{data:'end_date'},{data:'created_on'},{data:'description'},{data:'user'}]};
$("#tableData").DataTable(obj);
},
failure:function()
{
alert("ajax failure: cannot able to get the data from server, something went wrong");
}
}
});
});
}
</script>
如何解决此 error:DataTables 警告：table id=tableData - Ajax 错误。有关此错误的详细信息，请参阅 http://datatables.net/tn/7
这是文档：link
我看不出有什么问题，帮我找到它。
GSON 对象数据：
[{"name":"testtaskname","description":"estst","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":1},{"name":"testtaskname","description":"sdf","user":"sdf","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":2},{"name":"testtaskname","description":"fs","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":3},{"name":"testtaskname","description":"df","user":"testuser","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":4},{"name":"add task","description":"updating the database","user":"thippu","start_date":"2019-05-28","end_date":"2019-05-28","created_on":"2019-05-28","id":5},{"name":"creating the datatable","description":"using bootstrap\u0027s","user":"thippu","start_date":"0032-11-06","end_date":"0033-11-07","created_on":"2019-05-28","id":6},{"name":"task10","description":"check","user":"thippu","start_date":"0032-11-06","end_date":"0033-11-07","created_on":"2019-05-28","id":7},{"name":"task11","description":"check","user":"thippu","start_date":"2019-05-27","end_date":"2019-05-28","created_on":"2019-05-28","id":8},{"name":"task12","description":"check","user":"thippu","start_date":"2019-05-27","end_date":"2019-05-28","created_on":"2019-05-28","id":9},{"name":"task13","description":"check","user":"thippu","start_date":"2019-03-13","end_date":"2019-05-17","created_on":"2019-05-28","id":10},{"name":"creating the datatable","description":"updating the database","user":"testuser","start_date":"2019-06-18","end_date":"2019-06-21","created_on":"2019-06-01","id":11},{"name":"abc task","description":"checking the servlet","user":"user","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":12},{"name":"task demo","description":"description of task is checking the code is reaching or not to server","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":13},{"name":"task demo2","description":"checking the action value","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":14},{"name":"task demo","description":"checking the data","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":15},{"name":"task demo","description":"ggj","user":"thippu","start_date":"2019-06-01","end_date":"2019-06-01","created_on":"2019-06-01","id":16},{"name":"demo project","description":"description","user":"thippu","start_date":"2019-06-03","end_date":"2019-06-03","created_on":"2019-06-03","id":17}]
我将一些代码更改为 jquery 部分并且运行良好，
以下是解决方案：
在 function getFormDataFromServer()
success 方法更改为：
{
var tbldata=this.get('responseData');
tbldata=JSON.parse(tbldata);
console.log(tbldata);
var obj={"data":tbldata,"columns":[{"data":"id"},{"data":"name"},{"data":"start_date"},{"data":"end_date"},{"data":"created_on"},{"data":"description"},{"data":"user"}]};
$("#tableData").DataTable(obj);
},