基于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 元素,包括文字.图像.表格.表单等元素 ...
随机推荐
- Java代码审查工具findbugs的使用总结
findbugs简介 Findbugs是一个Java代码静态分析工具,可以用它来检查源代码中可能出现的问题,以期尽可能在项目的初始阶段将代码问题解决. FindBugs检查的是类或者JAR文件即字节代 ...
- View的呈现(一)ActionResult
ActionResult Http是一个单纯采用请求/回复消息交换模式的网络协议,Web服务器在接收并处理来自客户端的请求后悔根据处理结果对请求予以回应.一般来说针对请求的处理最终体现在对目标Acti ...
- Palindrome Linked List leetcode
Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O(n) time ...
- Solr DateRangeField
Solr DateRangeField 是solr5.0 实现的一个feature. 关于 DateRangeField 支持日期查询如 date_field:[2016-03-23 TO 2017 ...
- 【转】Django HTTP请求的处理流程
Django 和其他 Web 框架的 HTTP 处理的流程大致相同,Django 处理一个 Request 的过程是首先通过中间件,然后再通过默认的 URL 方式进行的.我们可以在 Middlewar ...
- SignalR指定用户推送消息
一.首先,在MVC项目中安装SingalR包(SingalR2.0需要.net4.5以上,VS2010可以安装1.1.3版本,本例为VS2010+SignalR1.1.3). 打开工具-NuGet程序 ...
- C++11右值引用和std::move语句实例解析
关键字:C++11,右值引用,rvalue,std::move,VS 2015 OS:Windows 10 右值引用(及其支持的Move语意和完美转发)是C++0x将要加入的最重大语言特性之一.从实践 ...
- python应用部署--flask
首先必须吐槽一下,python应用部署简直就是有毒...太麻烦了.关键还不能成功部署. 网上很多教程都是说要用nginx和uwsgi.来来回回试了无数次都不行.于是乎,在某一个瞬间,灵感以来,发现了一 ...
- iwebshop中的增删改查
<?php class Text extends IController { public function hello() { $this->redirect('hello'); } p ...
- WebStorm里使用注意点
归纳一些我在使用webstorm里遇到的问题: 1.问题:文件出现红线,如图 解决方案:可能是由于语言版本的问题,改一下版本试试 2.快捷键:http://www.cnblogs.com/yeming ...