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

最新推荐文章于 2024-03-17 09:51:50 发布

chenzhui5294

最新推荐文章于 2024-03-17 09:51:50 发布

阅读量144

点赞数

原文链接：https://my.oschina.net/u/1179405/blog/194722

版权

<!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>