ajax分页实现效果
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
//分页的显示与隐藏
$(function () {
counts();
search(1);
$("#xifenye").click(function (a) {
$("#uljia").empty();
$("#xab").toggle();
//显示出的一共多少页
var uljia = $("#uljia");
var page = parseInt($("#xiye").html()); //获取当前的页数
var pages = parseInt($("#mo").html()); //获取当前的总页数
for (var i = 1; i <= pages; i++) {
var H = "<li onclick='fl(" + i + "," + pages + ")'>" + i + "</li>"; //添加一共多少页和点击事件
uljia.append(H);
}
scrolltop(page);
});
//分页的的首页和未页
$("#first").bind("click", function () {
var v = document.getElementById("xiye");
v.innerHTML = 1;
search(v.innerHTML);
scrolltop(v.innerHTML);
});
$("#last").bind("click", function () {
var v = document.getElementById("xiye");
var l = document.getElementById("mo");
v.innerHTML = l.innerHTML;
search(v.innerHTML);
scrolltop(v.innerHTML);
});
});
//使用ajax方式查询数据库的结果集中的数据条数
function counts() {
$.post("ajax/counts.ashx", function (d) {
//alert(d);
$("#mo").html(d);
});
}
//使用ajax方式查询数据库的结果集
function search(num) {
$.post("ajax/fenye.ashx", { page: num }, function (res) {
//alert(res);
var arr = eval(res);
Addli(arr);
});
};
//添加数据库信息
function Addli(arr) {
$("#content").find("li").remove();
for (var i = 0; i < arr.length; i++) {
//alert(arr[i].name);
$("#content").append("<li><span>" + arr[i].name + ":</span><span>" + arr[i].paraphrase + "</span></li>");
}
}
//点击分页显示的方法
function fl(p1, p2) {
//var p=p1;
$("#xiye").empty();
$("#xiye").html(p1); //给显示的页数赋值
search(p1);
}
//分页的的上一页和下一页
function topclick() {
var v = document.getElementById("xiye");
var num = v.innerHTML;
if (num > 1) {
num--;
v.innerHTML = num;
var hei = 25 * num - 25;
search(num);
$("#xab").scrollTop(hei);
}
}
function downclick() {
var pages = parseInt($("#mo").html()); //获取当前的总页数
var v = $("#xiye");
var num = parseInt(v.html());
if (num < pages) {
num = ++num;
v.html(num);
search(num);
scrolltop(num);
}
}
//滚动条
function scrolltop(top) {
var hei = 25 * top - 25;
$("#xab").scrollTop(hei);
}
</script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{margin:0 auto; font-size:12px; color:#666; font-family:"微软雅黑", Simsun;}
li{list-style:none;}
img{border:none;}
a, a:visited{text-decoration:none;}
.tong{ background:url(../images/images/sy-toubjing_03.gif) repeat-x 0px -11px; width:100%; height:40px;}
.wrap{ width:auto; max-width:320px; margin:0 auto;}
.center{ width:103%; margin:0 auto;}
/***************分页******************/
.fenye{ float:left; margin-top:10px; width:400px;}
.fenye ul{ float:left; margin-left:32px; }
.fenye ul li{ float:left; margin-left:5px;padding: 4px 6px; border:1px solid #ccc; font-weight:bold; cursor:pointer; color:#999;}
.fenye ul li a{ color:#999;}
.fenye ul li.xifenye{ width:80px; text-align:center; float:left; position:relative;cursor: pointer;}
.fenye ul li .xab{ float:left; position:absolute; width:39px; border:1px solid #ccc; height:123px; overflow-y: auto;overflow-x: hidden;top:-125px; background-color: #fff; display:inline;left:-1px; width:92px;}
.fenye ul li .xab ul{ margin-left:0; padding-bottom:0;}
.fenye ul li .xab ul li{ border:0; padding:4px 0px; color:#999; width:84px; margin-left:0px; text-align:center;}
</style>
</head>
<body>
<div class="top1">
<ul id="content">
</ul>
</div>
<div class="wrap" style="margin-top:500px;">
<div class="fenye">
<ul>
<li id="first">首页</li>
<li id="top" onclick="topclick()">上一页</li>
<li class="xifenye" id="xifenye">
<a id="xiye">1</a>/<a id="mo">40</a>
<div class="xab" id="xab" style="display:none">
<ul id="uljia">
</ul>
</div>
</li>
<li id="down" onclick="downclick()">下一页</li>
<li id="last">末页</li>
</ul>
</div>
</div>
</body>
</html>。