自己编写JQuery扩展分页插件
2016-07-30 12:11
756 查看
背景
公司分页插件用到了kkpagerhttps://github.com/pgkk/kkpager
缺点：不是绑定Dom节点的初始化方式，单页面只能使用一个分页插件，假如一个页面有多个分页需求就不行了，前端给出来的解决方案是复制多份，假如有100个分页呢？难道复制100份？
故让前端基于原有的样式重写了一个HTML分页Dom，我在此基础上修改
前端给过来的Html内容如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="pager.css" /> </head> <body> <div class="pageBox"> <span> <!--<a href="javascript:void(0);" title="首页">首页</a> <a href="javascript:void(0);" title="上一页">上一页</a> <a href="javascript:void(0);" title="第一页">1</a>--> <span title="首页" class="disabled">首页</span> <span title="上一页" class="disabled">上一页</span> <span title="第一页" class="curr">1</span> <a href="javascript:void(0);" title="第二页">2</a> <a href="javascript:void(0);" title="第三页">3</a> <a href="javascript:void(0);" title="第四页">4</a> <a href="javascript:void(0);" title="第五页">5</a> <a href="javascript:void(0);" title="第六页">6</a> <span>...</span> <a href="javascript:void(0);" title="下一页">下一页</a> <a href="javascript:void(0);" title="尾页">尾页</a> </span> <span> 当前第 <span class="colorRed">1</span> 页/共<span>6</span>页 转到第<input type="text" value="" class="gopage"/>页 </span> </div> </body> </html>
功能说明
JQuery拓展插件功能说明：
1、插件使用在Ajax无刷新数据加载和分页的情况
2、自动忽略中间页面
使用说明：
1、Head里面加载Css和JS
<link rel="stylesheet" href="pager.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js" ></script>
2、中间Body加上
<div class="pageBox">
<span class="pageSpan"></span>
</div>
3、body结束后，加载JS
<script type="text/javascript" src="pager.js" ></script>
4、初始化分页
<script>
$(function() {
//分页
$(".pageSpan").createPage({
pageIndex:8,
totalPage:22,
backFn:function(pageIndex){
console.log(pageIndex);
}
});
});
</script>page.js
/**
* @Description 分页插件，使用该插件，必须放在底部，等Dom节点渲染完毕才能使用
* @Author Nick
* @Date 2016/07/30
* @Version 1.0
*/
(function($) {
var pager = {
init : function(obj, page) {
return (function() {
pager.fillHtml(obj, page);
pager.bindEvent(obj, page);
})();
},
//填充Html
fillHtml : function(pageSpan, page) {
return (function() {
pageSpan.empty();
//首页 上一页
if(page.pageIndex > 1) {
pageSpan.append('<a href="javascript:;" title="首页" class="firstPage">首页</a>');
pageSpan.append('<a href="javascript:;" title="上一页" class="prevPage">上一页</a>');
} else {
pageSpan.append('<span title="首页" class="disabled">首页</span>');
pageSpan.append('<span title="上一页" class="disabled">上一页</span>');
}
//中间页码
if(page.totalPage <= 3) {
for(var i = 1; i <= page.totalPage; i++) {
if(page.pageIndex == i) {
pageSpan.append('<span title="第'+i+'页" class="curr">'+i+'</span>');
} else {
pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
}
}
} else if(page.totalPage > 3) {
if(page.pageIndex - 2 <= 1 && page.pageIndex +2 <= page.totalPage) {
for(var i = 1; i <= (page.pageIndex +2); i++) {
if(page.pageIndex == i) {
pageSpan.append('<span title="第'+i+'页" class="curr">'+i+'</span>');
} else {
pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
}
}
pageSpan.append('<span>...</span>');
} else if(page.pageIndex - 2 > 1 && page.pageIndex +2 >= page.totalPage) {
pageSpan.append('<span>...</span>');
for(var i = (page.pageIndex - 2); i <= page.totalPage; i++) {
if(page.pageIndex == i) {
pageSpan.append('<span title="第'+i+'页" class="curr">'+i+'</span>');
} else {
pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
}
}
} else if(page.pageIndex - 2 <= 1 && page.pageIndex +2 >= page.totalPage) {
for(var i = 1; i <= page.totalPage; i++) {
if(page.pageIndex == i) {
pageSpan.append('<span title="第'+i+'页" class="curr">'+i+'</span>');
} else {
pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
}
}
} else if(page.pageIndex - 2 > 1 && page.pageIndex +2 <= page.totalPage) {
pageSpan.append('<span>...</span>');
for(var i = (page.pageIndex - 2); i <= (page.pageIndex + 2); i++) {
if(page.pageIndex == i) {
pageSpan.append('<span title="第'+i+'页" class="curr">'+i+'</span>');
} else {
pageSpan.append('<a href="javascript:;" class="tcdNumber" title="第'+i+'页">'+i+'</a>');
}
}
pageSpan.append('<span>...</span>');
}
}
//下一页、尾页
if(page.pageIndex != page.totalPage) {
pageSpan.append('<a href="javascript:;" title="下一页" class="nextPage">下一页</a>');
pageSpan.append('<a href="javascript:;" title="尾页" class="endPage">尾页</a>');
} else {
pageSpan.append('<span title="上一页" class="disabled">下一页</span>');
pageSpan.append('<span title="尾页" class="disabled">尾页</span>');
}
pageSpan.append('<span>当前第 <span class="colorRed">'+page.pageIndex+'</span> 页/共<span>'+page.totalPage+'</span>页');
})();
},
//绑定事件
bindEvent : function(obj, page) {
//第几页
return (function() {
//数字点击事件
obj.off('click', 'a.tcdNumber');
obj.off('click', 'a.prevPage');
obj.off('click', 'a.nextPage');
obj.off('click', 'a.firstPage');
obj.off('click', 'a.endPage');
obj.on('click', 'a.tcdNumber', function() {
var pageIndex = parseInt($(this).html());
pager.fillHtml(obj, {"pageIndex":pageIndex, "totalPage":page.totalPage});
if(typeof(page.backFn == "function")) {
page.backFn(pageIndex);
}
});
//前一页点击事件
obj.on('click', 'a.prevPage', function() {
var pageIndex = parseInt(obj.children('span.curr').html());
pager.fillHtml(obj, {"pageIndex":pageIndex-1, "totalPage":page.totalPage});
if(typeof(page.backFn == "function")) {
page.backFn(pageIndex-1);
}
});
//下一页点击事件
obj.on('click', 'a.nextPage', function() {
var pageIndex = parseInt(obj.children('span.curr').html());
pager.fillHtml(obj, {"pageIndex":pageIndex+1, "totalPage":page.totalPage});
if(typeof(page.backFn == "function")) {
page.backFn(pageIndex+1);
}
});
//首页
obj.on('click', 'a.firstPage', function() {
pager.fillHtml(obj, {"pageIndex":1, "totalPage":page.totalPage});
if(typeof(page.backFn == "function")) {
page.backFn(1);
}
});
//尾页
obj.on('click', 'a.endPage', function() {
pager.fillHtml(obj, {"pageIndex":page.totalPage, "totalPage":page.totalPage});
if(typeof(page.backFn == "function")) {
page.backFn(page.totalPage);
}
});
})();
}
}
//扩展JQuery
$.fn.createPage = function(options) {
var page = $.extend({
pageIndex : 1,
totalPage : 10,
backFn : function(p) {
}
}, options);
pager.init(this, page);
}
})(jQuery);pager.css
.pageBox{
text-align: center;
margin: 20px auto;
color: #999;
font-size: 14px;
}
.pageBox a{
float: none;
border: 1px solid #d5d5d5;
height: 28px;
line-height: 28px;
padding: 0 9px;
display: inline-block;
cursor: pointer;
background: #fff;
text-decoration: none;
color: #333;
margin-right: 5px;
}
.pageBox a:hover{
border-color: #999999;
}
.pageBox .colorRed{
color: red;
}
.pageBox .gopage{
width: 36px;
height: 22px;
line-height: 22px;
color: #999;
text-align: center;
margin-left: 1px;
margin-right: 1px;
border: 1px solid #c3c3c3;
position: relative;
left: 0px;
top: 0px;
outline: none;
}
.pageBox .curr{
background: none repeat scroll 0 0 #c3c3c3;
color: #fff;
height: 30px;
line-height: 30px;
padding: 0 10px;
z-index: 999;
margin-right: 5px;
display: inline-block;
}
.pageBox .disabled{
float: none;
display: inline-block;
padding: 0 9px;
margin-right: 5px;
border: 1px solid #d5d5d5;
background-color: #FFF;
color: #DFDFDF;
line-height: 28px;
}页面效果：
欢迎拍砖指正和优化升级等！
联系人：Nick 953374957
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript 学习笔记之二：编写自己的jQuery扩展分页插件(分享yQuery)
- 自己动手编写jQuery滚动新闻(jQuery News Ticker)插件
- 编写自己的jQuery插件简单实现代码
- 编写自己的jquery插件
- 分享一个自己动手写的jQuery分页插件
- [JQuery]分页插件jQuery pager plugin功能扩展
- 自己动手编写的jquery插件，模仿搜狐汽车图片库展示效果
- 编写自己的JQUERY插件
- 基于jquery扩展漂亮的CheckBox(自己编写)
- 如何编写自己的jquery插件
- 分享一个自己动手写的jQuery分页插件
- 编写jquery扩展插件
- 编写自己的jquery插件
- 扩展编写jquery插件的方法
- 编写jquery扩展插件
- 编写jQuery插件来扩展checkbox
- jquery编写自己的插件
- 编写自己的jquery插件
- 自己编写Jquery弹出层插件，多种自定义...不断更新中...
- 自己写的一个jQuery分页插件