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