JQuery Datatables not displaying data created in a JSON object

Question

I am using a data table that was provided in the gentella admin template.

This is the script i am using

$("#datatable-buttons").DataTable({
        dom: "Bfrtip",
        buttons: [
                  {
                    extend: "copy",
                    className: "btn-sm"
                  },
                  {
                    extend: "csv",
                    className: "btn-sm"
                  },
                  {
                    extend: "excel",
                    className: "btn-sm"
                  },
                  {
                    extend: "pdfHtml5",
                    className: "btn-sm"
                  },
                  {
                    extend: "print",
                    className: "btn-sm"
                  },
                 ],
        "aadata": [
                {
                  "Name": "Tiger Nixon",
                  "Position": "System Architect",
                  "Office": "$320,800",
                  "Age": "2011/04/25",
                  "Start date": "Edinburgh",
                  "Salary": "5421"
                },
                {
                  "Name": "Garrett Winters",
                  "Position": "Accountant",
                  "Office": "$170,750",
                  "Age": "2011/07/25",
                  "Start date": "Tokyo",
                  "Salary": "8422"
                },
                {
                  "Name": "Ashton Cox",
                  "Position": "Junior Technical Author",
                  "Office": "$86,000",
                  "Age": "2009/01/12",
                  "Start date": "San Francisco",
                  "Salary": "1562"
                },
                {
                  "Name": "Cedric Kelly",
                  "Position": "Senior Javascript Developer",
                  "Office": "$433,060",
                  "Age": "2012/03/29",
                  "Start date": "Edinburgh",
                  "Salary": "6224"
                }
              ],
        responsive: true
      });

This is the HTML code

<table id="datatable-buttons" class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>

After running this code i am trying to display the JSON data in the table but it's not getting populated. What might be the problem?

maybe the aadata is case sensitive and should be aaData and instead of DataTable initialize you should use dataTable...they are used for different purposes — Elmer Dantas
– Elmer Dantas, Commented Jun 18, 2017 at 16:54
@Dinesh it's giving an alert like DataTables warning: table id=datatable-buttons - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4 — Akshay Shrivastav
– Akshay Shrivastav, Commented Jun 18, 2017 at 16:59

gaetanoM · Accepted Answer · 2017-06-18 17:47:28Z

You need to set aoColumns for the aaData option.

$("#datatable-buttons").DataTable({
  dom: "Bfrtip",
  buttons: [
      {
          extend: "copy",
          className: "btn-sm"
      },
      {
          extend: "csv",
          className: "btn-sm"
      },
      {
          extend: "excel",
          className: "btn-sm"
      },
      {
          extend: "pdfHtml5",
          className: "btn-sm"
      },
      {
          extend: "print",
          className: "btn-sm"
      },
  ],
  "aaData": [
      {
          "Name": "Tiger Nixon",
          "Position": "System Architect",
          "Office": "$320,800",
          "Age": "2011/04/25",
          "Start date": "Edinburgh",
          "Salary": "5421"
      },
      {
          "Name": "Garrett Winters",
          "Position": "Accountant",
          "Office": "$170,750",
          "Age": "2011/07/25",
          "Start date": "Tokyo",
          "Salary": "8422"
      },
      {
          "Name": "Ashton Cox",
          "Position": "Junior Technical Author",
          "Office": "$86,000",
          "Age": "2009/01/12",
          "Start date": "San Francisco",
          "Salary": "1562"
      },
      {
          "Name": "Cedric Kelly",
          "Position": "Senior Javascript Developer",
          "Office": "$433,060",
          "Age": "2012/03/29",
          "Start date": "Edinburgh",
          "Salary": "6224"
      }
  ],
  "aoColumns": [
      { "mData": "Name" },
      { "mData": "Position" },
      { "mData": "Office" },
      { "mData": "Age" },
      { "mData": "Start date" },
      { "mData": "Salary" }
  ],
  responsive: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>


<table id="datatable-buttons" class="table table-striped table-bordered">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

Yo!! That worked super perfect that was what I wanted. Thanks, man I guess I was using wrong parameters.

Collectives™ on Stack Overflow

JQuery Datatables not displaying data created in a JSON object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related