模拟请求分页参数

最新推荐文章于 2023-10-01 08:00:00 发布
545522390
最新推荐文章于 2023-10-01 08:00:00 发布
阅读量335
点赞数
本文链接：https://blog.youkuaiyun.com/u013239476/article/details/103380986
版权
下面是请求的例子
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <!--    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<style>
    #example {
        width: 200px !important;
    }
</style>
<body>
<div id="app">
    <button class="js-page" data-type="pre" type="button">上100</button>
    <button class="js-page" data-type="next" type="button">下100</button>

    <div>
        <span id="start"></span>
        ~
        <span id="end"></span>
        /
        共
        <span id="pageCount"></span>
    </div>


</div>
</body>

<script>
    var pageSize = 100;
    var page = 0;//当前是第几页

    var pageCount = 400;//总共有多少条记录

    var totalPage = Math.ceil(pageCount / pageSize);//计算拿出共有多少页（总记录数/每页数），用进一法，有小数点的表示还有下一页
    var start = 0;//开始记录数
    var end = 0;//结束记录数
    var pageParamArr = ["{}"];
    $(function () {
        $(".js-page").click(function () {
            // debugger
            // console.log("存储的参数：");
            // console.log(pageParamArr);
            if ($(this).attr("data-type") === "next") {
                // 到达末页不请求了。
                if (page >= totalPage) {
                    return;
                }
                page++;//成功之后页码+1
            } else {
                if (page > 1) {
                    page--;//成功之后页码-1
                }else{
                    return false;
                }
            }
            start = pageSize * (page - 1) + 1; //根据当前页码计算开始记录
            end = pageSize * page; //根据当前页码计算结束记录
            console.log('当前是第：' + page + '页');
            //根据已有的数组构造请求参数
            if (page == 1) {
                var paramData = pageParamArr[0];
            }else{
                var paramData = '';
                for (var i = 1; i <= page - 1; i++) {
                    paramData += pageParamArr[i];
                }
            }
            //这里模拟从接口拿到数据
            var data = getData(paramData);
            if (data) {
                console.log(page);
                if (pageParamArr.indexOf(data.pageParam) == -1) {
                    pageParamArr.push(data.pageParam);
                }
                if (page <= totalPage) {
                    //到最后一页还是可以更新记录数
                    $("#start").text(start);
                    $("#end").text(end);
                }
            }
        });

        //一开始就先请求一次
        $(".js-page[data-type=next]").click();
    });

    function getData(params) {
        console.log("请求的参数=" + params);
        //这里是模拟返回的数据
        var data = {
            list: [],
            pageParam: '{}' //后端返回的page参数
        };
        if (page == 1) {
            for (var i = 1; i <= 100; i++) {
                data.list.push(i);
            }
            data.pageParam = "page:1"
        }
        if (page == 2) {
            for (var i = 1; i <= 100; i++) {
                data.list.push(i);
            }
            data.pageParam = "page: 2"
        }
        if (page == 3) {
            for (var i = 1; i <= 100; i++) {
                data.list.push(i);
            }
            data.pageParam = "page: 3"
        }
        if (page == 4) {
            for (var i = 1; i <= 50; i++) {
                data.list.push(i);
            }
            data.pageParam = "page: 4"
        }

        return data;
        /* $.ajax({
             url: "https://health.vilson.xyz/api/index/getData",
             success: function () {


             }
         })*/

    }
</script>
<style>
    .center {
        text-align: center;
    }
</style>
</html>