首先,谈谈分页,目前我所了解的分页有两种,前端分页跟后台分页.
简单说说前端分页.是通过前端技术拿到所有的数据,在前端分页处理;
而后台分页是通过前端操作,给后台返回不同的值,再由后台返回所对应的数据.
最近,下载了很多前端分页插件.感觉性价比不是模糊不清,就是显示不是自己想要的,所以想自己动手写一个属于自己的插件
这是一个面向对象思想的插件.第一次用面向对象的思想,肯定有很多不足的地方.希望能互相讨论,一起上进.
这是效果图.看起来一般,但是他的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);
只需两步,您就可以使用本插件了,还等什么,你帮我找问题吧
时间： 2024-10-24 15:10:50