超简单实用的前端分页---jquery插件

author author     2022-08-03     670

关键词:

首先,谈谈分页,目前我所了解的分页有两种,前端分页跟后台分页.

  简单说说前端分页.是通过前端技术拿到所有的数据,在前端分页处理;

  而后台分页是通过前端操作,给后台返回不同的值,再由后台返回所对应的数据.

最近,下载了很多前端分页插件.感觉性价比不是模糊不清,就是显示不是自己想要的,所以想自己动手写一个属于自己的插件

这是一个面向对象思想的插件.第一次用面向对象的思想,肯定有很多不足的地方.希望能互相讨论,一起上进.

技术分享

 

这是效果图.看起来一般,但是他的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+css)

...上搜索了大量的音乐播放器插件后,终于找到了一款上手简单,并且效果不错的插件,该音乐播放器插件是通过Jquery+Css实现的,下面就是全部代码,只要遵循下面的步骤,一定可以实现(文章末尾可查看效果图)一、目录结构二、导入jquery... 查看详情

超实用的音乐播放器插件(jquery+css)

...上搜索了大量的音乐播放器插件后,终于找到了一款上手简单,并且效果不错的插件,该音乐播放器插件是通过Jquery+Css实现的,下面就是全部代码,只要遵循下面的步骤,一定可以实现(文章末尾可查看效果图)一、目录结构二、导入jquery... 查看详情

6月份那些最实用的jquery插件专辑

...pt库,jQuery用于文档处理、事件处理、动画和Ajax交互非常简单,学习曲线也很平坦。2016年6月的jQuery插件专辑里,我们选择一些最好的和有用的jQuery插件分享给大家。您可能感兴趣的相关文章Web前端开发人员和设计师必读精华文... 查看详情

超好用的一个jquery分页器-jpaginate

jpaginate是一个自带滑动动画效果的jQuery分页插件,用户可以通过单击或只是悬停在箭头上的使页码滑动显示。你可以用下面的方式调用插件:$(elementID).paginate() 您可以通过一下属性来配置插件:count:页面总数start:默认选中... 查看详情

使用jquery开发datatable分页表格插件(代码片段)

...习了jquery插件开发之后,渐渐地也自己去尝试着开发一些简单的插件,之前已经开发了手风琴、选项卡,今天和大家介绍一下这个datatable分页表格插件。  我们先讲解使用,再分析插件的实现方式。 1、引入jquery库和插件... 查看详情

vscode超实用插件推荐,让你的开发效率火力全开(代码片段)

辅助开发类:1. VeturVUE开发必备插件1.语法高亮,包括vue/htmlcss/sass/scss/less/stylusjs/ts2.语义高亮,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件3.语法错误检查,包括CSS/SCSS/LESS/Javascript/TypeSc... 查看详情

前端插件实现图片懒加载

...,可是是基于jQuery,对于移动端可能不太实用。一个非常简单实用叫echo的插件,3k左右特别适合移动端使用。步骤如下:1、在页 查看详情

前端超实用网站

参考技术A1.在线PS【在线PS】PS软件网页版,ps在线图片处理工具photopea-稿定设计PS2.免费矢量图库iconfont-阿里巴巴矢量图标库3.echarts超多例子Gallery4.免费高清背景图BeautifulFreeImages&Pictures|Unsplash5.ueditor二次开发批注GitHub-kangzj/ueditor-p... 查看详情

jquery实用美化input上传组建

...件  (5)  简要教程jquery-filestyle是一款可以简单实用的表单文件上传域美化jQuery插件。该插件可以将表单的文件上传域转换为类似Bootstrap按钮组的样式。它提供了大量的data属性来控制文件上传域的样式,可以自定义... 查看详情

jquery分页插件twbspagination

...。当然了还有其他的分页插件,感觉上这个插件还是比较简单易用的。步骤一:建立page.jsp页面,引用jquery.twbsPagination.js,page.js  <scriptsrc="<%=basePath%>js/jquery.twbsPagination.js"></script>  查看详情

超实用的jquery小技巧(代码片段)

JQuery是一个JavaScript库,她极大的简化了我们对JavaScript的编程。今天我们总结了下平常项目中用到的一些小技巧,仅供参考。1、替换元素//替换元素$(document).ready(function()$("#id").replaceWith(‘<p>Ihavebeenrepaced</p>‘));2、延时加... 查看详情

猿创征文|超实用的前端开发工具分享(代码片段)

...color#0000FF多一些不为什么的坚持多一些不为什么的坚持超实用的前端开发工具分享前言🍭代码编辑器--Vscode①拥有强大的键盘快捷键②强大的插件系统🎯截图工具--Snipaste①悬浮截屏,实现多屏办公②截图记忆功能③... 查看详情

前端之jquery(代码片段)

...的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。jQue 查看详情

实用的npm插件(软件)

1.http-server (简单搭建http服务器)2.cssnano (css多功能优化工具)PS:比uncss功能更全。3.Prepack (Js专业优化工具)4.Gulp (简单的前端自动化构建工具)PS:Gulp插件    gulp-html-replace(将多个css与js外链合并)   查看详情

简单的jquery插件开发方法

...件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在 查看详情

前端之旅nginx快速入门

...础与开发工具【前端之旅】手把手教你安装VSCode并附上超实用插件指南【前端之旅】HTML大总结【前端之旅】CSS三万字总结【前端之旅】JavaScript学习笔记【前端之旅】Web前端发展简史 查看详情

php分页分页类简单实用

<? //为了避免重复包含文件而造成错误,加了判断函数是否存在的条件: if(!function_exists(pageft)){ //定义函数pageft(),三个参数的含义为: //$totle:信息总数; //$displaypg:每页显示信息数,这里设置为默认是20;... 查看详情

php分页分页类简单实用

<? //为了避免重复包含文件而造成错误,加了判断函数是否存在的条件: if(!function_exists(pageft)){ //定义函数pageft(),三个参数的含义为: //$totle:信息总数; //$displaypg:每页显示信息数,这里设置为默认是20;... 查看详情