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正则表达式来格式化XML内容
Jul 04 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
Postman环境变量全局变量使用方法详解
Aug 13 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
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python杀死一个线程的方法
2015/09/06 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
Django  ORM 练习题及答案
2019/07/19 Python
python excel转换csv代码实例
2019/08/26 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
如何用python免费看美剧
2020/08/11 Python
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
分公司经理任命书
2014/06/05 职场文书
医药销售自我评价200字
2014/09/11 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python