一、阐明

在笔者刚退出到前端这个小家庭中时，分页对我来说相对是山一样的阻碍，所以如果您对 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;
        }