str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
}
}
$('.'+pager.numBtnBox).html(str);
每个btn绑定请求数据页面跳转方法
$('.'+pager.numBtnBox+' button').each(function(i,v){
$(this).click(function(){
goPage(v.getAttribute('data-page'));
});
});按钮禁用
$('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
if(!page){//首页时 $('.'+pager.btnBox+' .first-btn').attr('disabled',true);
$('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
}
if(page==pager.maxCount-1){//尾页时
$('.'+pager.btnBox+' .last-btn').attr('disabled',true);
$('.'+pager.btnBox+' .next-btn').attr('disabled',true);
}六、首屏加载
createOtherBtn();//首屏加载一次非数字按钮即可
goPage();//请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage七、调用
paginationNick({
paginationBox:'pagination-nick',//分页容器--必填
mainBox:'main-box-nick',//内容盒子--必填
numBtnBox:'num-box-nick',//数字按钮盒子-- 必填
btnBox:'btn-box-nick',//按钮盒子 --必填
ipt:'page-ipt-nick',//input class-- 必填
goBtn:'go-btn-nick',//go btn class --必填
currentBtn:'active-nick'//当前按钮class name --必填
});需要注意的地方，注释都加上了！
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pagination-nick</title>
<style>
button{
padding:5px;
margin:5px;
}
.active-nick{
color:red;
}
input{
width:50px;
text-align:center;
}
</style>
</head>
<body>
<div class="pagination-nick"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// 定义一个分页方法，可多次调用
function paginationNick(opt){
// 参数设置
var pager={
paginationBox:'',//分页容器-- 必填
mainBox:'',//内容盒子--必填
numBtnBox:'',//数字按钮盒子-- 必填
btnBox:'',//按钮盒子 --必填
ipt:'',//input class-- 必填
goBtn:'',//go btn class --必填
currentBtn:'',//当前按钮class name --必填
pageCount:5,//每页显示几条数据
numBtnCount:3,//当前页左右两边各多少个数字按钮
currentPage:0,//当前页码data-page，首屏默认值
