JQ利用jPages.js实现完美分页
<!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