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 相关文章推荐
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
斜45度寻路实现函数
Aug 20 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
浅析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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
php生成mysql的数据字典
2016/07/07 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
vue实现固定位置显示功能
2019/05/30 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
jQuery实现日历效果
2020/09/11 jQuery
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
Python实现遍历数据库并获取key的值
2015/05/17 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python实现翻译word表格小程序
2020/02/27 Python
Keras loss函数剖析
2020/07/06 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
市场开发与营销专业求职信
2013/12/31 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
社区清明节活动总结
2014/07/04 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python