JQuery 数据表 Ajax 数据源错误 - 请求的参数未知

Question

我很困惑为什么我从 JQuery Datatables “DataTables warning: table id=myTable - Requested unknown parameter '0 ' 对于第 0 行，第 0 列。有关此错误的更多信息，请参阅 http://datatables.net/tn/4"。我已尝试查看网站信息，但对我来说没有多大意义。我唯一的猜测是它有与数据的格式化方式有关。如果是这样，我不确定如何解决该问题。

这段代码正在获取 API，因此我可以在控制台中查看它，然后再次查看数据table 数据。

      var apiKey = "0ca80ddc-63f6-476e-b548-e5fb0934fc4b";
      $.ajax({
          type: "GET",
          url: "http://brew-roster-svc.us-e2.cloudhub.io/api/teams",
          headers: { "api-key": apiKey },
          success: function(result){
            console.log(result)
            console.log(JSON.stringify(result));
          }
      });
      $(document).ready( function () {
        $('#myTable').dataTable({          
          "ajax": {
            "url": "http://brew-roster-svc.us-e2.cloudhub.io/api/teams",
            "type": "get",
            "dataSrc": "",
            "beforeSend": function (request) {
              request.setRequestHeader("api-key", apiKey);
            },
            "columns": [
              { "data": "logo" },
              { "data": "name" },
              { "data": "league" },
              { "data": "division" },
            ],
          }
        });
      });

这是我在控制台中调试 Ajax 结果的结果。

(30) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

这部分是我展开后看到的片段：

0: {id: 133, nickname: 'Athletics', name: 'Oakland Athletics', location: 'Oakland', abbreviation: 'OAK', …}
1: {id: 134, nickname: 'Pirates', name: 'Pittsburgh Pirates', location: 'Pittsburgh', abbreviation: 'PIT', …}
[[Prototype]]: Array(0)

Answer 1

主要问题是您将列定义放在数据表的 ajax 部分中。您需要将 columns 移到 ajax 选项之外。

此外，Ajax 响应使用 leage 而不是 league - 我认为这只是一个拼写错误 - 但你需要在你的列名中犯同样的拼写错误.

$('#myTable').DataTable({
  "ajax": {
    "url": "http://brew-roster-svc.us-e2.cloudhub.io/api/teams",
    "type": "GET",
    "dataSrc": "",
    "beforeSend": function (request) {
      request.setRequestHeader("api-key", apiKey);
    }
  },
  "columns": [
    { "data": "logo" },
    { "data": "name" },
    { "data": "leage" },
    { "data": "division" }
  ]
});

最后，您可能想要显示实际徽标而不是显示徽标 URL 的字符串。为此，请查看 column rendering。对于 logo 列，您可以使用渲染器创建 HTML:

的字符串

'<img src="' + data + '">'

在这种情况下，变量 data 是列呈现器引用 logo 值的方式。

JQuery 数据表 Ajax 数据源错误 - 请求的参数未知

JQuery Datatables Ajax Datasource Error - Requested unknown parameter

javascript

jquery

datatables