JQ利用jPages.js实现完美分页

原创
2014/01/21 14:34
阅读数 6.4K

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ利用jPages.js实现完美分页</title>
<script src="js/jQuery.1.8.2.min.js"></script>
<script src="js/jPages.js"></script>
<script>
    /* when document is ready */
    $(function(){
   
        /* initiate the plugin */
        $("div.holder").jPages({
            containerID  : "itemContainer",
   first: '首页',
   last: '尾页',
   previous: '上页',
   next: '下页',
   perPage: 1,
   startPage: 1,
   startRange: 2,
    midRange: 3,
    endRange: 2,
   animation: 'wobble',
   keyBrowse: true,
   callback    : function( pages, items){
      
      $("#page-panel").html("当前页面:" + pages.current);
      $("#page-pane2").html("页面总数:" + pages.count);
      $("#page-pane3").html("总数量:" + items.count);
       $("#page-pane4").html("每页数量:" + items.count/pages.count);


   }
        });
   
    });
</script>
 <style type="text/css">
  h2 a{
   color: #5DB0E6;
   text-shadow: 0 0 10px #5DB0E6;
  }
  
        .holder {
      margin: 15px 0;
   text-align:right;
     }
   
     .holder a {
      font-size: 14px;
      cursor: pointer;
      margin: 0 5px;
      color: #505050;
     }
   
     .holder a:hover {
      background-color: #222;
      color: #fff;
     }
   
     .holder a.jp-previous { margin-right: 15px; }
     .holder a.jp-next { margin-left: 15px; }
   
     .holder a.jp-current, a.jp-current:hover {
      color: #5DB0E6;
      font-weight: bold;
   text-shadow: 1px 1px #505050;
     }
   
     .holder a.jp-disabled, a.jp-disabled:hover {
      color: #bbb;
     }
   
     .holder a.jp-current, a.jp-current:hover,
     .holder a.jp-disabled, a.jp-disabled:hover {
      cursor: default;
      background: none;
     }
   
     .holder span { margin: 0 5px; }
 </style>

</head>

<body>
 <ul id="itemContainer">
 <li>2321321313123</li>
 <li>2321321313123</li>
 <li>2321321313123</li>
 <li>2321321313123</li>
 <li>2321321313123</li>
 
 
</ul>


<div class="holder" style="float:left"></div>
<div style="float:left;margin: 15px 2px;">
<span id="page-panel"></span>
<span id="page-pane2"></span>
<span id="page-pane3"></span>
<span id="page-pane4"></span>
</div>

 

</body>
</html>

完美下载地址:http://download.csdn.net/detail/niwsmbulai1989/6870449

演示地址:http://runjs.cn/detail/cdxfiez6

               http://sandbox.runjs.cn/show/cdxfiez6

展开阅读全文
打赏
0
12 收藏
分享

作者的其它热门文章

加载中
赵立成博主

引用来自“山哥”的评论

分页没有什么完美不完美的说法,呵呵

网上有,但是不全,有关Jpages分页的,都不全,这个比较很全
2014/01/22 08:45
回复
举报
分页没有什么完美不完美的说法,呵呵
2014/01/21 21:54
回复
举报
更多评论
打赏
2 评论
12 收藏
0
分享
返回顶部
顶部