<html>
<head>
<title>jQuery模拟ajax无刷新分页效果 - Liehuo.Net</title>
<script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
body
{
font-size:12px;
color:#474747;
}
.pagenumber
{
border-style:solid;
border-width:1px;
border-color:Orange;
margin-left:10px;
margin-top:10px;
padding:4px;
text-align:center;
float:left;
cursor:hand;
background-color:White;
color:Black;
}
.pagenumberselected
{
background-color:#CCCCCC;
color:White;
}
</style>
<script type="text/javascript">
var totalPageCount = 54; //分页导航总页数
var pageSize = 10; //分页导航每页数
var currentPageIndex = 1; //分页导航当前页索引
function overPage(event) {
$(event.target)
.addClass("pagenumberselected");
}
function outPage(event) {
$(event.target)
.removeClass("pagenumberselected")
;
}
function selectPage(event) {
currentPageIndex = $(event.target).text();
createPage();
}
function createPage() {
if (totalPageCount < 1 || pageSize < 1) {
return;
}
$("#page").html("");
var start = currentPageIndex - (Math.ceil(pageSize / 2) - 1);
//限制开始页数，每页数小于总页数时
if (pageSize < totalPageCount) {
if (start < 1) {
start = 1;
}
else if (start + pageSize > totalPageCount) {
start = totalPageCount - pageSize + 1;
}
}
else {
start = 1;
}
var end = start + pageSize - 1;
//限制结束页数，当结束页数大于总页数时
if (end > totalPageCount) {
end = totalPageCount;
}
var newNumberStr;
for (var i = start; i <= end; i++) {
newNumberStr = "";
if (i == currentPageIndex) {
newNumberStr = "<div class=\"pagenumber pagenumberselected\">" + i + "</div>";
}
else {
newNumberStr = "<div class=\"pagenumber\">" + i + "</div>";
}
$("#page").append(newNumberStr);
}
//给所有项绑定事件
$(".pagenumber")
.bind("click", selectPage)
.hover(overPage, outPage)
;
//当前页不绑定事件
$(".pagenumberselected")
.unbind("click")
.unbind("mouseenter")
.unbind("mouseleave")
;
}
window.οnlοad=createPage;
</script>
</head>
<body>
<div id="page"></div>
</body>
</html>
3656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
