前端ajax实现分页思路详解

一、说明

在笔者刚加入到前端这个大家庭中时,分页对我来说绝对是山一样的障碍,所以如果您对javascript或者jquery还没有一定的实战经验,建议先把这两部分搞熟了,再来看这边文章,否则你会觉得很难受。学习是一个循序渐进的过程,不要心急;另外笔者深知人外有人,天外有天,如果你是一位久经沙场的程序员,希望我的这篇文章可以给你另一种思路,若有不足,请您不吝赐教。

二、实现

这是我们要实现的样式,如果当前页 >= 6的话,在分页左侧我们要留着1、2页并加上...。下面这个接口为了便于理解分页在前端的实现,并没有参数设置每页展示条数的大小,默认每页显示2条。

//加载数据,这个函数作用:1、页面初始化渲染,2、点击分页时调用。现在你可以理解为页面初始化用的。
// currentId 当前第几页
            function loadData(currentId) {
                $.ajax({
                    url: "{:url('articlelist/getArticles')}?currentId=" + currentId,
                    type: "get",
                    dataType: 'json',
                    success: function (res) {
//paginatFactory函数是渲染页面的核心,稍后会做介绍。
                        paginatFactory(res, currentId);
                    }, error: function (res) {
                        console.log(res);
                    }
                })
            }

接口返回数据的结构如下。data是数据数组,next为下一页的页码,previou为上一页的页码,total为总页数,这里可能后台返回的数据结构和你的不一样,建议你跟后台沟通一下,让他们加上需要的参数。(这里排除你和后台过不去的可能~)

下面就是分页的核心函数paginatFactory(res, currentId)了,res就是上面的数据,currentId是当前第几页。

function paginatFactory(res, currentId) { 
                var html = "";    //html变量存储要展示的内容,下面循环不在赘述。
                for (var i = 0; i < res.data.length; i++) {
                    var category = res.data[i].category === 0 ? "设计文章" : res.data[i].category === 1 ? "前端文章" : "旅游杂计";
                    html += " <tr>" +
                        "                    <td>" + res.data[i].title + "</td>" +
                        "                    <td>" + res.data[i].content + "</td>" +
                        "                    <td>" + category +
                        "                    </td>" +
                        "                    <td>" +
                        "                        <a class=\"layui-btn layui-btn-normal\" href=\"{:url('articlelist/edit')}?id=" + res.data[i].id + "\">编辑</a>" +
                        "                        <div class=\"layui-btn layui-btn-warm removeArticle\" data-id=\"" + res.data[i].id + "\">删除</div>" +
                        "                    </td>" +
                        "                </tr>";
                }
                $('#articlelist').html(html);    //请在body中加一个id为//articlelist的table标签来查看效果。

                //这里就是分页核心了,为了更好查看效果,请在刚才id为articlelist表格后创建一个class为paginate的ul标签。
//disabled设置页码不能点击,如果当前页是第一页,«按钮不能点
                var pageHtml = "<li " + (res.previou ? "" : "disabled") + " data-pageid='" + res.previou + "'>«</li>";
//pageTotal来设置分页显示数量,如果>=6的话,最多显示6条,否则你懂得
                var pageTotal = res.total >= 6 ? 6 : res.total;
            //由于是两种样式,所以根据当前页来更改
                if (currentId < 6) {
                    for (var j = 1; j <= pageTotal; j++) {
                        pageHtml += "            <li " + (currentId === j ? "disabled" : "") + " data-pageid='" + j + "'>" + j + "</li>";
                    }
                } else {
            //如果大于6,会加上...并且1、2页都在左侧留着
                    for (var j = 1; j <= pageTotal; j++) {
            //小于3的话 1、2页码一直存在
                        if (j < 3) {
                            pageHtml += "            <li " + (currentId === j ? "disabled" : "") + " data-pageid='" + j + "'>" + j + "</li>";
                        }
            //等于3,加上...
                        if (j === 3) {
                            pageHtml += "<li disabled class='jump'>...</li>";
                        }
            //如果当前页大于三。页码需要根据当前页来渲染。
                        if (currentId > 3) {
            //当前页-1,如果当前页是7,左边显示7-1=6
                            if (j === 4) {
                                if (currentId === res.total) {
                                    pageHtml += "<li data-pageid='" + (currentId - 2) + "'>" + (currentId - 2) + "</li>";
                                }
                                pageHtml += "<li data-pageid='" + (currentId - 1) + "'>" + (currentId - 1) + "</li>";
                            }
            //当前页,注意disabled,不能在点击,
                            if (j === 5) {
                                pageHtml += "<li disabled data-pageid='" + currentId + "'>" + currentId + "</li>";
                            }
            //这里当前页+1,你应该懂了。
                            if (j === 6 && currentId < res.total) {
                                pageHtml += "<li data-pageid='" + (currentId + 1) + "'>" + (currentId + 1) + "</li>";
                            }
                        }
            //这里如果当前页小于总页数的倒数第二页,...就显示。否则后面每页数了就不显示。
                        if (j === 6 && currentId < (res.total - 1)) {
                            pageHtml += "<li disabled class='jump'>...</li>";
                        }
                    }
                }
            //这里判断是不是最后一页,是就disabled
                pageHtml += "            <li " + (currentId >= res.total ? "disabled" : "") + " data-pageid='" + res.next + "'>»</li>";
            //这里就是页面直接跳转了。
                pageHtml += "<li class='jump' disabled>共" + res.total + "页, 到第<input class='entrance' value='" + currentId + "' type='text'>页</li><li data-total='" + res.total + "' class='confirm'>确定</li>"
            //最后渲染
                $('.paginate').html(pageHtml);
            }

下面展示如何调用

            loadData(1);// 初始化 页面第一次渲染时,相当于获取第一页的数据,所以这里传1
            /* 
            @ currentId 当前页数
             */
            $(document).on('click', '.paginate li:not([disabled])', function () {
            //confirm 判断点击的是确定还是页码
                if ($(this).hasClass('confirm')) {
                    //是确定,要获取输入的是第几页。
                    var page = parseInt($('.entrance').val());
                    if (page <= 0 || page > $(this).data('total') || isNaN(page)) {
                        layer.msg('请输入正确的页码!');
                    } else {
                    //符合正确页数后调用ajax方法。
                        loadData(page);
                    }
                } else {
                    //这里就是点击页码后的调用。
                    var pageId = $(this).data('pageid');
                    loadData(pageId);
                }
            });

css样式如下

        .paginate {
            font-size:0;
        }
        .paginate li{
            font-size:14px;
            display: inline-block;
            margin-right:10px;
            text-align: center;
            width:30px;
            height:28px;
            line-height: 28px;
            border:1px solid #ddd;
        }
        .paginate [disabled]{
            color:gray;
        }
        .paginate li:not([disabled]):hover {
            cursor: pointer;
            color:#fff;
            background-color: #009688;
        }
        .paginate li.jump{
            border:none;
            width:auto;
        }
        .paginate li.jump .entrance{
            border:1px solid #ddd;
            text-align: center;
            width:30px;
            height:28px;
        }

如果有什么问题。请留言。

  • 16
    点赞
  • 106
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值