分页

<div class="page"> <ul> <li><a>总数:3358</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">...168</a></li> <li><a href="">下一页</a></li> <li><a>1/168</a></li> </ul> </div>

居中

<div class="page page-center"> <ul> <li><a>总数:3358</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">...168</a></li> <li><a href="">下一页</a></li> <li><a>1/168</a></li> </ul> </div>

右对齐

<div class="page page-right"> <div class="page-other"><a href="" class="btn btn-yellow">保存排序</a></div> <ul> <li><a>总数:3358</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">...168</a></li> <li><a href="">下一页</a></li> <li><a>1/168</a></li> </ul> </div>

间隔

<div class="page page-mid page-right"> <ul> <li><a>总数:3358</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">...168</a></li> <li><a href="">下一页</a></li> <li><a>1/168</a></li> </ul> </div>

颜色




<div class="page page-red"> <ul> <li><a>总数:3358</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">...168</a></li> <li><a href="">下一页</a></li> <li><a>1/168</a></li> </ul> </div> <br> <div class="page page-yellow"> <ul> <li><a>总数:3358</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">...168</a></li> <li><a href="">下一页</a></li> <li><a>1/168</a></li> </ul> </div> <br> <div class="page page-green"> <ul> <li><a>总数:3358</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">...168</a></li> <li><a href="">下一页</a></li> <li><a>1/168</a></li> </ul> </div> <br> <div class="page page-info"> <ul> <li><a>总数:3358</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">...168</a></li> <li><a href="">下一页</a></li> <li><a>1/168</a></li> </ul> </div>

Js调用分页



<div class="page page-left" id="page1"></div> <br><br> <div class="page page-center" id="page2"></div> <script> $(function() { $("#page1").page( { totalnum:100,//总记录 totalpage:10,//总页数 thispage:1,//当前页数 num:5, callback:function(e) { //返回点击的页数 console.log(e.clickpage) } }); $("#page2").page( { totalnum:200,//总记录 totalpage:20,//总页数 thispage:1,//当前页数 num:5, callback:function(e) { //返回点击的页数 console.log(e.clickpage) } }); }) </script>