Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了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分页插件。如果你用到此插件作分页的时候，涉及到的数据量大，可以采用异步加载数据，当数据不多的时候，直接一次性加载，方便简单。
自荐前端干货：
进阶攻略|前端最全的框架总结：https://www.jianshu.com/p/2a8ce7075d79
web开发快速提高工作效率的一些资源：https://www.jianshu.com/p/3cede64e87e5
前端学习的几个网站：https://www.jianshu.com/p/c36463dd56db
老司机程序员用到的各种网站整理：https://www.jianshu.com/p/c806eabe5bec
进阶攻略|前端完整的学习路线：https://www.jianshu.com/p/ed50ee3889d4
八款前端开发人员更轻松的实用在线工具：https://www.jianshu.com/p/267a01fb8bdb
前端几个常用简单的开发手册拿走不谢：https://www.jianshu.com/p/fd9689046a9b
程序员常用的六大技术博客类：https://www.jianshu.com/p/d1614f890282
九款优秀的企业项目协作工具推荐：https://www.jianshu.com/p/7df25e438610
移动端手势的七个事件库：https://www.jianshu.com/p/0754d5daa27e
Bootstrap相关优质项目学习清单：https://www.jianshu.com/p/80d229e7fedc
2018前端越来越流行的的技术：https://www.jianshu.com/p/d4af2aa96cee
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程
原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe190后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
文末福利：关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群
