超简单实用的前端分页---jquery插件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了超简单实用的前端分页---jquery插件相关的知识，希望对你有一定的参考价值。
首先,谈谈分页,目前我所了解的分页有两种,前端分页跟后台分页.
简单说说前端分页.是通过前端技术拿到所有的数据,在前端分页处理;
而后台分页是通过前端操作,给后台返回不同的值,再由后台返回所对应的数据.
最近,下载了很多前端分页插件.感觉性价比不是模糊不清,就是显示不是自己想要的,所以想自己动手写一个属于自己的插件
这是一个面向对象思想的插件.第一次用面向对象的思想,肯定有很多不足的地方.希望能互相讨论,一起上进.
这是效果图.看起来一般,但是他的css可重塑性高
接下来将附上自己的代码.
css代码
#pages{
overflow: hidden;
}
.lf{
float: left;
height: 28px;
line-height: 28px;
}
.rt{
float: right;
}
#mid{
margin: 0 5px;
overflow: hidden;
}
#mid>span{
float: left;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
border: 1px solid #ccc;
margin: 5px;
}
.btn{
margin: 0 10px;
color: #fff;
background-color: #000;
display: inline-block;
padding: 1px 6px;
/*margin-bottom: 0;*/
font-size: 13px;
font-weight: normal;
line-height: 1.5;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn:hover,.btn:focus{
color: #fff;
}
span:hover{
cursor: pointer;
}
.hover{
background-color: #000000;
color: #fff;
}
html代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/pagination.css"/>
<script src="js/jquery-1.11.3.js"></script>
<title></title>
</head>
<body>
<div>
<ul id="demoContent">
</ul>
<!--分页层-->
<div id="pages">
</div>
</div>
<script src="js/pagination.js"></script>
<script>
var datas=[
{"did":1,"name":"习总书记会见韩国总统朴槿惠(图)","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":2,"name":"中美元首杭州会晤的成果清单公布","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":3,"name":"李克强出席东亚峰会传递什么信号？","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":4,"name":"中国在G20开出了药：就这19个字 能拯救世界","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":5,"name":"昨晚全世界都被杭州美哭了(图)","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":6,"name":"许达哲任湖南省代理省长(图/简历)","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":7,"name":"工信部回应徐玉玉案：个别电信企业罔顾社会责任","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":8,"name":"国产新型森林灭火弹首飞试验成功(图)","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":9,"name":"印度“藏人难民”处境艰难 为生计冒充其他民族","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":10,"name":"韩媒：朝鲜向半岛东部海域发射3枚弹道导弹","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":11,"name":"外媒：杜特尔特宣布菲律宾进入“无法律状态”","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":12,"name":"男生摆999个柚子表白师姐遭拒 柚子被抢光(图)","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":13,"name":"东北这个学校的开学典礼堪比阅兵 还有飞行方阵","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":14,"name":"现场：上百河马群大战百余条鳄鱼群 到底哪方赢了？","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":15,"name":"G20 国宴菜单曝光 四道杭帮菜与张裕葡萄酒绝配","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":16,"name":"舒淇摄影师还原拍婚纱全过程 新娘唯一要求竟是…","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":17,"name":"徐峥带7岁女儿游泳 好爸爸一路背包还拍照","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":18,"name":"越南在南海搞大动作，美国急喊停","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},
{"did":19,"name":"一图看懂马云如何报KFC一箭之仇","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},
{"did":20,"name":" 凤凰新闻客户端 积分换礼","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},
{"did":21,"name":"杨洋靠的不只是这张“初恋脸”！","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"}
];
var options={
id:"pages",//显示分页层按钮的id
showcount:5,//记录显示列表的数量
shownum:3,//记录点击按钮显示个数
data:datas,//要处理的数据
callback:function(data){
var cHtml="";
for(var i=0;i<data.length;i++){
cHtml+="<li>"+ data[i].name+"</li>";//处理数据
}
$("#demoContent").html(cHtml);//将数据增加到页面中
}
};
pageObj.init(options);
</script>
</body>
</html>
js代码
var pageObj={
showCount:0,//记录显示列表的数量
showNum:0,//记录点击按钮显示
NUM:0,//测试分页总的显示数量
clickNum:0,//记录点击的次数
clickPage:1,//页面的点击默认为第一页
DATA:null,//保存传过来的数据
ID:null,//包存分页层的id
init:function(options){
this.ID=options.id;
this.showCount=options.showcount;
this.showNum=options.shownum;
this.DATA=options.data;
this.NUM=this.DATA.length%this.showCount==0?this.DATA.length/this.showCount:parseInt(this.DATA.length/this .showCount)+1;
this.viewPage();
this.addPageNum();
this.clickLeft();
this.clickRight();
this.shouClick();
this.endClick();
this.clickSpan();
},
//设置分页按钮及显示按钮的个数
addPageNum:function(){
var html=‘<div class="lf"><button id="shou" type="button" class="btn">首页</button><span id="left"><<</span></div><div class="lf" id="mid">‘;
for(var i=0;i<this.NUM;i++){
if(i==0){
html+="<span i=‘"+(i+1)+"‘ class=‘hover‘>"+(i+1)+"</span>";
}else{
html+="<span i=‘"+(i+1)+"‘>"+(i+1)+"</span>";
}
}
html+=‘</div> <div class="lf"><span id="right">>></span><button id="wei" type="button" class="btn">尾页 </button></div>‘;
$("#"+this.ID).html(html);
var width=parseInt(this.showNum)*(parseInt($("#mid>span").css("width"))+10);//10位span的margin值
$("#mid").css("width",width);
},
//点击右侧按钮
clickRight:function(){
var me=this;
$("#right").click(function(){
me.clickNum<me.NUM- me.showNum&&me.clickNum++;
if(me.clickNum>0){
$("#mid>span:eq("+ (me.clickNum-1)+")").hide();
$("#mid>span:eq("+ (me.clickNum)+")").show().attr("class","hover").siblings().removeClass();
}
me.clickPage=me.clickNum+1;
me.viewPage();
});
},
//点击左侧按钮
clickLeft:function(){
var me=this;
$("#left").click(function(){
me.clickNum>0?me.clickNum--:me.clickNum=0;
$("#mid>span:eq("+me.clickNum+")").show().attr("class","hover").siblings().removeClass();
me.clickPage=me.clickNum+1;
me.viewPage();
});
},
//点击分页数字
clickSpan:function(){
var me=this;
$("#mid>span").click(function(){
$(this).attr("class","hover").siblings().removeClass();
me.clickPage=$(this).attr("i");
me. viewPage();
})
},
//点击首页
shouClick:function(){
var me=this;
$("#shou").click(function(){
me.clickNum=0;
$("#mid>span").show();
$("#mid>span:eq("+0+")").attr("class","hover").siblings().removeClass();
me.clickPage= 1;
me.viewPage();
})
},
//点击尾页
endClick:function(){
var me=this;
$("#wei").click(function(){
me.clickNum= me.NUM- me.showNum;
for(var k=0;k<me.clickNum;k++){
$("#mid>span:eq("+k+")").hide();
}
$("#mid>span:eq("+(me.NUM-1)+")").show().attr("class","hover").siblings().removeClass();
me.clickPage= me.NUM;
me. viewPage();
})
},
//页面显示功能
viewPage:function(){
var cHtml="";
if(this.clickPage==this.NUM){
var result=this.DATA.slice((this.clickPage-1)* this.showCount,this.DATA.length);
options.callback(result);
}
else{
var result=this.DATA.slice((this.clickPage-1)*this.showCount,(this.clickPage-1)*this.showCount+this .showCount);
options.callback(result);
}
}
};
其实引入js后配置只需两步
1.var options={
id:"pages",//显示分页层按钮的id
showcount:5,//记录显示列表的数量
shownum:3,//记录点击按钮显示个数
data:datas,//要处理的数据
callback:function(data){
var cHtml="";
for(var i=0;i<data.length;i++){
cHtml+="<li>"+ data[i].name+"</li>";//处理数据
}
$("#demoContent").html(cHtml);//将数据增加到页面中
}
};
2.pageObj.init(options);
只需两步,您就可以使用本插件了,还等什么,你帮我找问题吧
以上是关于超简单实用的前端分页---jquery插件的主要内容，如果未能解决你的问题，请参考以下文章