<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>
分享到:
相关推荐
PHP+jQuery+Ajax无刷新分页加搜索
Ajax无刷新分页Jquery 可以设置自己的分页样式,利用ashx接受事件请求,值得一学
JqueryAjax 无刷新分页 带数据库 直接可运行 pageTest.asp js封装 简化代码
jQuery+Ajax+PHP无刷新分页
实现了获取评论无刷新,发表评论无刷新,www.sendawangluo.com页面获取评论时显示loading加载效果jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示,...
Ajax无刷新分页示例源码 程序介绍: 程序使用jquery方法提交请求,处理后将数据库绑定到页面中。 Ajax无刷新分页示例源码 程序介绍: 程序使用jquery方法提交请求,处理后将数据库绑定到页面中。 Ajax无...
利用jquery实现的ajax无刷新分页以及排序,支持多种格式无刷新更换。
jquery无刷新分页、排序 利用jquery实现的ajax无刷新分页以及排序,支持多种格式无刷新更换,数据库采用的是Sql2000自带的NorthWind数据库 数据库控制使用的是SqlHelper
jquery+json的无刷新分页 jquery+json的无刷新分页 jquery+json的无刷新分页 jquery+json的无刷新分页
真正的AJAX无刷新分页,真正的AJAX无刷新分页!
thinkphp+ajax无刷新分页 本人在百度文库中下载的
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access 只用来玩玩.所以就用Access数据库了 jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回...
使用myeclipse开发的jQuery加上struts的ajax无刷新分页,一个完整的demo,经测试,可运行。里面的数据是通过自己的拼凑的JSON数据来实现的分页。
jquery Json Ajax搜索与分页效果代码,无刷新操作的一个范例,特别是无刷新分页,很多朋友都很喜欢采用,配合Json,这是一个非常常用的方法,希望通过本示例让你对jQuery和Json的使用有一个更深入的了解。
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回两个值给用户进行自定义操作) 删除,...
基于Jquery+Ajax+Json实现分页显示附效果图