首先HTML部分首先需要引入jquery
.
div里面是渲染页码的位置,pageCount是总页数,current 是当前页数,backFn点击回调的页面
css部分
js部分demo.js
(function($){
function init(dom, args){
console.log(dom, args)
if(args.current <= args.pageCount){
fillHtml(dom, args);
bindEevent(dom, args);
}else{
alert('请输入正取的页码')
}
};
// 页面渲染
function fillHtml(dom, args) {
// 上一页
$('.page').html('');
if(args.current > 1){
dom.append('<a href="#" class="prevPage">上一页</a>');
}else{
dom.remove('.prevPage');
dom.append('<span class="disabled">上一页</span>');
}
// 中间页数
// 第一页
if(args.current !==1 && args.current >=4 && args.pageCount !== 4){
dom.append('<a href="#" class="num">1</a>')
}
if(args.current -2 > 2 && args.pageCount > 5) {
dom.append('<span>...</span>');
}
// 中间连续页
var start = args.current -2;
var end = args.current + 2;
for(; start <= end; start++){
if(start <= args.pageCount && start >= 1){
if(start == args.current){
dom.append('<a href="#" class="current">'+ start +'</a>')
}else{
dom.append('<a href="#" class="num">'+ start +'</a>')
}
}
}
// 最后一页
if(args.current +2 < args.pageCount -1 && args.pageCount > 5) {
dom.append('<span>...</span>');
}
if(args.current !== args.pageCount && args.current < args.pageCount -2 && args.pageCount !== 4) {
dom.append('<a href="#" class="num">'+ args.pageCount +'</a>')
}
// 下一页
if(args.current < args.pageCount){
dom.append('<a href="#" class="nextPage">下一页</a>')
}else{
dom.remove('.prevPage');
dom.append('<span class="disabled">下一页</span>')
}
};
// 分页逻辑处理
function bindEevent(dom, args) {
dom.on('click', '.num',function(){
var cur = parseInt($(this).text());
changePage(dom,args,cur)
})
dom.on('click', '.prevPage',function(){
var cur =parseInt(dom.find('.current').text())
changePage(dom,args,cur -1)
})
dom.on('click', '.nextPage',function(){
var cur =parseInt(dom.find('.current').text())
changePage(dom,args,cur + 1)
})
};
// 回调渲染
function changePage(dom,args,page){
fillHtml(dom,{current:page,pageCount:args.pageCount});
args.backFn(page);
}
// jQuery里边的表达是方法
$.fn.extend({
createdPage:function(options){
var args = $.extend({
pageCount:5,
current:1,
backFn:function(){}
},options)
// 入口函数
init(this, args)
}
})
})(jQuery)