html一次请求数据然后分页,Ajax读取数据之分页显示篇实现代码

我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心，然后我们再看实例效果．所谓的ajax分页与传统的数据分页，在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下，将请求的页码，和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据："ajax_page.asp?action=read&pagecount=3 & current_page=1"

在这段URL里，pagecount代表每页要显示几条数据，current_page代表要请求的页码．服务端就是根据这两个参数来传回你想要请求的数据．下面我们看下实例效果：

这是前端的ajax代码：

ajax数据分页

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;

}

默认显示每页为5条数据，你可以在下面文本框设置每页的显示条数

---

输入每页要显示的条数:

编号内容

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

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);//获取元素中的数字值，证明你要请求的是第几页

$("msg").innerHTML = "当前为第"+Current_page+"页";//