javascript - API数据未显示在表中，需要显示进度加载(延迟加载)

Question

API 数据未显示在表中。需要显示进度加载(lazyload)。这里我使用了制表插件:

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>

Answer 1

首先，您似乎没有告诉表在任何时候要使用哪个 URL。

如果您在创建制表符时未设置 URL，则需要在准备将数据加载到表中时通过调用 setData 函数来设置它

table.setData("http://www.getmydata.com/now");

此外，您绝对不想在 ajaxResponse 函数中执行任何操作，该函数旨在在收到数据后对其进行操作，您的代码可能会导致无限循环，只需从代码中删除不需要的整个回调即可。

Tabulator 网站包含一个完全可用的 Ajax Example

如果您想逐步将数据加载到表中，即对您的响应进行分页并在用户滚动时将其加载到表中，请查看 Progressive Loading Documentation