今天琢磨用一个分页插件来着;用的自取

头部内容 需要引用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内容

<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);