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);//獲取元素中的數字值，證明你要請求的是第幾頁
