頭部內(nèi)容 需要引用JQ;
<script src="jquery-1.11.1.min.js"></script> <script src="pmPagination.js"></script>
來一個簡單是我樣式
分頁插件用到的圖片.jpeg
<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內(nèi)容
<div>
<h2>分頁的內(nèi)容</h2>
</div>
<button class="prev1" href="javascript:;"><b></b>上一頁的另外一個按鈕</button>
<button class="next1" href="javascript:;"><b></b>下一頁的另外一個按鈕</button>
<div class="box">
</div>
js腳本的內(nèi)容
var option={
viewedIndex : 5, //一次能看到的頁碼數(shù)
currentPage :1, //當前頁碼
totalPage : 20, //總共頁數(shù)
//preVisible : true, //永遠都顯示上一頁按鈕瘟判，即使上一頁按鈕不可用
nextVisible : true,
gotoVisible : true,
edgeNum : 1,//尾頁顯示的個個數(shù);
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>已經(jīng)在第一頁了</span>',
callbackFn:function(api){
//點擊按鈕的回調(diào)函數(shù)
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+"頁數(shù)據(jù)請求成功")
}
// console.log($(".box").pmPagination);
