ajax+page实现获取数据前台分页展示，功能持续完善中

最新推荐文章于 2021-11-23 21:44:49 发布

可爱的橙子大爷

最新推荐文章于 2021-11-23 21:44:49 发布

阅读量589

点赞数 1

分类专栏：小吴的前端分享文章标签： ajax jquery

本文链接：https://blog.csdn.net/weixin_42337801/article/details/108781044

版权

小吴的前端分享专栏收录该内容

64 篇文章 1 订阅

订阅专栏

因为自己天马行空，是想把获取到的数组分页展示，就摸索出了这个案例
完整demo（）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <script src="page.js"></script>
</head>

<body>
    <div id='demo'></div>
    <span class="next">下一页</span>
    <span class="prev">上一页</span>
    <span class="nextMore">下5页</span>
    <span class="prevMore">上5页</span>
    <span class="total"></span>
    <span class="cur_page"></span>
</body>
<script>
    $(function() {
        $.ajax({
            type: "get",
            url: "你的接口",
            success: function(msg) {
                console.log(msg)
                var obj = [];
                obj = msg.data.category.list;
                console.log(obj);
                // $.each(obj, function(index, array) { //遍历json数据列
                //     obj += "<li><a href='#'>" + array['title'] + "</a></li>";
                // });
                // $("#demo").append(obj);
                // $("#demo").page(pageParam)
                for (var i = 0; i < obj.length; i++) {
                    var stitle = obj[i].title;
                    console.log(stitle)
                    var str = '<div>' + stitle + '</div>'
                    $("#demo").append(str);
                    $("#demo").page(pageParam)
                }

            },
            error: function(xhr) {
                console.log(xhr.status)
            }

        })
        var pageParam = {
                next: '.next', //下一页按钮jq选择器
                prev: '.prev', //上一页按钮jq选择器
                nextMore: '.nextMore', //下n页按钮jq选择器
                prevMore: '.prevMore', //上n页按钮jq选择器
                totalEl: '.total', //总页数jq元素  元素内包含 eq:“共n页”
                curPageEl: '.cur_page', //当前页数jq元素  元素内包含 eq:“当前第n页”
                perPageCount: 3, //每页显示数量
                morePage: 5 //上、下n页跳转数
            }
            //demo为包裹列表的容器

    })
</script>

</html>

可爱的橙子大爷

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax+page实现获取数据前台分页展示，功能持续完善中

因为自己天马行空，是想把获取到的数组分页展示，就摸索出了这个案例完整demo（）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫