Problems trying to fill my datatable from my own API
Problems trying to fill my datatable from my own API
Sareth
Posts: 6Questions: 2Answers: 0
Hello, I'm having troubles with getting data from my api to display in a datatable.
Any help would be greatly appreciated !
The error :
DataTables warning: table id=example - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
My HTML code from localhost:3001 :
<html>
<head>
<title> Application WEB </title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<div class="container">
<h2> Liste client </h2>
</br></br>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>IDC</th>
<th>Nom</th>
<th>Prenom</th>
<th>DateNaiss</th>
<th>Adresse</th>
<th>DatePermis</th>
</tr>
</thead>
<tfoot>
<tr>
<th>IDC</th>
<th>Nom</th>
<th>Prenom</th>
<th>DateNaiss</th>
<th>Adresse</th>
<th>DatePermis</th>
</tr>
</tfoot>
</table>
</div>
<script>
$('#example').dataTable( {
"ajax": {
"url": "http://localhost:3000/client"
}
} );
</script>
</body>
</html>
The JSON from localhost:3000/client :
{
"error": false,
"data": [
{
"IDC": 1,
"Nom": "Dupond",
"Prenom": "Jean",
"DateNaiss": "01/01/1980",
"Adresse": "1 Place de la République Marseille",
"DatePermis": "01/01/2000"
},
{
"IDC": 2,
"Nom": "Pignon",
"Prenom": "Francois",
"DateNaiss": "20/04/1996",
"Adresse": "2 Place de la République Marseille",
"DatePermis": "01/01/2017"
},
{
"IDC": 3,
"Nom": "Leblanc",
"Prenom": "Juste",
"DateNaiss": "01/01/1996",
"Adresse": "3 Place de la République Marseille",
"DatePermis": "01/01/2019"
}
],
"message": "Liste clients"
}
When I use the browser's debug tools and go to Network I see "http://localhost:3000/client?_=1574354816981" in the sources where it should be "http://localhost:3000/client".
I used the debugger but it found nothing with the tests. It did find there is 3 rows to display though so it can kinda see the data
Here is the upload from the debugger
https://debug.datatables.net/eleruq
I'm using Nodejs for both the Webpages and the API.
It's maybe something dumb, but I'm stuck and can't see it.
Or maybe it's something about CORS ? I add to use this pluggin to access my data https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc
This question has an accepted answers - jump to answer
Answers
Since you are returning objects you need to use
columns.datato define the columns. More info can be found here:https://datatables.net/manual/data/#Data-source-types
This a method used by jQuery Ajax to manage the browser's cache. Look at the
cacheoption in the docs for more info.Kevin
Thanks you ! I didn't saw your answer