Datatables showing error but displaying data incorrectly

Question

I am using DataTables to show very simple data, Datatables is giving the following error:

DataTables warning: table id=example - Requested unknown parameter 'County' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

Here is my code:

var res = [{
    "School": "London"
  },
  {
    "County": "South Yorks"
  },
  {
    "Country": "UK"
  }
];

$(document).ready(function() {
  $('#example').DataTable({
    data: res,
    "columns": [{
        "data": "School"
      },
      {
        "data": "County"
      },
      {
        "data": "Country"
      },
    ]
  });

});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<div class="container-fluid">
  <div class="row">
    <table id="example" class="display" style="width:100%">
      <thead>
        <tr>
          <th>School</th>
          <th>County</th>
          <th>Country</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>School</th>
          <th>County</th>
          <th>Country</th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

Any help ideas?

Thanks

can you please use two dimensional array instead of array of objects? — Abu Sufian
– Abu Sufian, Commented Nov 14, 2019 at 9:07

prasanth · Accepted Answer · 2019-11-14 09:07:09Z

Your data array object was wrong .Try like this

  var res = [{
      "School": "London",
      "County": "South Yorks",
      "Country": "UK",
    }
  ];

On data use key value pair in single object instead of individual object

Reference https://datatables.net/manual/data/#Objects

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />

  <title>Document</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <table id="example" class="display" style="width:100%">
        <thead>
          <tr>
            <th>School</th>
            <th>County</th>
            <th>Country</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>School</th>
            <th>County</th>
            <th>Country</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</body>


<script type="text/javascript">
  var res = [{
      "School": "London",
      "County": "South Yorks",
      "Country": "UK",
    }
  ];

  $(document).ready(function() {
    $('#example').DataTable({
      data: res,
      "columns": [{
          "data": "School"
        },
        {
          "data": "County"
        },
        {
          "data": "Country"
        },
      ]
    });

  });
</script>

</html>

Collectives™ on Stack Overflow

Datatables showing error but displaying data incorrectly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related