Ajax读取数据之分页显示篇实现代码
2024-09-01 08:29:18
供稿：网友
我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心，然后我们再看实例效果．所谓的ajax分页与传统的数据分页，在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下，将请求的页码，和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据："ajax_page.asp?action=read&pagecount=3 & current_page=1"
在这段URL里，pagecount代表每页要显示几条数据，current_page代表要请求的页码．服务端就是根据这两个参数来传回你想要请求的数据．下面我们看下实例效果：
这是前端的ajax代码：
代码如下:
<html>
<head>
<title>ajax数据分页</title>
<style>
body{
font-size:12px;
}
table{
border-collapse:collapse;
}
li{
list-style:none;
border:1px solid;
width:20px;
height:20px;
text-align:center;
margin:5px;
padding:2px;
float:left;
cursor:pointer;
}
</style>
</head>
<body>
默认显示每页为5条数据，你可以在下面文本框设置每页的显示条数<hr/>
输入每页要显示的条数:<input id="edit_count" type="text" /> <input type="button" type="button" value="确定" onclick="Read()"/>
<table border="1"><!--该表格用来显示数据内容-->
<thead><tr><td>编号</td><td>内容</td></tr></thead>
<tbody id="a"></tbody>
</table>
<span id="msg" style="color:red"></span>
<br/>
<ul id="page"><!--页导航-->
</ul>
<script type="text/javascript">
var All_page;//总页数
var All_record;//总条数
var Current_page;//当前页
var PageCount;//每页显示的条数
function ajax_xmlhttp(){
//在IE中创建xmlhttpRequest,适用于IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循环创建基于IE浏览器的xmlhttp.结束
//如果非IE浏览器，则创建基于FireFox等浏览器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//获取元素函数
function $(elem){
return typeof elem == "string" ? document.getElementById(elem) : elem;
}
//读取数据函数
function Read(){
if(arguments.length!=0){//如果有参数传递过来，则证明你点击了某个页码
var e = arguments[0] || window.event; //标准化事件对象
var obj = e.target || e.srcElement; //获取事件对象,你点击的那个页码元素
Current_page = parseInt(obj.innerHTML);//获取元素中的数字值，证明你要请求的是第几页
