上次分享了一款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. JavaScript技巧总结和本地存储(一)

    类型检测 typeof 一般用于js的基本数据类型(undefined,number,string,boolean.注意null检测的结构是object)检测,引用类型检测不准确. instanceo ...

  2. Hadoop伪分布安装配置

    安装环境: 系统:Ubuntu 14.10   64bit hadoop:2.5.1 jdk:1.8.0_11 安装步骤: 一.安装JDK 安装 jdk,并且配置环境以及设置成默认 sudo gedi ...

  3. java程序员入门:英语好不好对编程到底有没有影响

    我想当码农,听说钱钱拿的多! 哦.是很有钱!么样? 可是我不会! 那你想么样?去学撒! 可是,我英语差-- 有多差??? 很差-- 那????? 关于英语水平对编程的影响,我们一起来看看啦!希望可以解 ...

  4. Jsp,Servlet初学总结

    一.Jsp 1. 指令: <%@page language="java" import="java.*" contextType="text/h ...

  5. 自定义cell设置现价,原价(加横线)

    原价,现价分别是连个label.这两个label不能直接限制死他们的宽度,因为他们的宽度不确定,而由于lable的特殊性,不设置它的宽度约束时,宽度取决于文字的内容,所以两个lable的约束设置好一些 ...

  6. ACM Fibonacci数 计算

    Fibonacci数 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 无穷数列1,1,2,3,5,8,13,21,34,55...称为Fibonacci数列,它可以递 ...

  7. server error in '/' applecation----Compiler Error Message: CS0016: Could not write to output file 'c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\xx' -- 'Access is denied

    今天在阿里云虚拟机上部署新站点后出现下面的错误:server error in '/' applecation Compiler Error Message: CS0016: Could not wr ...

  8. UITextField输入限制/小数/首位等

    - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementS ...

  9. 循环单词 java

    链接:https://www.nowcoder.com/questionTerminal/9d5fbe7750a34d0b91c73943f93b2d7d来源:牛客网如果一个单词通过循环右移获得的单词 ...

  10. Action的创建和配置

    计应134(实验班) 李佳鸿 Action类—Struts组件 在RequestProcessor类预处理请求时,在创建了Action的实例后,就调用自身的processActionPerform() ...