tabulator5 ajax pokeapi服务器分页，请求、响应参数修改示例

最新推荐文章于 2024-06-18 09:36:52 发布

allway2

最新推荐文章于 2024-06-18 09:36:52 发布

阅读量229

点赞数

文章标签： python php 开发语言

本文链接：https://blog.csdn.net/allway2/article/details/121538515

版权

这个示例展示了如何利用Tabulator库来创建一个表格，从远程API（此处为pokeapi.co）获取数据并实现分页。Tabulator通过AJAX请求获取数据，并使用`ajaxURLGenerator`函数自定义URL参数，以实现分页功能。响应数据被处理以适应Tabulator的格式，同时在控制台中记录关键信息。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tabulator Example</title>
        <link href="css/tabulator.css" rel="stylesheet">
        <script type="text/javascript" src="js/tabulator.js"></script>
        <style>
            /*Horizontally center header and footer*/
            .tabulator-print-header, tabulator-print-footer{
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="example-table"></div>
        <script type="text/javascript">
//Build Tabulator
            var table = new Tabulator("#example-table", {
                height: "311px",
                layout: "fitColumns",
                placeholder: "No Data Set",
                pagination: true, //enable pagination
                paginationMode: "remote", //enable remote pagination
                paginationSize: 5,
                paginationInitialPage: 1,
                ajaxURL: "https://pokeapi.co/api/v2/pokemon", //set url for ajax request
                ajaxURLGenerator: function (url, config, params) {
                    console.log(params.page);
                    console.log(params.size);
                    var offset = (params.page - 1) * params.size;
                    var limit = params.size;
                    //https://pokeapi.co/api/v2/pokemon?offset=20&limit=20
                    return url + "?offset=" + offset + "&limit=" + limit; //encode parameters as a json object
                },
                ajaxResponse: function (url, params, response) {
                    console.log(response);

                    response['last_page'] = response['count'];
                    response['data'] = response['results'];
                    response.last_page = Math.ceil(response.count / table.getPageSize());
                    console.log("last_page:=" + response.last_page);
                    console.log("getPageSize=" + table.getPageSize());
                    console.log(response['last_page']);
                    return response;
                },

                columns: [
                    {title: "Pokemon", field: "name"},
                    {title: "URL", field: "url"},
                ],
            });
        </script>
    </body>
</html>

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tabulator5 ajax pokeapi服务器分页，请求、响应参数修改示例

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tabulator Example</title> <l...
复制链接

扫一扫