Data is not populated in data table with array objects, getting blank screen

Data is not populated because columns header is case sensitive and must equal to given data.

I fix your data and columns header. Now it’s work and show your data on DataTable.

var storedJsonData = [{
    "id": "1",
    "name": "abc",
    "position": "Accountant",
    "office": "Tokyo",
    "Age": "63",
    "start_date": "2011/07/25",
    "salary": "$170,750",
    "extn": "2"
  },
  {
    "id": "2",
    "name": "def",
    "position": "Accountant",
    "office": "Tokyo",
    "Age": "63",
    "start_date": "2011/07/25",
    "salary": "$170,750",
    "extn": "2"
  }
];

$('#example3').DataTable({
  data: storedJsonData,
  "columns": [{
      "data": "id"
    },
    {
      "data": "name"
    },
    {
      "data": "position"
    },
    {
      "data": "salary"
    },
    {
      "data": "start_date"
    },
    {
      "data": "office"
    },
    {
      "data": "extn"
    }
  ]
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example3" class="display" style="width:100%">

</table>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top