时间戳

首页 > 解决方案 > DataTables Net，表中没有可用数据，但提供了有效的 JSON

javascript - DataTables Net，表中没有可用数据，但提供了有效的 JSON

问题描述

感谢您帮助理解为什么 DataTables 返回 No data available in table。JSON 端点位于https://spreadsheets.google.com/feeds/list/1YFDhlGve0L7tYjYx6WVOPVUA5eIo9lMJfWrKXyU1hAI/1/public/values?alt=json

我使用的代码：

<!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>

标签： javascriptjquerydatatables

解决方案

您的final_对象的格式不正确，数据表无法识别。

一个简单的数组就足够了。

更改为return rows;

关于jsonvs jsonp- 数据源是json，但 jquery 足够智能，使用dataType: "jsonp"也将允许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>

推荐阅读