Jquery前端分页插件pagination同步加载和异步加载

xiaoxiao2021-02-28  4

上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页。https://www.jianshu.com/p/a1b8b1db025b

但是这样写的缺点就是一次性加载数据进行分页的,后期数据多的话可能不行,数据量太大比如说上千条数据,在给每个页面分配固定的条数,一下子加载不出来,就会导致页面间的短暂空白,如果遇上网速不好,那差不多就是一个不完美的bug

一次性加载数据,前端分页

上一篇文章中提到的原理js代码如下:

$(function() { //默认每一页显示5条数据 getMsg(5) //分页实现函数 function getMsg(num) { $.ajax({ url : ROOT+'/map/getPeopleList', type : 'GET', dataType : 'json', success : function(data) { // 1.计算分页数量 var showNum = num; var dataL = data.length; var pageNum = Math.ceil(dataL / showNum); $('.Pagination').pagination(pageNum,{ num_edge_entries : 1, num_display_entries : 4, prev_text : "<<", next_text : ">>", callback : function(index) { var html = '<div>' for (var i = showNum * index; i < showNum * index + showNum; i++) { if (i < dataL) { html += "<p>" + data[i].name + "</p>" } } html += '</div>'; $('.list').html(html) }) } }) } } })

pagination一次性加载所有的数据再分页,数据太多了,一次性加载不出来,卡的很,和后台商量了一下,得出了一个简单的思路,当前页数和显示的条数即可,解决方案如下:

分批加载数据,前端分页(实现异步加载)

js代码: $(function() { var pageSize = 5; // 每页显示多少条记录 var total; // 总共多少记录 Init(0); // 注意参数,初始页面默认传到后台的参数,第一页是0; $(".Pagination").pagination(total, { callback : PageCallback, prev_text : '上一页', next_text : '下一页', items_per_page : pageSize, num_display_entries : 4, // 连续分页主体部分显示的分页条目数 num_edge_entries : 1, // 两侧显示的首尾分页的条目数 }); //点击上一页、下一页、页码的时候触发的事件 function PageCallback(index, jq) { // 前一个参数表示当前点击的那个分页的页数索引值,后一个参数表示装载容器。 Init(index); } function Init(pageIndex) { // 参数就是点击的那个分页的页数索引值 $.ajax({ type : "get", url : ROOT + "/map/getPeopleList?rows=" + pageSize + "&page=" + pageIndex, async : false, dataType : "json", success : function(data) { // 赋值total,用于计算 total = data.total; //拼接html(这个部分根据自己的需求去实现) var list = data.pList; var html = '<div>' for (var i = 0; i < list.length; i++) { html += "<p>" + list[i].name + "</p>" } html += '</div>'; $('.list').html(html) }, error : function() { alert("请求超时,请重试!"); } }); }; });

评价:分页插件pagination此插件是jQuery的ajax分页插件。如果你用到此插件作分页的时候,涉及到的数据量大,可以采用异步加载数据,当数据不多的时候,直接一次性加载,方便简单。

文末福利:

福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880福利二:微信小程序入门与实战全套详细视频教程

image

领取方式:如果需要学习视频,欢迎关注 【编程微刊】微信公众号,回复【领取资源】一键领取以下所有干货资源,获取更多有用技术干货、文档资料。所有文档会持续更新,欢迎关注一起成长!

原文作者:祈澈姑娘原文链接:https://www.jianshu.com/u/05f416aefbe1创作不易,转载请告知

90后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

转载请注明原文地址: https://www.6miu.com/read-2400178.html

最新回复(0)