I need to create a datatable with a JSON web URL in a javascript code
I need to create a datatable with a JSON web URL in a javascript code
juansow
Posts: 6Questions: 3Answers: 0
Hi, i was searching in the web but i dont find a reason why it cant be showed data in the datatable, i have a JSON (http://jsonplaceholder.typicode.com/posts) web URL and i need to show that in a datatable format, the code is in javacript , please help
thanks.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<title>Prueba datatable</title>
<script>
$(document).ready(function(){
var data = $.getJSON( "http://jsonplaceholder.typicode.com/posts", function( data ) {
console.log(data);
});
$('#data-table').DataTable({
"ajax" : "data",
columns : [
{ "data" : "userId"},
{ "data" : "id"},
{ "data" : "title"},
{ "data" : "body"}
]
});
});
</script>
</head>
<body>
<table id="data-table" class="table table-bordered" width="100%">
<thead>
<tr>
<th>userId</th>
<th>id</th>
<th>title</th>
<th>body</th>
</tr>
</thead>
</table>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Since you are using the ajax request outside of Datatables you would use
datainstead ofajax. Replace"ajax" : "data",with"data" : "data",. Or you could use theajaxand provide the URL along with-optopin ajax.dataSrc, something like this:Kevin
thanks, you r right, i change the
"ajax" : "data"for"data" : "data"and put the request inside the datatable.thanks a lot.