表中未显示API数据。需要显示进度负荷(惰性负荷)。
在这里,我使用了制表器插件:
var url = "https://jsonplaceholder.typicode.com/todos/";
var myJsonString;
var table = new Tabulator("#example-table", {
height:"311px",
layout:"fitColumns",
ajaxURL:"",
ajaxResponse:function(url, params, response){
return table.setData(response);
},
ajaxProgressiveLoad:"scroll",
paginationSize:20,
placeholder:"No Data Set",
columns:[
{title:"Name", field:"userId", sorter:"string", width:200},
{title:"Progress", field:"progress", sorter:"number", formatter:"progress"},
{title:"Gender", field:"gender", sorter:"string"},
{title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
{title:"Favourite Color", field:"col", sorter:"string"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
{title:"Driver", field:"car", align:"center", formatter:"tickCross", sorter:"boolean"},
],
});
**HTML tags are started here**
<link href="https://unpkg.com/tabulator-tables@4.4.1/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables@4.4.1/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example-table"></div>
最佳答案
首先,您似乎没有在任何时候告诉表要使用哪个URL。
如果在创建制表器时未设置url,则在准备好将数据加载到表中时需要通过调用setData函数进行设置
table.setData("http://www.getmydata.com/now");
另外,您绝对不希望在ajaxResponse函数中执行任何操作,该操作旨在在接收到数据后处理数据,您的代码可能会导致无限循环,只需从代码中删除整个回调即可,而无需使用它。
制表器网站包含完整运行的Ajax Example
如果要逐步将数据加载到表中,即在用户滚动时分页响应并将其加载到表中,请查看Progressive Loading Documentation