Unable to get Datatables to work with simple JSON data
Question
I'm pretty new to frontend and am trying to convert a JSON call to table format. I read that datatables is the way to go. But I am unable to get this working. Please help. This is my json get call.
GET /api/v1/get
{"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"}
This is my html code from index.html. I'm powering this using flask.
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title></title>
<link rel="stylesheet" type="text/css" href=
"https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css" />
<link rel="stylesheet" type="text/css" href=
"https://cdn.datatables.net/1.10.20/css/dataTables.material.min.css" />
<link rel="stylesheet" type="text/css" href=
"https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
</head>
<body>
<table id="table4">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
<th>start_date</th>
<th>office</th>
<th>extn</th>
</tr>
</thead>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type=
"text/javascript">
</script><script type="text/javascript" language="javascript" src=
"https://code.jquery.com/jquery-3.3.1.js">
</script><script type="text/javascript" language="javascript" src=
"https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
</script><script type="text/javascript" language="javascript" src=
"https://cdn.datatables.net/1.10.20/js/dataTables.material.min.js">
</script><script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('#table4').DataTable( {
ajax: {
url: '/api/v1/getec2',
dataSrc: ''
},
columns: [
{ "data": "name" },
{ "data": "position" },
{ "data": "salary" },
{ "data": "start_date" },
{ "data": "office" },
{ "data": "extn" }
]
} );
} );
//]]>
</script>
</body>
</html>
Please let me know if I need to add anything else.
2 answers
solution1
0 2019-10-27 05:53:20
You could just append everything manually and then call the DataTable() method alone, the code would be like this:
$(document).ready(function() {
var json;
$.get("/api/v1/getec2", function(data) {
json=JSON.parse(data);
});
$('#table4').append('<tbody><tr><td>'+json.name
+'</td><td>'+json.position
+'</td><td>'+json.salary
+'</td><td>'+json.start_date
+'</td><td>'+json.office
+'</td><td>'+json.extn
+'</td></tr></tbody>');
$('#table4').DataTable();
});
Note that if the API is gonna return an array with multiple objects like that you would need to wrap the appending part in a for loop that iterates through the array, the code would be different, like this:
$(document).ready(function() {
var json;
$.get("/api/v1/getec2", function(data) {
json=JSON.parse(data);
});
var s='<tbody>';
for(i in json){
var obj=json[i];
s+='<tr><td>'+obj.name
+'</td><td>'+obj.position
+'</td><td>'+obj.salary
+'</td><td>'+obj.start_date
+'</td><td>'+obj.office
+'</td><td>'+obj.extn
+'</td></tr>';
}
s+='</tbody>';
$('#table4').append(s);
$('#table4').DataTable();
});
solution2
0 2019-10-27 06:24:25
Assuming the data coming from an api is actually list of objects:
//some api call function fetchData() { return Promise.resolve([ {"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"}, {"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"}, {"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"} ]) } //since not clear //actual api call could have been something like //function fetchData() { // return fetch('/api/v1/get'); //} fetchData().then(data => { $('#someTable').DataTable( { data: data, columns: [ { "data": "name" }, { "data": "position" }, { "data": "salary" }, { "data": "start_date" }, { "data": "office" }, { "data": "extn" } ] } ); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type= "text/javascript"> </script><script type="text/javascript" language="javascript" src= "https://code.jquery.com/jquery-3.3.1.js"> </script> <script type="text/javascript" language="javascript" src= "https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"> </script> <table id="someTable" width="100%"></table>
if you later want to refresh, check out this post: How to reload/refresh jQuery dataTable?
references: https://datatables.net/examples/data_sources/js_array.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.