js分页工具实例


Posted in Javascript onJanuary 28, 2015

本文实例讲述了js分页工具的用法。分享给大家供大家参考。具体实现方法如下:

js代码部分:

/**  

 * 分页js  

 */  

var Page;  

  

(function(){  

        var Page = {version:"1.0",author:"liuxingmi"};  

        var showPage = 9;  

        Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){  

            var nav = '<ul class=\"pagination\" title=\"分页列表\">';  

                   nav += '<li class="totalAnnal">总记录数:<i id="totalRecord">' + totalRecord +'</i></li>';  

                   nav += '<li class="totalPage">总页数:<i id="totalPage">' + totalPage + '</i></li>';  

                   nav += '<li class="currentPage">当前页:<b id="pageNum">' + currentPage + '</b></li>';  

                   if(currentPage == 1){  

                       nav += '<li class="firstPage currentState"><a href="javascript:void(0);" id="firstPage" title="首页">首页</a></li>';  

                       nav += '<li class="previousPage currentState"><a href="javascript:void(0);" id="frontPage" title="前一页">前一页</a></li>';  

                   } else {                      

                       nav += '<li class="firstPage"><a href="javascript:' + func + '(1);" id="firstPage" title="首页">首页</a></li>';  

                       nav += '<li class="previousPage"><a href="javascript:' + func + '('+ (currentPage -1) +');" id="frontPage" title="前一页">前一页</a></li>';  

                   }  

                   nav += '<li id="num"><ol>';  

                         var start = currentPage - Math.floor(showPage/2);  

                         var end = currentPage + Math.floor(showPage/2);

                         if(end > totalPage){  

                             start -= (end - totalPage);  

                         }  

                           

                         if(start <= 0){  

                             start = 1;   

                         }  

                         if(currentPage < showPage && end < showPage){  

                            end = showPage;    

                         }  

                           

                         if(end > totalPage){  

                             end = totalPage;  

                         }  

                         for(var i = start; i <= end; i++){  

                             if(i == currentPage){  

                                 nav += '<li class="currentState"><a title="转到第1页" href="javascript:' + func + '(' + i + ');">' + i + '</a></li>';  

                             } else {                                  

                                 nav += '<li><a title="转到第1页" href="javascript:' + func + '(' + i + ');">' + i + '</a></li>';  

                             }  

                         }  

                           

                         nav += '</ol></li>';  

                         if(currentPage == totalPage){  

                             nav += '<li class="nextPage currentState"><a href="javascript:void(0);" id="nextPage" title="后一页">后一页</a></li>';  

                             nav +='<li class="lastPage currentState"><a href="javascript:void(0);" id="lastPage" title="尾页">尾页</a></i>';  

                         } else {  

                             nav += '<li class="nextPage"><a href="javascript:' + func + '('+ (currentPage + 1) +');" id="nextPage" title="后一页">后一页</a></li>';  

                             nav +='<li class="lastPage"><a href="javascript:' + func + '(' + totalPage + ');" id="lastPage" title="尾页">尾页</a></i>';  

                         }  

                         nav += '</ul>';      

            $("#" + divId).html(nav);             

        };  

       this.Page = Page;  

})();

css部分:

/*分页样式开始*/  

.pagination{  

 overflow:hidden;  

 margin:0 0 0 25px;  

 padding:10px 10px 6px 150px;  

 border-top:1px solid #c8c8c8;  

 _zoom:1;  

 text-align: center;  

}  

.pagination *{  

 display:inline;  

 float:left;  

 margin:0;  

 padding:0;  

 font-size:12px;  

}  

.pagination i{  

 float:none;  

 padding-right:1px;  

}  

.currentPage b{  

 float:none;  

 color:#f00;  

}  

.pagination li{  

 list-style:none;  

 margin:0 5px;  

}  

.pagination li li{  

 position:relative;  

 margin:-2px 0 0;  

 font-family: Arial, Helvetica, sans-serif  

}  

.firstPage a,.previousPage a,.nextPage a,.lastPage a{  

 overflow:hidden;  

 height:0;  

 text-indent:-9999em;  

 border-top:8px solid #fff;  

 border-bottom:8px solid #fff;  

}  

.pagination li li a{  

 margin:0 1px;  

 padding:0 4px;  

 border:3px double #fff;  

 +border-color:#eee;  

 background:#eee;  

 color:#06f;  

 text-decoration:none;  

}  

.pagination li li a:hover{  

 background:#f60;  

 border-color:#fff;  

 +border-color:#f60;  

 color:#fff;  

}  

li.firstPage{  

 margin-left:40px;  

 border-left:3px solid #06f;  

}  

.firstPage a,.previousPage a{  

 border-right:12px solid #06f;  

}  

.firstPage a:hover,.previousPage a:hover{  

 border-right-color: #f60;  

}  

.nextPage a,.lastPage a{  

 border-left:12px solid #06f;  

}  

.nextPage a:hover,.lastPage a:hover{  

 border-left-color:#f60;  

}  

.pagination li.lastPage{  

 border-right:3px solid #06f;  

}  

.pagination li li.currentState a{  

 position:relative;  

 margin:-1px 3px;  

 padding:1px 4px;  

 border:3px double #fff;  

 +border-color:#f60;  

 background:#f60;  

 color:#fff;  

}  

.pagination li.currentState,.currentState a,.currentState a:hover{  

 border-color:#fff #ccc;  

 cursor:default;  

}  

/*分页样式结束*/

调用方法:

Page.navigation("pageNav", 100, 10,  1, "xxxList");
<div id="pageNav"></div>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery选择头像并实时显示的代码
Jun 27 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
js制作简易年历完整实例
Jan 28 #Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 #Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 #Javascript
JavaScript插件化开发教程 (四)
Jan 27 #Javascript
JavaScript插件化开发教程 (三)
Jan 27 #Javascript
js实现简单随机抽奖的方法
Jan 27 #Javascript
JavaScript插件化开发教程 (二)
Jan 27 #Javascript
You might like
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
php 实现进制相互转换
2016/04/07 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
详解Python编程中time模块的使用
2015/11/20 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
大专毕业生自我评价分享
2013/11/10 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android