datatable load from json object directly
datatable load from json object directly
SummerJ1745
Posts: 9Questions: 3Answers: 0
Hi, I have following code, which I want to load the table from a json object directly.
what is the right syntax?
I tried "ajax": JSON.stringify(jsonObject), and data: jsonObject,. neither worked. Any suggestion?
Thx!
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css'>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<!--script src="../libs/jquery/jquery-1.11.2.min.js"></script>
<script src="../libs/jquery/jquery.dataTables.js"></script-->
<!--script src='../libs/css/jquery.dataTables.css'></script-->
<script type="text/javascript" src="https://www.datatables.net/media/js/site.js?_=9831ea28f2ee98e525c11ef017a71afa"></script>
<script type="text/javascript" src="https://www.datatables.net/media/js/dynamic.php?comments-page=examples%2Fdata_sources%2Fajax.html" async=""></script>
<script type="text/javascript" src="https://www.datatables.net/examples/resources/demo.js" async=""></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
<style type="text/css" class="init">
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
div.container {
min-width: 980px;
margin: 0 auto;
}
div.dataTables_processing { z-index: 1; }
</style>
<script type="text/javascript" class="init">
$(document).ready( function () {
var jsonObject = {
"data": [
{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25"
},
"contact": [
"Edinburgh",
"5421"
]
},
{
"name": "Garrett Winters",
"hr": {
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25"
},
"contact": [
"Tokyo",
"8422"
]
}]};
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"ajax": JSON.stringify(jsonObject),
"columns": [
{ "data": "name" },
{ "data": "hr.position" },
{ "data": "contact.0" },
{ "data": "contact.1" },
{ "data": "hr.start_date" },
{ "data": "hr.salary" }
]
} );
} );
} );
</script>
</head>
<body>
<button id="reload">Reload</button>
<div class="container">
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
This discussion has been closed.
Answers
I tried to use
"aaData": jsonObject,"aoColumns": [{ "data": "name" },{ "data": "hr.position" },{ "data": "contact.0" },{ "data": "contact.1" },{ "data": "hr.start_date" },{ "data": "hr.salary" }]it showed no data available.