CODEWITHSUNDEEP
javascriptjquerydatatables
Edgar Manukyan
Edgar Manukyan

Reputation: 1301

DataTables Net, No data available in table, while a Valid JSON is Provided

I will appreciate your help to understand why DataTables returns No data available in table. The JSON endpoint is at https://spreadsheets.google.com/feeds/list/1YFDhlGve0L7tYjYx6WVOPVUA5eIo9lMJfWrKXyU1hAI/1/public/values?alt=json

The code I used:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css"
    />

    <script
      type="text/javascript"
      charset="utf8"
      src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"
    ></script>
  </head>
  <body>
    <table id="example" class="display" style="width: 100%">
      <thead>
        <tr>
          <th>myid</th>
          <th>myname</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>myid</th>
          <th>myname</th>
        </tr>
      </tfoot>
    </table>
  </body>
  <script>
    $(document).ready(function () {
      $("#example").DataTable({
        ajax: {
          url:
            "https://spreadsheets.google.com/feeds/list/1YFDhlGve0L7tYjYx6WVOPVUA5eIo9lMJfWrKXyU1hAI/1/public/values?alt=json",
          dataType: "jsonp",
          dataSrc: function (json) {
            interim_ = json.feed.entry;
            let rows = [];
            for (const i of interim_) {
              let row_ = [i.gsx$myid.$t, i.gsx$myname.$t];
              console.log(row_);
              rows.push(row_);
            }
            let final_ = { data: rows };
            console.log(final_);
            return final_;
          },
        },
      });
    });
  </script>
</html>

Upvotes: 0

Views: 238

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

Your final_ object is not in the correct format for data tables to recognise.

A simple array will suffice.

Change to return rows;

Regarding json vs jsonp - the data source is json, but jquery is intelligent enough that using dataType: "jsonp" will also allow json

$(document).ready(function() {
  $("#example").DataTable({
    ajax: {
      url: "https://spreadsheets.google.com/feeds/list/1YFDhlGve0L7tYjYx6WVOPVUA5eIo9lMJfWrKXyU1hAI/1/public/values?alt=json",
      dataType: "jsonp",
      dataSrc: function(json) {
        interim_ = json.feed.entry;
        let rows = [];
        for (const i of interim_) {
          let row_ = [i.gsx$myid.$t, i.gsx$myname.$t];
          console.log(row_);
          rows.push(row_);
        }
        //let final_ = {
        //  data: rows
        //};
        //console.log(final_);
        return rows;
      },
    },
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css" />

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>

<table id="example" class="display" style="width: 100%">
  <thead>
    <tr>
      <th>myid</th>
      <th>myname</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>myid</th>
      <th>myname</th>
    </tr>
  </tfoot>
</table>

Upvotes: 1

Related Questions