基于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 元素,包括文字.图像.表格.表单等元素 ...
随机推荐
- mac环境，搭建python+selenium遇到的问题
安装过程: 1.下载安装pip,下载并且解压文件(默认路径即可),打开终端,执行sudo python setup.py install,系统自带python,也可以不安装 2.执行 sudo eas ...
- <c>----<choose><when><otherwise>
<c:choose> <c:when test="${username== '1' && password== '2'}"> <jsp ...
- webots自学笔记（一）软件界面和简单模型仿真
本人是某非理工类某高校大四狗,由于毕设研究需要使用webots软件,在学习使用webots的过程花费了很多时间.由于这个软件基本没有什么中文资料,所以想把自己所学到的一些东西写下来,如有什么错误的地方 ...
- wemall doraemon中Android app商城系统解决左侧抽屉菜单和viewpager不能兼容问题
完美解决左侧抽屉菜单和viewpager不能兼容左右滑动的问题,可进行参考. WeMall-Client/res/layout/wemall_main_ui.xml </RadioGroup&g ...
- java构造函数使用方法总结
使用构造器时需要记住: 1.构造器必须与类同名(如果一个源文件中有多个类,那么构造器必须与公共类同名) 2.每个类可以有一个以上的构造器 3.构造器可以有0个.1个或1个以上的参数 4.构造器没有返回 ...
- Jmeter函数引用和函数重定向
在jmeter中的[选项]中选择[函数助手对话框]---这些函数可以高速有效的帮助我们开展自动化编写与校验!!!!!! 如图: 重点!!!本章的侧重点不讲函数的具体使用,函数具体的使用与java类似, ...
- Java基础二：常量池
目录: 自动装箱与拆箱 常量池 ==与equals()区别 1. 自动装箱与拆箱 Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成 ...
- python的with语句，超级强大
With语句是什么? 有一些任务,可能事先需要设置,事后做清理工作.对于这种场景,Python的with语句提供了一种非常方便的处理方式.一个很好的例子是文件处理,你需要获取一个文件句柄,从文件中读取 ...
- （转）python中的*args和**kw到底是个啥。看下面的例子就会懂了
先来看个例子: def foo(*args, **kwargs): print 'args = ', args print 'kwargs = ', kwargs print '----------- ...
- 基于模糊聚类和最小割的层次化网格分割算法（Hierarchical Mesh Decomposition）
网格分割算法是三维几何处理算法中的重要算法,具有许多实际应用.[Katz et al. 2003]提出了一种新型的层次化网格分割算法,该算法能够将几何模型沿着凹形区域分割成不同的几何部分,并且可以避免 ...