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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
Angular5.1新功能分享
Dec 21 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 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
1 Tube Radio
2021/03/02 无线电
php获取表单中多个同名input元素的值
2014/03/20 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
jquery常用操作小结
2014/07/21 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python 文件操作删除某行的实例
2017/09/04 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
linux系统都有哪些运行级别
2012/04/15 面试题
2014端午节活动策划方案
2014/01/27 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python