js+css实现的简单易用兼容好的分页


Posted in Javascript onDecember 30, 2013

效果:
js+css实现的简单易用兼容好的分页 
html:

<div id="page"></div>

用法:
var total = 310; 
var pageNo = 1; 
var pageCount = 31;//共有多少页 
var pageSize = 10; 
var actionName = "list.action"; 
var otherParam = "&name='www'&order='time'"; 
$(function(){ 
paginate();//分页} 
);

css:
#page{ 
font-size: 14px; 
clear: both; 
padding-top: 1.45em; 
white-space: nowrap; 
} 
#page a{ 
background: white; 
border: 1px solid #E7ECF0; 
display: inline-block; 
height: 22px; 
line-height: 22px; 
margin-right: 5px; 
text-align: center; 
text-decoration: none; 
vertical-align: middle; 
width: 23px; 
} 
#pagePre,#pageNext{ } 
.pageCurrent{ 
font-weight: bold; 
}

js:
function mcPaginate(){ var $pageDiv = $("#page"); 
actionName = actionName + "?pageSize="+pageSize; 

if(typeof otherParam != 'undefined' && otherParam != ""){ 
actionName = actionName + otherParam; 
} 
$pageDiv.append("第"+pageNo+"页/共"+pageCount+"页"); 
//上一页 
if(pageNo > 1){ 
var hf = actionName + "&pageNo="+(pageNo-1); 
$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"上一页"+"</a>"); 
}; 
if(pageCount <= pageSize){ 
for(var i=0; i < pageCount; i++){ 
var hf = actionName + "&pageNo="+(i+1); 
if(pageNo == (i+1)){//当前页 
$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+pageNo+"</a>"); 
}else{ 
$pageDiv.append("<a href='"+hf+"'>"+(i+1)+"</a>"); 
}; 
}; 
}else{ 
for(var i=0; i < pageSize; i++){ 
var midIndex = 0; 
if(pageSize%2 == 0){ 
midIndex = pageSize/2 - 1; 
}else{ 
midIndex = pageSize/2; 
} 
var num = -midIndex; 
var showPageNum = pageNo+i+num; 

if(showPageNum > 0 && showPageNum <= pageCount){ 
var hf = actionName + "&pageNo="+showPageNum; 
if(pageNo == showPageNum){//当前页 
$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+showPageNum+"</a>"); 
}else{ 
$pageDiv.append("<a href='"+hf+"'>"+showPageNum+"</a>"); 
}; 
}; 
}; 
} 
//下一页 
if(pageNo < pageCount){ 
var hf = actionName + "&pageNo="+(pageNo+1); 
$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"下一页"+"</a>"); 
}; 
$pageDiv.append("转到"+"<input type='text' class='goNum' style='width:30px;' name='goNum'>页<input type='button' name='goButton' class='goButton' value='确定'>"); 
$(".goButton").click(function(){ 
var goNum = $(".goNum").val(); 
if(goNum!=""){ 
window.location.href = actionName + "&pageNo="+goNum; 
} 
}); 
};
Javascript 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
canvas绘制折线路径动画实现
May 12 Javascript
jquery复选框全选/取消示例
Dec 30 #Javascript
jquery动态添加option示例
Dec 30 #Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 #Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 #Javascript
使用js如何实现全选与全不选
Dec 30 #Javascript
javascript操作css属性
Dec 30 #Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 #Javascript
You might like
非常不错的MySQL优化的8条经验
2008/03/24 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
linux 下selenium chrome使用详解
2020/04/02 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
大学生求职中的自我评价
2013/10/01 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
员工工作表现自我评价
2015/03/06 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python