上次分享了一款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 的分页插件,前端实现假分页效果的更多相关文章

  1. 基于jQuery的自定义插件:实现整屏分页转换的功能

    动态创建jQuery插件 一.实现功能: 1.基本功能:自适应式整屏分页功能的实现 2.通过鼠标点击标签页转换分页,支持键盘上下左右键的转换分页,同样支持 鼠标滚轮上下滑动转换分页 3.切屏时的动画效 ...

  2. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  3. 基于jQuery头像裁剪插件cropbox

    今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...

  4. 基于jQuery的用户界面插件集合---EasyUI

    easyui是一种基于jQuery的用户界面插件集合.为创建现代化,互动,JavaScript应用程序,提供必要的功能.使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以 ...

  5. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  6. 基于layPage分页插件浅析两种分页方式

    最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验 在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示 ...

  7. 基于jQuery的tooltips插件--poshytip

    摘要: 分享一款在项目中使用的tooltips插件--poshytip,这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, ...

  8. 基于jQuery.i18n.properties实现前端网站语言多版本

    我是参考播客做了个demo:http://blog.csdn.net/aixiaoyang168/article/details/49336709 jQuery.i18n.properties采用.p ...

  9. liMarquee – jQuery无缝滚动插件(制作跑马灯效果)

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

随机推荐

  1. js三大家族offset,scroll,cliennt的区别

    offset偏移(返回的是number类型) offsetLeft:返回盒子距离左边的距离 offsetTop:返回盒子距离顶部的距离 offsetHeight:返回盒子的高度,包括border,pa ...

  2. 在 JavaScript 中 prototype 和 __proto__ 有什么区别

    本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...

  3. ASP提取字段中的图片地址

     Function RegImg(TheStr)     Dim RegEx     Set RegEx = New RegExp '建立正则表达对象.     RegEx.IgnoreCase =T ...

  4. 3856: Monster

    3856: Monster Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 351  Solved: 161[Submit][Status][Discuss ...

  5. [ZooKeeper.net] 3 ZooKeeper的分布式锁

    基于ZooKeeper的分布式锁 ZooKeeper 里实现分布式锁的基本逻辑: 1.zookeeper中创建一个根节点(Locks),用于后续各个客户端的锁操作. 2.想要获取锁的client都在L ...

  6. Python的字典dictionary

    创建: dict = {'Name': 'Zara', 'Age': 7, 'Class': 'First'};删除: del dict['Name']; # 删除键是'Name'的条目 dict.c ...

  7. Chapter 4. Working with Key/Value Pairs

    Chapter4 working with key/value pairs key/values pairs键值对是Spark中非常常见的一种数据类型(type),RDD有时经常操作键值对数据类型.第 ...

  8. SHA1l加密

    public static string SHA1Encrypt(string sourceText) { SHA1 sha = new SHA1CryptoServiceProvider(); AS ...

  9. trimpath javascript的学习

    TrimPath是javascript模板引擎. 这几天有一个项目涉及到trimpath这个框架,所以就花了一点时间研究了一下,这个框架和别的javascript框架不太一样的地方就是模板的概念,就是 ...

  10. Rsync的工作方式

    Rsync的工作方式(来自网络) 1)拷贝本地文件: 当SRC和DES路径信息中不包含冒号":"分隔符时,就启用这种工作模式: [root@cmmailapp1 /]# rsync ...