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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
利用python如何处理nc数据详解
2018/05/23 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
python中图像通道分离与合并实例
2020/01/17 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
美发店5.1活动方案
2014/01/24 职场文书
车辆工程专业求职信
2014/04/28 职场文书
档案工作汇报材料
2014/08/21 职场文书
学习三严三实心得体会
2014/10/13 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
部门主管竞聘书
2015/09/15 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Golang map映射的用法
2022/04/22 Golang