js+ajax 无刷新分页
2013-07-08 17:55
399 查看
我这个实现的是一个小页面显示7页。点击第七页的时候跳出7-14页。以此类推。因为这个页面实现的功能远比下面的方法多。所以我只是草草的删减了一些东西。虽然文章粗陋。，这毕竟是我自己的成长过程。毕竟是真实的我。我想留下的是思路。而不是代码。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/newsxiao.css" rel="stylesheet" type="text/css" media="all" />
<title>歌曲列表</title>
<script src="js/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
.onblurcss
{
background-color:#72bce6;
}
.mid
{
text-align:center;
margin:0 auto;
font-size:12px;
font-weight:bold;
}
</style>
<script type="text/javascript">
var cur = 0;
var curbl = 0;
var Msg;
var curPage = 1;
var whePge = "";//分页条件
var pageCount;//每页显示的数量
function GetXmlHttpObject() {
var xmlHttp = null;
try {
xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
};
//首次加载时候用的。将查询条件以及页码提交给GetPage.aspx，GetPage.aspx调用存储过程查询数据
function Check(code, pageindex) {
changecss(code);//每次点击某个标签的时候改变该标签的样式
var xmlHttp = GetXmlHttpObject();
//指定回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
m = xmlHttp.responseText;
var div = document.getElementById("screen");
div.innerHTML = m;
GetPageCount(code);//获得所有的页数
}
}
}
};
//初始化xmlhttprequst
xmlHttp.open("POST", "GetPage.aspx", true);
//设置头部
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送数据
var data = "code=" + escape(code) + "&pageindex=" + escape(pageindex);
xmlHttp.send(data);
};
///点击页码或者上一页下一页的时候的根据页码和查询条件分页的。因为当时这个项目的这个页面有其他的功能，所以为了方便我写了两个方法
function Check1(code, pageindex) {
changecss(code);
addColor();
if (isserch == 1) {
code =searchText;
}
var xmlHttp = GetXmlHttpObject();
//指定回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
m = xmlHttp.responseText;
var div = document.getElementById("screen");
div.innerHTML = m;
for (var j = 0; j < 100; j++) {
var tempcode1;
var tempcode1obj = document.getElementById("code" + j);
if (tempcode1obj != null) {
tempcode1 = tempcode1obj.value;
}
for (var k = 0; k < arrPL.length; k++) {
var tempcode;
var tempstate;
if (arrPL[k] != null) {
tempcode = arrPL[k].code;
tempstate = arrPL[k].state;
}
var tempimg = document.getElementById(tempcode);
if (tempimg != null) {
if (tempcode == tempcode1) {
if (tempstate == 1) {
tempimg.src = "images/xiazai.gif";
}
else if (tempstate == 2) {
tempimg.style.display = "none";
}
else if (tempstate == 0) {
tempimg.src = "images/cross.png";
}
}
}
}
}
}
};
//初始化xmlhttprequst
xmlHttp.open("POST", "GetPage.aspx", true);
//设置头部
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送数据
var data = "code=" + escape(code) + "&pageindex=" + escape(pageindex);
xmlHttp.send(data);
};
///根据查询条件确定每个标签能分多少页
function GetPageCount(code) {
var xmlHttp = GetXmlHttpObject();
//指定回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
pageCount = xmlHttp.responseText;
CheckCount();
}
};
//初始化xmlhttprequst
xmlHttp.open("POST", "GetPageCount.aspx", true);
//设置头部
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送数据
var data = "code=" + escape(code);
xmlHttp.send(data);
};
function changecss(id) {
for (var i = 1; i < 10; i++) {
var li = document.getElementById("cate" + i);
if (i == id) {
whePge = id;
li.setAttribute("class", "left_xz");
li.setAttribute("className", "left_xz");
}
else {
li.setAttribute("class", "left_z");
li.setAttribute("className", "left_z");
}
}
};
///根据点击的页码实现分页
function GetPage(pageindex) {
curPage = pageindex;//更新当前保存的页码
var pagecount = parseInt(pageCount / 13);
if (curPage % 7 == 0 && pagecount > curPage) {
var fenye = document.getElementById("fenye");
var html = "<a href='#' title='首页' onclick='firstPage()'><<</a><a href='#' title='上一页' onclick='prePage();'>|<</a>";
var j = 0;
for (var i = curPage; i <= curPage + 7; i++) {
html += "<a href='#' onclick='GetPage(" + i + ")' id='num" + j + "'>" + i + "</a>";
j = j + 1;
}
html += "<a href='#' title='下一页' onclick='nxtPage()'>>|</a><a href='#' title='末页' onclick='lastPage()'>>></a>";
fenye.innerHTML = html;
}
Check1(whePge, curPage);
};
//点击首页的方法
function firstPage() {
Check(whePge, 1);
};
//点击最后一页的方法
function lastPage() {
var pageindex = parseInt(pageCount / 13);
curPage = pageindex;
Check1(whePge, pageindex);
};
///点击的页码改变颜色
function addColor() {
var as = document.getElementById("fenye").getElementsByTagName("a");
for (var i = 0; i < as.length; i++) {
var a = document.getElementById("num" + i);
var tempvalue = "";
if (a != null) {
if (document.all) {
tempvalue = a.innerText;
}
else {
tempvalue = a.textContent;
}
if (tempvalue == curPage) {
a.setAttribute("class", "onblurcss");
a.setAttribute("className", "onblurcss");
}
else {
a.setAttribute("class", "");
a.setAttribute("className", "");
}
}
}
}
//上一页
function prePage() {
var pagecount = parseInt(pageCount / 13);
if (curPage == 1) {
return;
}
if (curPage >= 7) {
var fenye = document.getElementById("fenye");
var html = "<a href='#' title='首页' onclick='firstPage()'><<</a><a href='#' title='上一页' onclick='prePage();'>|<</a>";
var j = 0;
for (var i = curPage - 6; i <= curPage; i++) {
html += "<a href='#' onclick='GetPage(" + i + ")' id='num" + j + "'>" + i + "</a>";
j = j + 1;
}
html += "<a href='#' title='下一页' onclick='nxtPage()'>>|</a><a href='#' title='末页' onclick='lastPage()'>>></a>";
fenye.innerHTML = html;
}
curPage = curPage - 1;
Check1(whePge, curPage);
}
//下一页
function nxtPage() {
var pagecount = parseInt(pageCount / 13);
if (curPage == pagecount) {
return;
}
else {
curPage = curPage + 1;
if (curPage % 7 == 0 && pagecount > curPage) {
var fenye = document.getElementById("fenye");
var html = "<a href='#' title='首页' onclick='firstPage()'><<</a><a href='#' title='上一页' onclick='prePage();'>|<</a>";
var j = 0;
for (var i = curPage; i <= curPage + 7; i++) {
html += "<a href='#' onclick='GetPage(" + i + ")' id='num" + j + "'>" + i + "</a>";
j = j + 1;
}
html += "<a href='#' title='下一页' onclick='nxtPage()'>>|</a><a href='#' title='末页' onclick='lastPage()'>>></a>";
fenye.innerHTML = html;
}
Check1(whePge, curPage);
}
}
///这个是判断当前是否是点击到了第7页用的。如果已经点击到了7的倍数。则显示下一个7页
function CheckCount() {
var tempPageCount = parseInt(pageCount / 13);
var fenye = document.getElementById("fenye");
if (tempPageCount != 0) {
var html = "<a href='#' title='首页' onclick='firstPage()'><<</a><a href='#' title='上一页' onclick='prePage();'>|<</a>";
if (tempPageCount > 7) {
tempPageCount = 7;
}
var j = 0;
for (var i = 1; i <= tempPageCount; i++) {
html += "<a href='#' onclick='GetPage(" + i + ")' id='num" + j + "'>" + i + "</a>";
j = j + 1;
}
html += "<a href='#' title='下一页' onclick='nxtPage()'>>|</a><a href='#' title='末页' onclick='lastPage()'>>></a>";
fenye.innerHTML = html;
}
else {
fenye.innerHTML = "";
}
};
</script>
</head>
<body onload="Check('1','1');">
<div class="left_nav">
<ul>
<li class="left_z" id="cate1"><a href="###" onclick="Check('1','1')">最新歌曲</a></li>
<li class="left_z" id="cate8"><a href="###" onclick="Check('8','1')">网络歌曲</a></li>
<li class="left_z"id="cate2"><a href="###" onclick="Check('2','1')">幸福喜庆</a></li>
<li class="left_xz" id="cate3"><a href="###" onclick="Check('3','1')">情歌对唱</a></li>
<li class="left_z" id="cate4"><a href="###" onclick="Check('4','1')">经典老歌</a></li>
<li class="left_z" id="cate5"><a href="###" onclick="Check('5','1')">军 旅</a></li>
<li class="left_z" id="cate6"><a href="###" onclick="Check('6','1')">儿童歌曲</a></li>
<li class="left_z" id="cate7"><a href="###" onclick="Check('7','1')">校园歌曲</a></li>
</ul>
</div>
<div class="fengye" id="fenye">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/newsxiao.css" rel="stylesheet" type="text/css" media="all" />
<title>歌曲列表</title>
<script src="js/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
.onblurcss
{
background-color:#72bce6;
}
.mid
{
text-align:center;
margin:0 auto;
font-size:12px;
font-weight:bold;
}
</style>
<script type="text/javascript">
var cur = 0;
var curbl = 0;
var Msg;
var curPage = 1;
var whePge = "";//分页条件
var pageCount;//每页显示的数量
function GetXmlHttpObject() {
var xmlHttp = null;
try {
xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
};
//首次加载时候用的。将查询条件以及页码提交给GetPage.aspx，GetPage.aspx调用存储过程查询数据
function Check(code, pageindex) {
changecss(code);//每次点击某个标签的时候改变该标签的样式
var xmlHttp = GetXmlHttpObject();
//指定回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
m = xmlHttp.responseText;
var div = document.getElementById("screen");
div.innerHTML = m;
GetPageCount(code);//获得所有的页数
}
}
}
};
//初始化xmlhttprequst
xmlHttp.open("POST", "GetPage.aspx", true);
//设置头部
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送数据
var data = "code=" + escape(code) + "&pageindex=" + escape(pageindex);
xmlHttp.send(data);
};
///点击页码或者上一页下一页的时候的根据页码和查询条件分页的。因为当时这个项目的这个页面有其他的功能，所以为了方便我写了两个方法
function Check1(code, pageindex) {
changecss(code);
addColor();
if (isserch == 1) {
code =searchText;
}
var xmlHttp = GetXmlHttpObject();
//指定回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
m = xmlHttp.responseText;
var div = document.getElementById("screen");
div.innerHTML = m;
for (var j = 0; j < 100; j++) {
var tempcode1;
var tempcode1obj = document.getElementById("code" + j);
if (tempcode1obj != null) {
tempcode1 = tempcode1obj.value;
}
for (var k = 0; k < arrPL.length; k++) {
var tempcode;
var tempstate;
if (arrPL[k] != null) {
tempcode = arrPL[k].code;
tempstate = arrPL[k].state;
}
var tempimg = document.getElementById(tempcode);
if (tempimg != null) {
if (tempcode == tempcode1) {
if (tempstate == 1) {
tempimg.src = "images/xiazai.gif";
}
else if (tempstate == 2) {
tempimg.style.display = "none";
}
else if (tempstate == 0) {
tempimg.src = "images/cross.png";
}
}
}
}
}
}
};
//初始化xmlhttprequst
xmlHttp.open("POST", "GetPage.aspx", true);
//设置头部
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送数据
var data = "code=" + escape(code) + "&pageindex=" + escape(pageindex);
xmlHttp.send(data);
};
///根据查询条件确定每个标签能分多少页
function GetPageCount(code) {
var xmlHttp = GetXmlHttpObject();
//指定回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
pageCount = xmlHttp.responseText;
CheckCount();
}
};
//初始化xmlhttprequst
xmlHttp.open("POST", "GetPageCount.aspx", true);
//设置头部
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送数据
var data = "code=" + escape(code);
xmlHttp.send(data);
};
function changecss(id) {
for (var i = 1; i < 10; i++) {
var li = document.getElementById("cate" + i);
if (i == id) {
whePge = id;
li.setAttribute("class", "left_xz");
li.setAttribute("className", "left_xz");
}
else {
li.setAttribute("class", "left_z");
li.setAttribute("className", "left_z");
}
}
};
///根据点击的页码实现分页
function GetPage(pageindex) {
curPage = pageindex;//更新当前保存的页码
var pagecount = parseInt(pageCount / 13);
if (curPage % 7 == 0 && pagecount > curPage) {
var fenye = document.getElementById("fenye");
var html = "<a href='#' title='首页' onclick='firstPage()'><<</a><a href='#' title='上一页' onclick='prePage();'>|<</a>";
var j = 0;
for (var i = curPage; i <= curPage + 7; i++) {
html += "<a href='#' onclick='GetPage(" + i + ")' id='num" + j + "'>" + i + "</a>";
j = j + 1;
}
html += "<a href='#' title='下一页' onclick='nxtPage()'>>|</a><a href='#' title='末页' onclick='lastPage()'>>></a>";
fenye.innerHTML = html;
}
Check1(whePge, curPage);
};
//点击首页的方法
function firstPage() {
Check(whePge, 1);
};
//点击最后一页的方法
function lastPage() {
var pageindex = parseInt(pageCount / 13);
curPage = pageindex;
Check1(whePge, pageindex);
};
///点击的页码改变颜色
function addColor() {
var as = document.getElementById("fenye").getElementsByTagName("a");
for (var i = 0; i < as.length; i++) {
var a = document.getElementById("num" + i);
var tempvalue = "";
if (a != null) {
if (document.all) {
tempvalue = a.innerText;
}
else {
tempvalue = a.textContent;
}
if (tempvalue == curPage) {
a.setAttribute("class", "onblurcss");
a.setAttribute("className", "onblurcss");
}
else {
a.setAttribute("class", "");
a.setAttribute("className", "");
}
}
}
}
//上一页
function prePage() {
var pagecount = parseInt(pageCount / 13);
if (curPage == 1) {
return;
}
if (curPage >= 7) {
var fenye = document.getElementById("fenye");
var html = "<a href='#' title='首页' onclick='firstPage()'><<</a><a href='#' title='上一页' onclick='prePage();'>|<</a>";
var j = 0;
for (var i = curPage - 6; i <= curPage; i++) {
html += "<a href='#' onclick='GetPage(" + i + ")' id='num" + j + "'>" + i + "</a>";
j = j + 1;
}
html += "<a href='#' title='下一页' onclick='nxtPage()'>>|</a><a href='#' title='末页' onclick='lastPage()'>>></a>";
fenye.innerHTML = html;
}
curPage = curPage - 1;
Check1(whePge, curPage);
}
//下一页
function nxtPage() {
var pagecount = parseInt(pageCount / 13);
if (curPage == pagecount) {
return;
}
else {
curPage = curPage + 1;
if (curPage % 7 == 0 && pagecount > curPage) {
var fenye = document.getElementById("fenye");
var html = "<a href='#' title='首页' onclick='firstPage()'><<</a><a href='#' title='上一页' onclick='prePage();'>|<</a>";
var j = 0;
for (var i = curPage; i <= curPage + 7; i++) {
html += "<a href='#' onclick='GetPage(" + i + ")' id='num" + j + "'>" + i + "</a>";
j = j + 1;
}
html += "<a href='#' title='下一页' onclick='nxtPage()'>>|</a><a href='#' title='末页' onclick='lastPage()'>>></a>";
fenye.innerHTML = html;
}
Check1(whePge, curPage);
}
}
///这个是判断当前是否是点击到了第7页用的。如果已经点击到了7的倍数。则显示下一个7页
function CheckCount() {
var tempPageCount = parseInt(pageCount / 13);
var fenye = document.getElementById("fenye");
if (tempPageCount != 0) {
var html = "<a href='#' title='首页' onclick='firstPage()'><<</a><a href='#' title='上一页' onclick='prePage();'>|<</a>";
if (tempPageCount > 7) {
tempPageCount = 7;
}
var j = 0;
for (var i = 1; i <= tempPageCount; i++) {
html += "<a href='#' onclick='GetPage(" + i + ")' id='num" + j + "'>" + i + "</a>";
j = j + 1;
}
html += "<a href='#' title='下一页' onclick='nxtPage()'>>|</a><a href='#' title='末页' onclick='lastPage()'>>></a>";
fenye.innerHTML = html;
}
else {
fenye.innerHTML = "";
}
};
</script>
</head>
<body onload="Check('1','1');">
<div class="left_nav">
<ul>
<li class="left_z" id="cate1"><a href="###" onclick="Check('1','1')">最新歌曲</a></li>
<li class="left_z" id="cate8"><a href="###" onclick="Check('8','1')">网络歌曲</a></li>
<li class="left_z"id="cate2"><a href="###" onclick="Check('2','1')">幸福喜庆</a></li>
<li class="left_xz" id="cate3"><a href="###" onclick="Check('3','1')">情歌对唱</a></li>
<li class="left_z" id="cate4"><a href="###" onclick="Check('4','1')">经典老歌</a></li>
<li class="left_z" id="cate5"><a href="###" onclick="Check('5','1')">军 旅</a></li>
<li class="left_z" id="cate6"><a href="###" onclick="Check('6','1')">儿童歌曲</a></li>
<li class="left_z" id="cate7"><a href="###" onclick="Check('7','1')">校园歌曲</a></li>
</ul>
</div>
<div class="fengye" id="fenye">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax+Js+Dom+Json无刷新分页技术
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现 加上你的CSS完全可以与EXT媲美哦
- [原创]终极分页：Ajax+Js+Dom+Json无刷新分页技术叫板另一篇仿百度、Google分页算法
- Ajax根据异步刷新div内列表内容，带前台JS获取列表li数量分页
- js+ajax 无刷新分页
- Ajax+Js+Dom+Json无刷新分页技术
- Ajax+Js+Dom+Json无刷新分页技术
- Ajax+Js+Dom+Json无刷新分页技术
- Ajax+Js+Dom+Json无刷新分页技术
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页
- Ajax+Js+Dom+Json无刷新分页技术
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页
- php+ajax+jquery 实现无刷新分页以及js缓存
- 通过Ajax实现无刷新分页
- AjaxPro.dll,asp.net 前台js调用后台方法（无刷新）
- DataGrid无刷新分页(Ajax)
- 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求
- 使用jQuery.pager.js进行无刷新分页(当然想带刷新的话更简单)
- asp.net中利用Jquery+Ajax+Json实现无刷新分页
- SUI分页组件和avalon搞定ajax无刷新分页