前端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=6if (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>";}}}//这里判断是不是最后一页，是就disabledpageHtml += "            <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;}

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

前端ajax实现分页思路详解相关推荐

前端ajax与后端php数据传输,前端ajax与后端交互详解
前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的,本文主要介绍了前端ajax的各种与后端交互的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 但是交互的方式 ...
Java编程配置思路详解
Java编程配置思路详解 SpringBoot虽然提供了很多优秀的starter帮助我们快速开发,可实际生产环境的特殊性,我们依然需要对默认整合配置做自定义操作,提高程序的可控性,虽然你配的不一定比官 ...
[转帖]前端-chromeF12 谷歌开发者工具详解 Sources篇
前端-chromeF12 谷歌开发者工具详解 Sources篇原贴地址:https://blog.csdn.net/qq_39892932/article/details/82498748 cons ...
HTML5实现视频直播功能思路详解
HTML5实现视频直播功能思路详解最近视频直播比较火,发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主,PC端则以 RTMP 为主实时性较好,接下 ...
MySql深分页问题详解
MySql深分页问题详解 1. 问题描述 2. 问题分析 3. 验证测试 3.1 创建两个表 3.2 创建两个函数 3.3 编写存储过程 3.4 编写存储过程 3.5 创建索引 3.6 验证测试 4. ...
mysql 点赞数据库设计_基于redis实现的点赞功能设计思路详解
点赞其实是一个很有意思的功能.基本的设计思路有大致两种, 一种自然是用mysql等数据库直接落地存储, 另外一种就是利用点赞的业务特征来扔到redis(或memcache)中, 然后离线刷回mysq ...
html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
【直播】陈安东，但扬：CNN模型搭建、训练以及LSTM模型思路详解
CNN模型搭建.训练以及LSTM模型思路详解目前 Datawhale第24期组队学习正在如火如荼的进行中.为了大家更好的学习"零基础入门语音识别(食物声音识别)"的课程设计者 ...
vuepdf转换html,Vue网页html转换PDF（最低兼容ie10）的思路详解
Vue网页html转换PDF(最低兼容ie10)的思路详解发布时间:2020-10-16 13:05:09 来源:脚本之家阅读:95 作者:冷藏封 HTML转PDF: 1.页面底层实现--Vue: ...

前端ajax实现分页思路详解

前端ajax实现分页思路详解相关推荐

最新文章

热门文章