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 相关文章推荐
js Event对象的5种坐标
Sep 12 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
react路由配置方式详解
Aug 07 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
javascript中闭包closure的深入讲解
Mar 03 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
杏林同学录(六)
2006/10/09 PHP
深入PHP数据加密详解
2013/06/18 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP创建XML接口示例
2019/07/04 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
python中pass语句用法实例分析
2015/04/30 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
golang/python实现归并排序实例代码
2020/08/30 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
大学生志愿者感言
2014/01/15 职场文书
推荐信模板
2014/05/09 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
2015年司机工作总结
2015/04/23 职场文书
张丽莉观后感
2015/06/16 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python