jquery动态分页效果堪比时光网


Posted in Javascript onSeptember 25, 2014

最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享。分页效果与时光网的差不多。

先在aspx页面放置一个<div class="pageDivs"></div> ,这个是用来存放分页的。

然后建一个page.js文件,具体代码如下(js中用到的css类是自己设置的,这里就不给出了,具体的大家可以自己设置一下css样式):

$(document).ready(function(){

var pageCount=0;//总页数,在数据处理的函数里设定
//////////////////////右部按钮分页显示 

function right(pageCount,limit,rlimit){

var html="";

if(parseInt(pageCount)-limit>=rlimit){

for(var i=parseInt(pageCount)-rlimit+1; i<=parseInt(pageCount); i++){

html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}

}

else{

for(var i=parseInt(limit)+1; i<=pageCount; i++){

html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}

}

return html;

} 

//////////////////////////首页,尾页,上一页,下一页 

function changeState(pageIndex,pageCount){

var $button1=$("div.pageDivs").find("#Button1");//上一页

var $button2=$("div.pageDivs").find("#Button2");//下一页

var $first=$("div.pageDivs").find("#First");//首页

var $last=$("div.pageDivs").find("#Last");//尾页

if(parseInt(pageIndex)==1){

$first.css("display","none");

$button1.css("display","none");}

else{

$first.css("display","inline");

$button1.css("display","inline");

$first.attr("page",1);

$button1.attr("page",parseInt(pageIndex)-1);}

if(parseInt(pageIndex)==pageCount){

$button2.css("display","none");

$last.css("display","none");}

else{

$last.css("display","inline");

$button2.css("display","inline");

$last.attr("page",pageCount);

$button2.attr("page",parseInt(pageIndex)+1);}
}

////////////////////////////////span动态分页 左边显示的页码个数,右边显示的页码个数,要求limit>rlimit

function span(pageCount,pageIndex,limit,rlimit){

var isContinue=true;//指示是否继续执行函数

var html="<a id='First' href='#' >|<</a><a id='Button1' href='#' ><</a>";

var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//指示分页码可以变动的次数

if(pageCount!=0&&pageCount!=1){

if(pageCount<=limit){

for(var i=1; i<=pageCount; i++){

html+="<a page="+i+" leaf='leaf'>"+i+"</a>"}

}

else{

if(parseInt(pageIndex)<(limit-2)){

for(var i=1; i<=limit; i++){

html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}

html+="...";

html+=right(pageCount,limit,rlimit);

}

else{

if(parseInt(pageIndex)%(limit-2)==0){

if(parseInt(pageIndex)/(limit-2)<=change&&parseInt(pageIndex)-1+parseInt(limit)-1<=parseInt(pageCount)-parseInt(rlimit)){

for(var i=parseInt(pageIndex)-1; i<parseInt(pageIndex)-1+limit; i++){

html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}

html+="...";

html+=right(pageCount,limit,rlimit);

}

else{

for(var i=1; i<=rlimit; i++){

html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}

html+="...";

var rest=parseInt(pageCount)-parseInt(rlimit);

if(rest<limit){

for(var i=parseInt(rlimit)+1; i<=parseInt(pageCount); i++){

html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}

}

else{

var start=parseInt(pageCount)-parseInt(limit)+1;

for(var i=start; i<=pageCount; i++){

html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}

}

}


}

else{

html=$("div.pageDivs").html();

$("div.pageDivs").html(html);

isContinue=false;

}

}
}

}

if(isContinue){

html+="<a id='Button2' href='#' >></a><a id='Last' href='#' >>|</a>";

$("div.pageDivs").html(html);}

changeState(pageIndex,pageCount);

$("div.pageDivs").find("a[page=" + parseInt(pageIndex) + "]:visible").removeAttr("href").removeClass("disabled").addClass("current").siblings("a[page:visible").removeClass("current").addClass("disabled").attr("href", "#");

}
function page(pageIndex){
/////////////这里放你具体的数据显示,使用ajax动态加载处理数据
pageCount="通过数据处理获得的页面总数";
span(pageCount,pageIndex,7,2);//对分页效果进行调用,这里设置左边显示7个页码,右边显示2个页码。
}
//////////////////////////////为页码绑定事件
$("div.pageDivs").find("a:visible").live("click",function(){

var result=$(this).attr("page");

if((typeof $(this).attr("leaf"))!= 'undefined'){

$(this).removeAttr("href").removeClass("disabled").addClass("current").siblings().removeClass("current").addClass("disabled").attr("href","#");}
page(result);

});

});

这样就行了,以上分页的算法是可以封装的,与具体的项目没关系,可以通用。
Javascript 相关文章推荐
JavaScript arguments 多参传值函数
Oct 24 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
javascript实现评分功能
Jun 24 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
浅析js预加载/延迟加载
Sep 25 #Javascript
深入了解Node.js中的一些特性
Sep 25 #Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 #Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 #Javascript
JS小游戏之宇宙战机源码详解
Sep 25 #Javascript
JS小游戏之极速快跑源码详解
Sep 25 #Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 #Javascript
You might like
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
php中socket的用法详解
2014/10/24 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python实现合并字典的方法
2015/07/07 Python
python安装与使用redis的方法
2016/04/19 Python
Python排序算法实例代码
2017/08/10 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
Linux面试题LINUX系统类
2015/11/25 面试题
2014年两会学习心得体会
2014/03/17 职场文书
教师个人自我评价范文
2014/04/13 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
高一新生军训方案
2014/05/12 职场文书
教师先进个人材料
2014/12/17 职场文书
百年校庆感言
2015/08/01 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
vue elementUI批量上传文件
2022/04/26 Vue.js