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的地址栏射击游戏代码
Mar 10 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 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
jQuery 使用个人心得
2009/02/26 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
Python File(文件) 方法整理
2019/02/18 Python
python下载微信公众号相关文章
2019/02/26 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python 字符串格式化的示例
2020/09/21 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
大学竞选班长演讲稿
2014/04/24 职场文书
团日活动总结
2014/04/28 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
关于学习的演讲稿
2014/05/10 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
给老婆的保证书
2015/01/16 职场文书
幼师中班个人总结
2015/02/12 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
工作一年自我鉴定
2019/06/20 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书