ajax分頁教程的前端代碼，html部份我們就不講了．直接開始script中的內容．首先我們定義了4個全域變數，分別是：
all_page：總頁數，建立頁碼的根據
all_record：資料總條數，all_record/pagecount=all_page 得到總頁數
current_page：當前請求的頁碼．傳送給服務端
pagecount：每頁顯示的條數，傳送給服務端
<html>
<head>
<title>ajax資料分頁</title>
<style>
body{
font-size:12px;
}
table{
border-collaps教程e: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/網頁特效">
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);//擷取元素中的數字值，證明你要請求的是第幾頁
$("msg").innerhtml = "當前為第"+current_page+"頁";//提示資訊：當前請求的頁
}pagecount = $("edit_count").value;//擷取文字框的值
if(pagecount.length == 0){ //如果文字框為空白
pagecount = 5; //預設每頁顯示5條資料
}
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變數．
ajax.open("post","ajax_page.asp教程?action=read&pagecount="+pagecount+"& current_page="+current_page,true);//佈建要求方式，請求的網頁，url的action參數為read，非同步請求
ajax.onreadystatechange = function(){//你也可以這裡指定一個已經寫好的函數名稱
if(ajax.readystate == 4){//資料返回成功
if(ajax.status == 200){//http請求狀態代碼返回ok
var xmldata = ajax.responsexml;//以xml格式接收返回的資料，並儲存在xmldata變數裡
all_record = xmldata.getelementsbytagname("allrecord")[0].firstchild.nodevalue;
all_page = all_record / pagecount;
var page_list = $("page");
while(page_list.childnodes.length!=0){
page_list.removechild(page_list.childnodes[0]);
}
for(var i=0;i<math.ceil(all_page);i++){ //動態建立頁碼列表
var li = document.createelement("li");
li.innerhtml = i+1;//因為i以0開始，所以要+1顯示頁碼
li.onclick = function(e){read(e)};//為每個li的頁碼綁定單擊事件
page_list.appendchild(li);//將產生好的頁碼元素放到div裡
}
var list = xmldata.getelementsbytagname("list");//在返回的資料裡，擷取所有list標籤
if(list.length!=0){
var t = document.getelementbyid("a");//擷取展示資料的表格
while(t.rows.length!=0){ //在讀取資料時如果表格已存在行．一律刪除
t.removechild(t.rows[0]);
}
for(var i=0;i<list.length;i++){
var tr = t.insertrow(t.rows.length);//有幾個list就為表格增加幾行．
var td = tr.insertcell(0);//第一個儲存格存放資料編號
td.innerhtml = list[i].childnodes[0].firstchild.nodevalue;
var td = tr.insertcell(1);//第二個儲存格存放資料內容
td.innerhtml = list[i].childnodes[1].firstchild.nodevalue;
}
}
}
}
}
ajax.send(null);//提交請求，參數為null
}read();//運行read函數
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
