Unable to show data from Ajax request
Unable to show data from Ajax request
FM2
Posts: 4Questions: 1Answers: 0
Hi, I'm using the server-side processing for create a dynamic DataTable. However I received this error
(DataTables warning: table id=mytable - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4(
My Html is that
<head >
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<h2>Responsive Table with DataTables</h2>
<div class="container">
<div class="row">
<div class="col-xs-12">
<table id="mytable">
<thead>
<tr>
<th>Id</th>
<th>Azienda</th>
<th>Appezzamento</th>
<th>Rilevatore</th>
<th>Rilievio</th>
<th>Caricamento</th>
<th>Azione</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="https://cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.js"></script>
<script src="./script.js"></script>
</body>
This is the response of my rest api
{
"response": {
"code": "200",
"message": "La richiesta e' stata elaborata correttamente.",
"request_type": "post",
"browser": "Unidentified User Agent",
"platform": "Unknown Platform",
"ip": "xx.xx.xx"
},
"data": "{\"draw\":1,\"recordsTotal\":13,\"recordsFiltered\":13,\"data\":[{\"id\":\"198\",\"azienda\":\"Milano\",\"appezzamento\":\"VITE06\",\"rilevatore\":\"Mario Rossi\",\"rilievo\":\"2019-08-22\",\"caricamento\":\"2019-10-14\",\"azione\":\"Vedi"},{\"id\":\"199\",\"azienda\":\"199\",\"appezzamento\":\"VITE06\",\"rilevatore\":\"Mario Rossi\",\"rilievo\":\"2019-08-16\",\"caricamento\":\"2019-10-14\",\"azione\":\"Vedi\"}]}"
}
so my Ajax request is the following:
$('#mytable').DataTable( {
"responsive": true,
"pageLength" : 10,
"processing": true,
"serverSide": true,
"ajax": {
url: '',
type : 'POST',
data:{
keys: '',
from: '',
where: '',
},
"columns": [
{ "data": "id" },
{ "data": "azienda" },
{ "data": "appezzamento" },
{ "data": "rilevatore" },
{ "data": "rilievo" },
{ "data": "caricamento" },
{ "data": "azione" }
],
"dataSrc":function (json){
json_data = JSON.stringify(JSON.parse(json.data))
return json_data;
}
}} );
If I check the data on the console, the response is equal to the demo example. Where am I doing wrong?
any help is appreciated. I also tried to write the answer as a data array, but even in that case it doesn't work.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Do you actually need the function within your dataSrc? You already seem to return json. So as per the doc https://datatables.net/reference/option/ajax.dataSrc it should be sufficient if you specify the string.
Also to me it seems like your actual data is within data, data and not directly in data.
The best place to start would be looking at the diagnostic suggestions in the link provided in the error message. Have you tried that?
Colin
Also changing the
dataSrc: "data"It doesn't work. I read the diagnostic suggestions, but I still not find the error. It seems everything well formattedBut isn't your table data an array within data? So just selecting "data" would not suffice.
The default for
ajax.dataSrcisdata, so that wouldn't be needed. I suspect the problem is those backslashes - this thread here discusses a similar problem so that may help.Colin
I removed the backslashes. But I still have the error
Requested unknown parameter '0' for row 0, column 0.Your
dataresponse is not a valid JSON string. The escape quotes (\") indicate that your server script is JSON encapsulating the data twice. The second time is escaping the"with the backslash.Your Server Side response is not excepted to be inside a
dataobject. Look at the Ajax tab of this Server Side example to see the expected response.One option is to change your rest API to just return the data in the expected structure.
If you can't do that then you are on the right track of using
ajax.dataSrcbut you might need to use thexhrevent instead. In the event you will need to remove the manipulate thejsonparameter to look like the expected response. Essentially you will need to JSON.parse() the data object. I think you will need:json = JSON.parse( JSON.data );in the function.BTW, the
ajax.dataSrcoption is to be placed inside theajaxoption. See the examples in the docs.Kevin
Guys thank you for helping me. I solved in this way.
Firstly I removed all backslashes. Secondly I changed the response of my rest API as follow:
Finally I found a mistake in my request. I have written in the wrong place
"columns".