jQuery模拟ajax无刷新分页效果
?
?
<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.onload=createPage;</script></head><body><div id="page"></div></body></html>