头部内容 需要引用JQ;
<script src="jquery-1.11.1.min.js"></script> <script src="pmPagination.js"></script>
来一个简单是我样式
<style> .pagination a{ display:inline-block; padding: 5px 10px; text-align: center; background: #ccc; margin: 5px 10px; cursor: pointer; } .current{ background-color:#ff0000 !important; } </style>
body内容
<div>
<h2>分页的内容</h2>
</div>
<button class="prev1" href="javascript:;"><b></b>上一页的另外一个按钮</button>
<button class="next1" href="javascript:;"><b></b>下一页的另外一个按钮</button>
<div class="box">
</div>
js脚本的内容
var option={
viewedIndex : 5, //一次能看到的页码数
currentPage :1, //当前页码
totalPage : 20, //总共页数
//preVisible : true, //永远都显示上一页按钮,即使上一页按钮不可用
nextVisible : true,
gotoVisible : true,
edgeNum : 1,//尾页显示的个个数;
gotoPreText : '',
gotoText : " ",
canClick_pre : '<a class="prev" href="javascript:;"><b></b>上一页</a>',
canClick_pre_seo : '<a class="prev" href="{0}"><b></b>上一页</a>',
cannotClick_pre : '<span class="prev"><b></b>已经在第一页了</span>',
callbackFn:function(api){
//点击按钮的回调函数
currentNum=api;
getData(currentNum);
}
};
var currentNum=option.currentPage;
getData(currentNum);
$(".box").pmPagination(option);
$(".prev1").on("click",function(){
currentNum<=1?currentNum=1:currentNum-=1;
option.currentPage=currentNum;
$(".box").pmPagination(option);
getData(currentNum)
});
$(".next1").on("click",function(){
currentNum>=option.totalPage?currentNum=option.totalPage:currentNum+=1;
option.currentPage=currentNum;
$(".box").pmPagination(option);
getData(currentNum)
});
function getData(currentNum){
console.log("第"+currentNum+"页数据请求成功")
}
// console.log($(".box").pmPagination);