DataTable and ajax json
HTML
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<table id="table">
<thead>
<tr>
<th>Id</th>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
</table>
JavaScript
var json = [{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25"
},
"contact": {
"city" :"Edinburgh",
"Street":"5421"
}
}]
$("#table").DataTable({
ajax: {
url: "/echo/json/",
method: 'POST',
data: {
json: JSON.stringify(json)
},
dataSrc: ''
},
columns: [{
"data": "name"
},
{
"data": "hr.position"
},
{
"data": "hr.salary"
},
{
"data": "contact.city"
}
],
});