来自 URL 的 Tabulator JSON Ajax API 数据答案

【问题标题】：Tabulator JSON Ajax API data from URL来自 URL 的 Tabulator JSON Ajax API 数据
【发布时间】：2018-10-23 23:38:49
【问题描述】：

我正在尝试配置一个制表符表以显示来自此 JSON url 的数据： https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=33

我的代码如下，我试图让它在 JSON 文件中显示所有玩家的名字和助攻，非常感谢任何帮助！谢谢

HTML

<link href="https://unpkg.com/tabulator- 
tables@4.0.5/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-        
tables@4.0.5/dist/js/tabulator.min.js"></script>

<div id="example-table"></div>

//Build Tabulator
var table = new Tabulator("#example-table", { 
ajaxURL: ("https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=29"),  
height:"100px",
layout:"fitColumns",
placeholder:"Placeholder Data",
index: "id",
columns:[
   {title:"Name", field:"firstName", sorter:"string"},
   {title:"Assists", field:"assists", sorter:"number"},

  ],
});

【问题讨论】：

标签： tabulator

【解决方案1】：

您遇到了问题，因为您的数据在对象的 data 属性中作为数组返回，而不是简单地作为数组返回。

要处理该格式的数据，您需要使用 ajaxResponse 回调来告诉 Tabulator 在哪里查找数据数组。所以你的构造函数应该是这样的：

var table = new Tabulator("#example-table", { 
   ajaxURL: "https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=29",  
   height:100,
   layout:"fitColumns",
   placeholder:"Placeholder Data",
   index: "id",
   columns:[
      {title:"Name", field:"firstName", sorter:"string"},
      {title:"Assists", field:"assists", sorter:"number"},
   ],
   ajaxResponse:function(url, params, response){
      //url - the URL of the request
      //params - the parameters passed with the request
      //response - the JSON object returned in the body of the response.

      return response.data; //pass the data array into Tabulator
   },
});

【讨论】：