CODEWITHSUNDEEP
javascriptjquerydatatable
Rajasekhar
Rajasekhar

Reputation: 2455

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

Data is not populated in data table with array objects, getting blank screen. Tried with below code, any issue pls suggest

$('#example3').DataTable( {
        data:storedJsonData,
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "position" },
            { "data": "salary" },
            { "data": "start_date" },
            { "data": "office" },
            { "data": "extn" }
        ]
    } );

Fiddle

Upvotes: 2

Views: 595

Answers (1)

4b0
4b0

Reputation: 22323

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>

Upvotes: 2

Related Questions