First time user of Datatables.
First time user of Datatables.
Rainbird
Posts: 2Questions: 1Answers: 0
I have a question about using datatables. This is my first time so I could be doing something wrong. I am pulling some json data and parsing it out to use a couple of the fields. I am writing out the html and then applying the datatables css to it. The table gets a line on top but no sort, no search and no colors. Any idea what I am doing wrong?
--ja
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON('http://services.pca.state.mn.us/api/v1/surfacewater/projects?format=jsonp&nullValue=&huc8=07010206&callback=?', function(response){
var output = "<thead>";
output+='<tr><th>Project Name</th><th>Project ID</th><th>Current Status</th><th>Status Started</th><th>Target End</th><th>Impairments</th></tr>';
output+="</thead>";
console.log(response);
for (var i in response.data) {
output+="<tr><td>" + response.data[i].prjName + "</td><td>" + response.data[i].prjId +"</td><td>" + response.data[i].generalStatusCategory + "</td><td>" + response.data[i].statusDate + "</td><td>" + response.data[i].targetEndYear + "</td><td>" + response.data[i].impairmentCount + "</td></tr>";
}
document.getElementById("datatable").innerHTML=output;
output+="</table>";
});
$('#datatable').dataTable();
});
</script>
</head>
<body>
<div style="width:80%;">
<table id="datatable"></table>
</div>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I think I have the code sharable at: http://live.datatables.net/qivozoja/1/ or here for the editable: http://live.datatables.net/qivozoja/1/watch?html,css,js,output
You are invoking that dataTable call before your Ajax call completes (A = Asynchronous). Move that dataTables line to be inside your getJSON(), after this line:
So it should look like this