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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
实例讲解React 组件
Jul 07 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 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
数据库查询记录php 多行多列显示
2009/08/15 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
jQuery实现跨域
2015/02/03 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
JavaScript File分段上传
2016/03/10 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
动态创建类实例代码
2009/10/07 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
python optparse模块使用实例
2015/04/09 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
python求质数的3种方法
2018/09/28 Python
python实现经典排序算法的示例代码
2021/02/07 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
高职教师岗位职责
2013/12/24 职场文书
初中校园广播稿
2014/02/02 职场文书
酒店营销策划方案
2014/02/07 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Nginx速查手册及常见问题
2022/04/07 Servers