Jquery分页之（上一页，下一页）
Jquery分页之（上一页，下一页）
- 在工作中我们会经常用到分页功能，除了数据库实现分页查询和调用分页插件，前端也可以实现分页查询，接下来就有我来带着大家实现一个简单的分页效果。
- 分页就是将将过多的结果在有限的界面上分好多页来显示，这个是很多网站常用的功能，也是最基本的功能。
1.首先当页面加载完成时,要将数据进行排列，假如你要将5条数据分为一页的话，那么页面加载完成时第一页就显示5条数据，同理要将10条数据分为一页的话，也是一样的。
如上图效果，第一页的分页就完成了。
function fenye(){
//可以通过数组的长度来判断有多少条数据
$('.txt').text(data1.length);
data1.forEach(function(ele,index){
//显示index小于5的数据 0,1,2,3,4
if(index<5){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
fenye();
分页的第一页非常的简单，可以通过foreach（）方法遍历数据源，然后通过if来判断index（索引），让索引小于5的数据在页面上进行显示，如果不想写死值得话，可以通过形参方式进行判断，在调用时传递实参也可，还可以传递两个形参进行判断，当调用时，2个实参发生改变可以形成一个判断区间，
例：index=>num(值为5)&&indexnum(值为10)&&index
2.点击下一页时，显示第二页的内容
//下一页
$('.xia').on('click',function(){
//当前数据的长度/5页
var length1=data1.length/5;
//获得最大页数，小数取整
var length2=$(Math.ceil(length1));
// 保存i的当前值
var i2=i;
i++;
//保存num的当前值
var num2=num;
num+=5;
//保存add的当前值
var num3=add;
var add=num;
add-=5;
// 如果超过最大页数的话，禁止点击下一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==length2[0]){
num=num2;
add=num3;
i=i2;
return false;
}
else{
//当点击下一页时，删除当前页面数据，防止出现数据大于5条以上情况
$('.tab').children().remove();
//当前的页数
$('.fenye_txt').text(i);
//遍历数据源
data1.forEach(function(ele,index){
//筛选出符合条件的数据
//例：index=>num(值为5)&&index
if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
当点击下一页时，定义两个变量num，add,每次点击的时候变量num+=5，变量add在基础上add-=5，形成一个判断的条件区间，
例：index=>add(值为5)&&index
index=>add(值为10)&&index
以此类推形成一个灵活的分页区间
通过数据源的长度除去5页，获取最大页数，并且通过Math.ceil（）方法取整（返回大于或等于一个给定数字的最小整数），如果当当前页数等于最大页数时，禁止点击下一页，并且通过定义变量，num2，num3，i2,恢复变量未点击前的值，防止点击上一页时出现bug。
并且在每一次点击下一页的时候，删除当前页面数据，防止出现数据大于5条以上情况。
如果没有删除的话，就会出现以上情况。
3.点击上一页时，显示当前页上一页的内容
$('.shang').on('click',function(){
//保存i的当前值
var i3=i;
i--;
//保存num的当前值
var num2=num;
num-=5;
var add=num;
add-=5;
//如果是第一页的话，禁止点击上一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==1){
num=num2;
i=i3;
return false;
}
else{
$('.fenye_txt').text(i);
$('.tab').children().remove();
data1.forEach(function(ele,index){
// 如果num的值为5，回到第一页
if(num==5){
if(index<5){
//回到第一页小于5
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
}
//筛选出符合条件的数据
else if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
当点击上一页时，定义两个变量num，add,每次点击的时候变量num-=5，变量add在基础上add-=5，形成一个判断的条件区间，
例：index=>add(值为5)&&index
index=>add(值为10)&&index
以此类推形成一个灵活的分页区间
如果当前页数为第一页时，禁止点击上一页，并且恢复变量未点击前的值，防止点击上一页时出现bug。
并且在每一次点击下一页的时候，删除当前页面数据，防止出现数据大于5条以上情况。
- 分页上一页与下一页原理非常的简单，只要弄懂了判断的区间和变量之间相互的关系就行，大家如果更好的方法可以在下方评论或是私信小编，由于时间仓促，就随便写了个小demo，上述代码还可以更加简便，大家弄懂了原理就行，下次小编将带大家写一个完整版的分页，这次就先到这里吧。
- 最后附上全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.tab{
overflow: hidden;
font-size: 12px;
}
.ul li{
list-style: none;
float: left;
border: 1px solid;
height: 60px;
text-align: center;
line-height: 60px;
}
.li_addresser{
width: 5%;
}
.li_email_text{
width: 40%;
}
.li_read{
width: 5%;
}
.li_email_sub{
width: 45%;
}
.li_date{
width: 40%;
}
.fenye{
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="tab"></div>
<div class="fenye">
<a href="#" class="shou">首页</a>
<a href="#" class="shang">上一页</a>
第<span class="fenye_txt">1</span>页
<a href="#" class="xia">下一页</a>
<a href="#" class="wei">尾页</a>
共<span class="txt"></span>条数据
</div>
<script src="emai_json.js"></script>
<script>
var i=1; //页数
var num=5; //显示5条数据
var data1=data.email_data
function fenye(){
//可以通过数组的长度来判断有多少条数据
$('.txt').text(data1.length);
data1.forEach(function(ele,index){
//显示index小于5的数据 0,1,2,3,4
if(index<5){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
fenye();
//下一页
$('.xia').on('click',function(){
//当前数据的长度/5页
var length1=data1.length/5;
//获得最大页数，小数取整
var length2=$(Math.ceil(length1));
// 保存i的当前值
var i2=i;
i++;
//保存num的当前值
var num2=num;
num+=5;
//保存add的当前值
var num3=add;
var add=num;
add-=5;
// 如果超过最大页数的话，禁止点击下一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==length2[0]){
num=num2;
add=num3;
i=i2;
return false;
}
else{
//当点击下一页时，删除当前页面数据，防止出现数据大于5条以上情况
$('.tab').children().remove();
//当前的页数
$('.fenye_txt').text(i);
//遍历数据源
data1.forEach(function(ele,index){
//筛选出符合条件的数据
//例：index=>num(值为5)&&index
if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shang').on('click',function(){
//保存i的当前值
var i3=i;
i--;
//保存num的当前值
var num2=num;
num-=5;
var add=num;
add-=5;
//如果是第一页的话，禁止点击上一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==1){
num=num2;
i=i3;
return false;
}
else{
$('.fenye_txt').text(i);
$('.tab').children().remove();
data1.forEach(function(ele,index){
// 如果num的值为5，回到第一页
if(num==5){
if(index<5){
//回到第一页小于5
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
}
//筛选出符合条件的数据
else if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shou').on('click',function(){
$('.fenye_txt').text("1");
$('.tab').children().remove();
fenye();
});
$('.wei').on('click',function(){
$('.tab').children().remove();
})
</script>
</body>
</html>
- 数据源：
var data={
"code": "000",
"emailNum":"9",
"email_data": [
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
}
]
}
喜欢小编的可以关注点一点。
小编虽然不能陪你一生，但能让你的基础知识满满登登。
2.点击下一页时，显示第二页的内容
//下一页
$('.xia').on('click',function(){
//当前数据的长度/5页
var length1=data1.length/5;
//获得最大页数，小数取整
var length2=$(Math.ceil(length1));
// 保存i的当前值
var i2=i;
i++;
//保存num的当前值
var num2=num;
num+=5;
//保存add的当前值
var num3=add;
var add=num;
add-=5;
// 如果超过最大页数的话，禁止点击下一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==length2[0]){
num=num2;
add=num3;
i=i2;
return false;
}
else{
//当点击下一页时，删除当前页面数据，防止出现数据大于5条以上情况
$('.tab').children().remove();
//当前的页数
$('.fenye_txt').text(i);
//遍历数据源
data1.forEach(function(ele,index){
//筛选出符合条件的数据
//例：index=>num(值为5)&&index
if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
当点击下一页时，定义两个变量num，add,每次点击的时候变量num+=5，变量add在基础上add-=5，形成一个判断的条件区间，
例：index=>add(值为5)&&index
index=>add(值为10)&&index
以此类推形成一个灵活的分页区间
通过数据源的长度除去5页，获取最大页数，并且通过Math.ceil（）方法取整（返回大于或等于一个给定数字的最小整数），如果当当前页数等于最大页数时，禁止点击下一页，并且通过定义变量，num2，num3，i2,恢复变量未点击前的值，防止点击上一页时出现bug。
并且在每一次点击下一页的时候，删除当前页面数据，防止出现数据大于5条以上情况。
如果没有删除的话，就会出现以上情况。
3.点击上一页时，显示当前页上一页的内容
$('.shang').on('click',function(){
//保存i的当前值
var i3=i;
i--;
//保存num的当前值
var num2=num;
num-=5;
var add=num;
add-=5;
//如果是第一页的话，禁止点击上一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==1){
num=num2;
i=i3;
return false;
}
else{
$('.fenye_txt').text(i);
$('.tab').children().remove();
data1.forEach(function(ele,index){
// 如果num的值为5，回到第一页
if(num==5){
if(index<5){
//回到第一页小于5
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
}
//筛选出符合条件的数据
else if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
当点击上一页时，定义两个变量num，add,每次点击的时候变量num-=5，变量add在基础上add-=5，形成一个判断的条件区间，
例：index=>add(值为5)&&index
index=>add(值为10)&&index
以此类推形成一个灵活的分页区间
如果当前页数为第一页时，禁止点击上一页，并且恢复变量未点击前的值，防止点击上一页时出现bug。
并且在每一次点击下一页的时候，删除当前页面数据，防止出现数据大于5条以上情况。
- 分页上一页与下一页原理非常的简单，只要弄懂了判断的区间和变量之间相互的关系就行，大家如果更好的方法可以在下方评论或是私信小编，由于时间仓促，就随便写了个小demo，上述代码还可以更加简便，大家弄懂了原理就行，下次小编将带大家写一个完整版的分页，这次就先到这里吧。
- 最后附上全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.tab{
overflow: hidden;
font-size: 12px;
}
.ul li{
list-style: none;
float: left;
border: 1px solid;
height: 60px;
text-align: center;
line-height: 60px;
}
.li_addresser{
width: 5%;
}
.li_email_text{
width: 40%;
}
.li_read{
width: 5%;
}
.li_email_sub{
width: 45%;
}
.li_date{
width: 40%;
}
.fenye{
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="tab"></div>
<div class="fenye">
<a href="#" class="shou">首页</a>
<a href="#" class="shang">上一页</a>
第<span class="fenye_txt">1</span>页
<a href="#" class="xia">下一页</a>
<a href="#" class="wei">尾页</a>
共<span class="txt"></span>条数据
</div>
<script src="emai_json.js"></script>
<script>
var i=1; //页数
var num=5; //显示5条数据
var data1=data.email_data
function fenye(){
//可以通过数组的长度来判断有多少条数据
$('.txt').text(data1.length);
data1.forEach(function(ele,index){
//显示index小于5的数据 0,1,2,3,4
if(index<5){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
fenye();
//下一页
$('.xia').on('click',function(){
//当前数据的长度/5页
var length1=data1.length/5;
//获得最大页数，小数取整
var length2=$(Math.ceil(length1));
// 保存i的当前值
var i2=i;
i++;
//保存num的当前值
var num2=num;
num+=5;
//保存add的当前值
var num3=add;
var add=num;
add-=5;
// 如果超过最大页数的话，禁止点击下一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==length2[0]){
num=num2;
add=num3;
i=i2;
return false;
}
else{
//当点击下一页时，删除当前页面数据，防止出现数据大于5条以上情况
$('.tab').children().remove();
//当前的页数
$('.fenye_txt').text(i);
//遍历数据源
data1.forEach(function(ele,index){
//筛选出符合条件的数据
//例：index=>num(值为5)&&index
if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shang').on('click',function(){
//保存i的当前值
var i3=i;
i--;
//保存num的当前值
var num2=num;
num-=5;
var add=num;
add-=5;
//如果是第一页的话，禁止点击上一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==1){
num=num2;
i=i3;
return false;
}
else{
$('.fenye_txt').text(i);
$('.tab').children().remove();
data1.forEach(function(ele,index){
// 如果num的值为5，回到第一页
if(num==5){
if(index<5){
//回到第一页小于5
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
}
//筛选出符合条件的数据
else if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shou').on('click',function(){
$('.fenye_txt').text("1");
$('.tab').children().remove();
fenye();
});
$('.wei').on('click',function(){
$('.tab').children().remove();
})
</script>
</body>
</html>
- 数据源：
var data={
"code": "000",
"emailNum":"9",
"email_data": [
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
}
]
}
喜欢小编的可以关注点一点。
小编虽然不能陪你一生，但能让你的基础知识满满登登。
index=>add(值为10)&&index
以此类推形成一个灵活的分页区间
通过数据源的长度除去5页，获取最大页数，并且通过Math.ceil（）方法取整（返回大于或等于一个给定数字的最小整数），如果当当前页数等于最大页数时，禁止点击下一页，并且通过定义变量，num2，num3，i2,恢复变量未点击前的值，防止点击上一页时出现bug。
并且在每一次点击下一页的时候，删除当前页面数据，防止出现数据大于5条以上情况。
如果没有删除的话，就会出现以上情况。
3.点击上一页时，显示当前页上一页的内容
$('.shang').on('click',function(){
//保存i的当前值
var i3=i;
i--;
//保存num的当前值
var num2=num;
num-=5;
var add=num;
add-=5;
//如果是第一页的话，禁止点击上一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==1){
num=num2;
i=i3;
return false;
}
else{
$('.fenye_txt').text(i);
$('.tab').children().remove();
data1.forEach(function(ele,index){
// 如果num的值为5，回到第一页
if(num==5){
if(index<5){
//回到第一页小于5
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
}
//筛选出符合条件的数据
else if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
当点击上一页时，定义两个变量num，add,每次点击的时候变量num-=5，变量add在基础上add-=5，形成一个判断的条件区间，
例：index=>add(值为5)&&index
index=>add(值为10)&&index
以此类推形成一个灵活的分页区间
如果当前页数为第一页时，禁止点击上一页，并且恢复变量未点击前的值，防止点击上一页时出现bug。
并且在每一次点击下一页的时候，删除当前页面数据，防止出现数据大于5条以上情况。
- 分页上一页与下一页原理非常的简单，只要弄懂了判断的区间和变量之间相互的关系就行，大家如果更好的方法可以在下方评论或是私信小编，由于时间仓促，就随便写了个小demo，上述代码还可以更加简便，大家弄懂了原理就行，下次小编将带大家写一个完整版的分页，这次就先到这里吧。
- 最后附上全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.tab{
overflow: hidden;
font-size: 12px;
}
.ul li{
list-style: none;
float: left;
border: 1px solid;
height: 60px;
text-align: center;
line-height: 60px;
}
.li_addresser{
width: 5%;
}
.li_email_text{
width: 40%;
}
.li_read{
width: 5%;
}
.li_email_sub{
width: 45%;
}
.li_date{
width: 40%;
}
.fenye{
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="tab"></div>
<div class="fenye">
<a href="#" class="shou">首页</a>
<a href="#" class="shang">上一页</a>
第<span class="fenye_txt">1</span>页
<a href="#" class="xia">下一页</a>
<a href="#" class="wei">尾页</a>
共<span class="txt"></span>条数据
</div>
<script src="emai_json.js"></script>
<script>
var i=1; //页数
var num=5; //显示5条数据
var data1=data.email_data
function fenye(){
//可以通过数组的长度来判断有多少条数据
$('.txt').text(data1.length);
data1.forEach(function(ele,index){
//显示index小于5的数据 0,1,2,3,4
if(index<5){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
fenye();
//下一页
$('.xia').on('click',function(){
//当前数据的长度/5页
var length1=data1.length/5;
//获得最大页数，小数取整
var length2=$(Math.ceil(length1));
// 保存i的当前值
var i2=i;
i++;
//保存num的当前值
var num2=num;
num+=5;
//保存add的当前值
var num3=add;
var add=num;
add-=5;
// 如果超过最大页数的话，禁止点击下一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==length2[0]){
num=num2;
add=num3;
i=i2;
return false;
}
else{
//当点击下一页时，删除当前页面数据，防止出现数据大于5条以上情况
$('.tab').children().remove();
//当前的页数
$('.fenye_txt').text(i);
//遍历数据源
data1.forEach(function(ele,index){
//筛选出符合条件的数据
//例：index=>num(值为5)&&index
if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shang').on('click',function(){
//保存i的当前值
var i3=i;
i--;
//保存num的当前值
var num2=num;
num-=5;
var add=num;
add-=5;
//如果是第一页的话，禁止点击上一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==1){
num=num2;
i=i3;
return false;
}
else{
$('.fenye_txt').text(i);
$('.tab').children().remove();
data1.forEach(function(ele,index){
// 如果num的值为5，回到第一页
if(num==5){
if(index<5){
//回到第一页小于5
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
}
//筛选出符合条件的数据
else if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shou').on('click',function(){
$('.fenye_txt').text("1");
$('.tab').children().remove();
fenye();
});
$('.wei').on('click',function(){
$('.tab').children().remove();
})
</script>
</body>
</html>
- 数据源：
var data={
"code": "000",
"emailNum":"9",
"email_data": [
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
}
]
}
喜欢小编的可以关注点一点。
小编虽然不能陪你一生，但能让你的基础知识满满登登。
以此类推形成一个灵活的分页区间
通过数据源的长度除去5页，获取最大页数，并且通过Math.ceil（）方法取整（返回大于或等于一个给定数字的最小整数），如果当当前页数等于最大页数时，禁止点击下一页，并且通过定义变量，num2，num3，i2,恢复变量未点击前的值，防止点击上一页时出现bug。
并且在每一次点击下一页的时候，删除当前页面数据，防止出现数据大于5条以上情况。
如果没有删除的话，就会出现以上情况。
3.点击上一页时，显示当前页上一页的内容
$('.shang').on('click',function(){
//保存i的当前值
var i3=i;
i--;
//保存num的当前值
var num2=num;
num-=5;
var add=num;
add-=5;
//如果是第一页的话，禁止点击上一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==1){
num=num2;
i=i3;
return false;
}
else{
$('.fenye_txt').text(i);
$('.tab').children().remove();
data1.forEach(function(ele,index){
// 如果num的值为5，回到第一页
if(num==5){
if(index<5){
//回到第一页小于5
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
}
//筛选出符合条件的数据
else if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
当点击上一页时，定义两个变量num，add,每次点击的时候变量num-=5，变量add在基础上add-=5，形成一个判断的条件区间，
例：index=>add(值为5)&&index
index=>add(值为10)&&index
以此类推形成一个灵活的分页区间
如果当前页数为第一页时，禁止点击上一页，并且恢复变量未点击前的值，防止点击上一页时出现bug。
并且在每一次点击下一页的时候，删除当前页面数据，防止出现数据大于5条以上情况。
- 分页上一页与下一页原理非常的简单，只要弄懂了判断的区间和变量之间相互的关系就行，大家如果更好的方法可以在下方评论或是私信小编，由于时间仓促，就随便写了个小demo，上述代码还可以更加简便，大家弄懂了原理就行，下次小编将带大家写一个完整版的分页，这次就先到这里吧。
- 最后附上全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.tab{
overflow: hidden;
font-size: 12px;
}
.ul li{
list-style: none;
float: left;
border: 1px solid;
height: 60px;
text-align: center;
line-height: 60px;
}
.li_addresser{
width: 5%;
}
.li_email_text{
width: 40%;
}
.li_read{
width: 5%;
}
.li_email_sub{
width: 45%;
}
.li_date{
width: 40%;
}
.fenye{
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="tab"></div>
<div class="fenye">
<a href="#" class="shou">首页</a>
<a href="#" class="shang">上一页</a>
第<span class="fenye_txt">1</span>页
<a href="#" class="xia">下一页</a>
<a href="#" class="wei">尾页</a>
共<span class="txt"></span>条数据
</div>
<script src="emai_json.js"></script>
<script>
var i=1; //页数
var num=5; //显示5条数据
var data1=data.email_data
function fenye(){
//可以通过数组的长度来判断有多少条数据
$('.txt').text(data1.length);
data1.forEach(function(ele,index){
//显示index小于5的数据 0,1,2,3,4
if(index<5){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
fenye();
//下一页
$('.xia').on('click',function(){
//当前数据的长度/5页
var length1=data1.length/5;
//获得最大页数，小数取整
var length2=$(Math.ceil(length1));
// 保存i的当前值
var i2=i;
i++;
//保存num的当前值
var num2=num;
num+=5;
//保存add的当前值
var num3=add;
var add=num;
add-=5;
// 如果超过最大页数的话，禁止点击下一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==length2[0]){
num=num2;
add=num3;
i=i2;
return false;
}
else{
//当点击下一页时，删除当前页面数据，防止出现数据大于5条以上情况
$('.tab').children().remove();
//当前的页数
$('.fenye_txt').text(i);
//遍历数据源
data1.forEach(function(ele,index){
//筛选出符合条件的数据
//例：index=>num(值为5)&&index
if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shang').on('click',function(){
//保存i的当前值
var i3=i;
i--;
//保存num的当前值
var num2=num;
num-=5;
var add=num;
add-=5;
//如果是第一页的话，禁止点击上一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==1){
num=num2;
i=i3;
return false;
}
else{
$('.fenye_txt').text(i);
$('.tab').children().remove();
data1.forEach(function(ele,index){
// 如果num的值为5，回到第一页
if(num==5){
if(index<5){
//回到第一页小于5
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
}
//筛选出符合条件的数据
else if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shou').on('click',function(){
$('.fenye_txt').text("1");
$('.tab').children().remove();
fenye();
});
$('.wei').on('click',function(){
$('.tab').children().remove();
})
</script>
</body>
</html>
- 数据源：
var data={
"code": "000",
"emailNum":"9",
"email_data": [
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
}
]
}
喜欢小编的可以关注点一点。
小编虽然不能陪你一生，但能让你的基础知识满满登登。
index=>add(值为10)&&index
以此类推形成一个灵活的分页区间
如果当前页数为第一页时，禁止点击上一页，并且恢复变量未点击前的值，防止点击上一页时出现bug。
并且在每一次点击下一页的时候，删除当前页面数据，防止出现数据大于5条以上情况。
- 分页上一页与下一页原理非常的简单，只要弄懂了判断的区间和变量之间相互的关系就行，大家如果更好的方法可以在下方评论或是私信小编，由于时间仓促，就随便写了个小demo，上述代码还可以更加简便，大家弄懂了原理就行，下次小编将带大家写一个完整版的分页，这次就先到这里吧。
- 最后附上全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.tab{
overflow: hidden;
font-size: 12px;
}
.ul li{
list-style: none;
float: left;
border: 1px solid;
height: 60px;
text-align: center;
line-height: 60px;
}
.li_addresser{
width: 5%;
}
.li_email_text{
width: 40%;
}
.li_read{
width: 5%;
}
.li_email_sub{
width: 45%;
}
.li_date{
width: 40%;
}
.fenye{
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="tab"></div>
<div class="fenye">
<a href="#" class="shou">首页</a>
<a href="#" class="shang">上一页</a>
第<span class="fenye_txt">1</span>页
<a href="#" class="xia">下一页</a>
<a href="#" class="wei">尾页</a>
共<span class="txt"></span>条数据
</div>
<script src="emai_json.js"></script>
<script>
var i=1; //页数
var num=5; //显示5条数据
var data1=data.email_data
function fenye(){
//可以通过数组的长度来判断有多少条数据
$('.txt').text(data1.length);
data1.forEach(function(ele,index){
//显示index小于5的数据 0,1,2,3,4
if(index<5){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
fenye();
//下一页
$('.xia').on('click',function(){
//当前数据的长度/5页
var length1=data1.length/5;
//获得最大页数，小数取整
var length2=$(Math.ceil(length1));
// 保存i的当前值
var i2=i;
i++;
//保存num的当前值
var num2=num;
num+=5;
//保存add的当前值
var num3=add;
var add=num;
add-=5;
// 如果超过最大页数的话，禁止点击下一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==length2[0]){
num=num2;
add=num3;
i=i2;
return false;
}
else{
//当点击下一页时，删除当前页面数据，防止出现数据大于5条以上情况
$('.tab').children().remove();
//当前的页数
$('.fenye_txt').text(i);
//遍历数据源
data1.forEach(function(ele,index){
//筛选出符合条件的数据
//例：index=>num(值为5)&&index
if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shang').on('click',function(){
//保存i的当前值
var i3=i;
i--;
//保存num的当前值
var num2=num;
num-=5;
var add=num;
add-=5;
//如果是第一页的话，禁止点击上一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==1){
num=num2;
i=i3;
return false;
}
else{
$('.fenye_txt').text(i);
$('.tab').children().remove();
data1.forEach(function(ele,index){
// 如果num的值为5，回到第一页
if(num==5){
if(index<5){
//回到第一页小于5
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
}
//筛选出符合条件的数据
else if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shou').on('click',function(){
$('.fenye_txt').text("1");
$('.tab').children().remove();
fenye();
});
$('.wei').on('click',function(){
$('.tab').children().remove();
})
</script>
</body>
</html>
- 数据源：
var data={
"code": "000",
"emailNum":"9",
"email_data": [
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
}
]
}
喜欢小编的可以关注点一点。
小编虽然不能陪你一生，但能让你的基础知识满满登登。
以此类推形成一个灵活的分页区间
如果当前页数为第一页时，禁止点击上一页，并且恢复变量未点击前的值，防止点击上一页时出现bug。
并且在每一次点击下一页的时候，删除当前页面数据，防止出现数据大于5条以上情况。
- 分页上一页与下一页原理非常的简单，只要弄懂了判断的区间和变量之间相互的关系就行，大家如果更好的方法可以在下方评论或是私信小编，由于时间仓促，就随便写了个小demo，上述代码还可以更加简便，大家弄懂了原理就行，下次小编将带大家写一个完整版的分页，这次就先到这里吧。
- 最后附上全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.tab{
overflow: hidden;
font-size: 12px;
}
.ul li{
list-style: none;
float: left;
border: 1px solid;
height: 60px;
text-align: center;
line-height: 60px;
}
.li_addresser{
width: 5%;
}
.li_email_text{
width: 40%;
}
.li_read{
width: 5%;
}
.li_email_sub{
width: 45%;
}
.li_date{
width: 40%;
}
.fenye{
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="tab"></div>
<div class="fenye">
<a href="#" class="shou">首页</a>
<a href="#" class="shang">上一页</a>
第<span class="fenye_txt">1</span>页
<a href="#" class="xia">下一页</a>
<a href="#" class="wei">尾页</a>
共<span class="txt"></span>条数据
</div>
<script src="emai_json.js"></script>
<script>
var i=1; //页数
var num=5; //显示5条数据
var data1=data.email_data
function fenye(){
//可以通过数组的长度来判断有多少条数据
$('.txt').text(data1.length);
data1.forEach(function(ele,index){
//显示index小于5的数据 0,1,2,3,4
if(index<5){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
fenye();
//下一页
$('.xia').on('click',function(){
//当前数据的长度/5页
var length1=data1.length/5;
//获得最大页数，小数取整
var length2=$(Math.ceil(length1));
// 保存i的当前值
var i2=i;
i++;
//保存num的当前值
var num2=num;
num+=5;
//保存add的当前值
var num3=add;
var add=num;
add-=5;
// 如果超过最大页数的话，禁止点击下一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==length2[0]){
num=num2;
add=num3;
i=i2;
return false;
}
else{
//当点击下一页时，删除当前页面数据，防止出现数据大于5条以上情况
$('.tab').children().remove();
//当前的页数
$('.fenye_txt').text(i);
//遍历数据源
data1.forEach(function(ele,index){
//筛选出符合条件的数据
//例：index=>num(值为5)&&index
if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shang').on('click',function(){
//保存i的当前值
var i3=i;
i--;
//保存num的当前值
var num2=num;
num-=5;
var add=num;
add-=5;
//如果是第一页的话，禁止点击上一页
// 并且恢复变量未点击前的值
if($('.fenye_txt').text()==1){
num=num2;
i=i3;
return false;
}
else{
$('.fenye_txt').text(i);
$('.tab').children().remove();
data1.forEach(function(ele,index){
// 如果num的值为5，回到第一页
if(num==5){
if(index<5){
//回到第一页小于5
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
}
//筛选出符合条件的数据
else if(index<num&&index>=add){
$('
').appendTo('.tab');
$('').text(ele.addresser).appendTo('.ul:last');
$('').text(ele.email_text).appendTo('.ul:last');
$('').text(ele.read).appendTo('.ul:last');
$('').text(ele.email_sub).appendTo('.ul:last');
}
})
}
})
$('.shou').on('click',function(){
$('.fenye_txt').text("1");
$('.tab').children().remove();
fenye();
});
$('.wei').on('click',function(){
$('.tab').children().remove();
})
</script>
</body>
</html>
- 数据源：
var data={
"code": "000",
"emailNum":"9",
"email_data": [
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},
{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
},{
"addresser": "淘宝网",
"email_text": " 【阿里云双12钜惠】云产品4折/财务软件99元/建站买1送1得天猫超市卡",
"read":"true",
"email_sub":" - 即刻访问天猫阿里云官方旗舰店，年末采购季，折扣享不停 亲爱的天猫用户： 您之所以收到这封邮件，是因为",
"date": "2018年12月10日"
}, {
"addresser": "淘宝网",
"email_text": " 云数据库SQL Server 发 布AlwaysOn集群读写分离版",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的 64359****@qq.com : 为解决海量数",
"date": "2018年12月11日"
}, {
"addresser": "管理员",
"email_text": "中转站文件到期提醒",
"read":"true",
"email_sub":" 亲爱的用户： 你的以下中转站文件即将过期，请及时下载，或提醒你的朋友下载。 文件名过期时间下载次数 前",
"date": "2018年12月10日"
}, {
"addresser": "张三",
"email_text": "冬日风平浪静 三沙邮轮开订（AD）",
"read":"false",
"email_sub":" ",
"date": "2018年12月10日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "阿里云",
"email_text": "台风“山竹”对广东、香港网络影响风险解除",
"read":"false",
"email_sub":" - 首页 | 产品服务 | 备案专区 |管理控制台 | 用户中心 |帮助中心 尊敬的[email protected]： 今年第22号台",
"date": "2018年12月09日"
}, {
"addresser": "厚溥",
"email_text": "0027号关于组织厚溥集团全国《体验教育师》岗位专业能力培训的通知 2",
"read":"false",
"email_sub":" 关于组织厚溥集团《体验教育师》岗位专业能力培训的通知",
"date": "2018年12月17日"
}, {
"addresser": "厚溥",
"email_text": "0028号关于武汉厚溥教育科技有限公司元旦放假的通知 1",
"read":"false",
"email_sub":" 关于2019年元旦放假通知",
"date": "2018年12月28日"
}, {
"addresser": "厚溥",
"email_text": "0024号关于2018年第一事业部高职第二分部内部竞聘的通知 2",
"read":"false",
"email_sub":" 关于2018年高职第二分部内部竞聘的通知",
"date": "2018年12月28日"
}
]
}
喜欢小编的可以关注点一点。
小编虽然不能陪你一生，但能让你的基础知识满满登登。