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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
JsonProperty 的使用方法详解
Oct 11 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
python系列 文件操作的代码
2019/10/06 Python
在django中自定义字段Field详解
2019/12/03 Python
django使用多个数据库的方法实例
2021/03/04 Python
视光学专业毕业生推荐信
2013/10/28 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
销售演讲稿范文
2014/01/08 职场文书
逃课上网检讨书
2014/02/20 职场文书
高三语文教学反思
2016/02/16 职场文书
入党申请书怎么写?
2019/06/11 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python