基于jquery 的分页插件，前端实现假分页效果
上次分享了一款jquery插件，现在依旧分享这个插件，不过上一次分享主要是用于regular框件，且每一页数据都是从后端获取过来的，这一次的分享主要是讲一次性获取完数据 然后手动进行分页。此需求基本上是和前端搜索挂钩的。所有的数据都在页面里只是展示的不同。这样前端搜索就能从全部数据中进行搜索，而不是尴尬的只能从某一页里进行搜索，不过这种需求一般都在数据量较小的情况下才会使用，毕竟搜索功能一般不是前端来实现的。
这次的插件依旧是 http://106.2.44.116/src/javascript/base/jquery.pagination.js这款插件。
至于这个框架的详细用法我就不再说了，上一篇里都写了，现在直接从实现假分页功能入手。
var list =[
{pic:"1",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"2",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"3",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"4",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"5",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"6",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"7",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"8",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"9",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"10",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"11",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"12",name:"zhang",number:"1234",section:"企业事业部"},
];
首先我们假定这组数据是从后端传来的全部数据
接下来定义一个新数组
var dataList =[];
我们假定需求为每页展示4条数据
则第一步初始化分页,具体配置信息见上一遍博客
$('.box').pagination({
totalData:12,//一共的条数
showData:4,//每页展示的条数
coping:true,
jump:true,
keepShowPN:true,
homePage:'首页',
endPage:'末页',
prevContent:'上页',
nextContent:'下页',
callback:function(api){
}
},function(api){
$('.now').text(api.getCurrent());
});
分页的效果为：（可自定义样式，在css文件中写即可，详细见上一篇）
第二步设置页面默认看见的四条信息，在整体回调函数中写
function(api){
$('.now').text(api.getCurrent());
for(var i=0;i<;i++){
$("<div class=\"conDv\">"+
"<div class=\"pic\">"+list[i].pic+"</div>"+
"<div class=\"name\">"+list[i].name+"</div>"+
"<div class=\"number\">"+list[i].number+"</div>"+
"<div class=\"section\">"+list[i].section+"</div>"+
"</div>").appendTo("#con");
dataList.push(list[i]);
}
});
现在默认的四条已经展示出来了，如图（样式自己定义即可）
第三步：点击分页操作时。在点击回调中写
callback:function(api){
$('.now').text(api.getCurrent());
api.getCurrent();
console.log((api.getCurrent()-1)*4+"到"+(api.getCurrent()-1)*4*2);
$("#con").text("");
if(api.getCurrent() == 1){
for(var i=0;i<;i++){
$("<div class=\"conDv\">"+
"<div class=\"pic\">"+list[i].pic+"</div>"+
"<div class=\"name\">"+list[i].name+"</div>"+
"<div class=\"number\">"+list[i].number+"</div>"+
"<div class=\"section\">"+list[i].section+"</div>"+
"</div>").appendTo("#con");
}
}else{
var next= (api.getCurrent()-1)*4*2;
if((api.getCurrent()-1)*4*2 >12){
next = 12;
}
for(var i= (api.getCurrent()-1)*4;i<next;i++){
$("<div class=\"conDv\">"+
"<div class=\"pic\">"+list[i].pic+"</div>"+
"<div class=\"name\">"+list[i].name+"</div>"+
"<div class=\"number\">"+list[i].number+"</div>"+
"<div class=\"section\">"+list[i].section+"</div>"+
"</div>").appendTo("#con");
}
}
}
其中第一页和最后一页要单独处理，不能用通用公式，否则会报错
至此一个简单的分页效果就完成了。效果如下，当点击第二页时，效果如下：
下面一段完整的代码仅供大家参考
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.pagination.js"></script>
<style>
#con{
width:100%;
}
.conDv{
width:200px;
height:300px;
float:left;
}
.conDv .pic,.conDv .name,.conDv .number,.conDv .section{
width:100%;
height:20px;
text-align:center;
line-height:20px;
}
.box{
position: absolute;
bottom:630px;
left:40px;
}
</style>
</head>
<body>
<div id="con"> </div>
<div class="box"> </div>
<script>
var list =[
{pic:"1",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"2",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"3",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"4",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"5",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"6",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"7",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"8",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"9",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"10",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"11",name:"zhang",number:"1234",section:"企业事业部"},
{pic:"12",name:"zhang",number:"1234",section:"企业事业部"},
];
var dataList=[]; $('.box').pagination({
totalData:12,
showData:4,
coping:true,
jump:true,
keepShowPN:true,
homePage:'首页',
endPage:'末页',
prevContent:'上页',
nextContent:'下页',
callback:function(api){
$('.now').text(api.getCurrent());
api.getCurrent();
console.log((api.getCurrent()-1)*4+"到"+(api.getCurrent()-1)*4*2);
$("#con").text(""); if(api.getCurrent() == 1){
for(var i=0;i<4;i++){
$("<div class=\"conDv\">"+
"<div class=\"pic\">"+list[i].pic+"</div>"+
"<div class=\"name\">"+list[i].name+"</div>"+
"<div class=\"number\">"+list[i].number+"</div>"+
"<div class=\"section\">"+list[i].section+"</div>"+
"</div>").appendTo("#con");
}
}else{
var next= (api.getCurrent()-1)*4*2;
if((api.getCurrent()-1)*4*2 >12){
next = 12;
}
for(var i= (api.getCurrent()-1)*4;i<next;i++){
$("<div class=\"conDv\">"+
"<div class=\"pic\">"+list[i].pic+"</div>"+
"<div class=\"name\">"+list[i].name+"</div>"+
"<div class=\"number\">"+list[i].number+"</div>"+
"<div class=\"section\">"+list[i].section+"</div>"+
"</div>").appendTo("#con");
}
} } },function(api){
$('.now').text(api.getCurrent());
for(var i=0;i<4;i++){
$("<div class=\"conDv\">"+
"<div class=\"pic\">"+list[i].pic+"</div>"+
"<div class=\"name\">"+list[i].name+"</div>"+
"<div class=\"number\">"+list[i].number+"</div>"+
"<div class=\"section\">"+list[i].section+"</div>"+
"</div>").appendTo("#con");
dataList.push(list[i]);
}
});
</script>
</body>
</html>
至此。一个假分页功能已经实现。希望可以给大家带来帮助
基于jquery 的分页插件，前端实现假分页效果的更多相关文章
- 基于jQuery的自定义插件：实现整屏分页转换的功能
动态创建jQuery插件 一.实现功能: 1.基本功能:自适应式整屏分页功能的实现 2.通过鼠标点击标签页转换分页,支持键盘上下左右键的转换分页,同样支持 鼠标滚轮上下滑动转换分页 3.切屏时的动画效 ...
- 基于jquery下拉列表树插件代码
分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <table width= ...
- 基于jQuery头像裁剪插件cropbox
今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...
- 基于jQuery的用户界面插件集合---EasyUI
easyui是一种基于jQuery的用户界面插件集合.为创建现代化,互动,JavaScript应用程序,提供必要的功能.使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以 ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- 基于layPage分页插件浅析两种分页方式
最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验 在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示 ...
- 基于jQuery的tooltips插件--poshytip
摘要: 分享一款在项目中使用的tooltips插件--poshytip,这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, ...
- 基于jQuery.i18n.properties实现前端网站语言多版本
我是参考播客做了个demo:http://blog.csdn.net/aixiaoyang168/article/details/49336709 jQuery.i18n.properties采用.p ...
- liMarquee – jQuery无缝滚动插件（制作跑马灯效果）
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
随机推荐
- SESSION 与 COOKIE的区别是
有以下几点 1.session是存在服务器端,cookie是存在客户端 2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,所以session安全性要比cookie ...
- 雪花降落CAEmitterLayer粒子效果
CAEmitterLayer 实现雪花效果 首先需要导入#import <QuartzCore/QuartzCore.h> /**在iOS 5中,苹果引入了一个新的CALayer子 ...
- 作为一名JAVA程序员应该有怎样的就业思维
想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,在面试之前到底需要准备哪些东西呢?面试时面试官想了解你的什么专业技能,以下都是一个合格JAVA软件工程师所要具备的. 一.专业技能 1.熟 ...
- http的几种请求的方式（Get、Post、Put、Head、Delete、Options、Trace和Connect）
http的这几种请求方式各有各的特点,适用于各自的环境.下面我就说说这些方式的各自特点: 1.Get:它的原理就是通过发送一个请求来取得服务器上的某一资源.获取到的资源是通过一组HTTP头和呈现数据来 ...
- Telnet 在win7 和 xp中的使用
telnet 默认在开启之后 监听23端口.最近在尝试使用这个服务 虽然很多机器默认是不开启telnet这个服务的 但是 万一能够碰到 也是为了自己以后能够熟练起来咯. telnet有服务器跟客户端之 ...
- yii2.0下拉列表的使用
第一种方法:ActiveForm 类的 dropDownList 方法(优点,默认使用yii的样式) 1.在控制器的方法里面 ,我们需要拿到数据,一定是 findAll() 或者是 all() 方法的 ...
- SQL AlawaysOn 之五：ISCSI共享磁盘
用于存放SQL数据库 1.安装服务 2.安装完成后要求重启计算机.添加该功能要配置计算机,如果是正式服务器,那种不能关机太久的服务器,请慎用. 重启之后看到文件和储存服务,击击进去 3.看到ISCSI ...
- 由一个简单需求到Linux环境下的syslog、unix domain socket
本文记录了因为一个简单的日志需求,继而对linux环境下syslog.rsyslog.unix domain socket的学习.本文关注使用层面,并不涉及rsyslog的实现原理,感兴趣的读者可以参 ...
- Moving to Express 4
http://expressjs.com/guide/migrating-4.html Moving to Express 4 Overview Express 4 is a breaking cha ...
- 从spring官网下载spring 架包
1.找到spring官网地址:http://spring.io/ 2.点击projects 3.点击springframework 4.点击图片