时间戳

首页 > 解决方案 > API数据未显示在表格中，需要显示进度加载（延迟加载）

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

问题描述

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>

标签： javascriptarraystabulator

解决方案

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

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

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

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

Tabulator 网站包含一个完整的Ajax 示例

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

推荐阅读