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 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 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
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python多任务及返回值的处理方法
2019/01/22 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
linux面试题参考答案(8)
2016/04/19 面试题
关于廉洁的广播稿
2014/01/30 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
小学同学聚会感言
2015/07/30 职场文书
小组组名及励志口号
2015/12/24 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
整理Python中常用的conda命令操作
2021/06/15 Python