功能:
讀取數據庫內容的表格.讀取數據方式為ajax,分頁也是.代碼寫得不好.呵呵.供一些學習AJax的朋友參考參考.如有不妥請大家跟貼糾正.我會根據大家的提議不斷修正代碼.
目前還有一個小問題,如果有朋友有興趣幫我解決一下在下不勝感激
你翻到最後一頁的時候如果只有一行會出現空白和undefined.這個問題我試了很多方法一直沒有很妥當的解決.
注:下面一些地方出現笑臉表情的是 大寫的d
其實很多地方都可以根據ASP文件中輸出的字符來控制.目前還沒有往那方面完善.比如說一列顯示多少行等.
ASP頁面的代碼:
文件名:demo.ASP
[復制此代碼]CODE:
'下面這個Sub 是延遲用於調試AJax的loading
<%
Sub TimeDelaySeconds(DelaySeconds)
SecCount = 0
Sec2 = 0
While SecCount < DelaySeconds + 1
Sec1 = Second(Time())
If Sec1 <> Sec2 Then
Sec2 = Second(Time())
SecCount = SecCount + 1
End If
Wend
End Sub
TimeDelaySeconds(0)
%>
<%
Response.Expires = -9999
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "cache-ctrol","no-cache"
Response.Charset = "GB2312"
Set conn = Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("Database.mdb")
conn.Open connstr
%>
<%
set rs = server.createobject("adodb.recordset")
Sqlstr = "select * from UserData order by id"
rs.open Sqlstr,conn,1,1
rs.PageSize = 3
AllPage = rs.PageCount
Page = request.QueryString ("page")
'***********************判斷
if cint(page) =< 1 then
Page = 1
elseif cint(page) >= rs.PageCount then
Page = rs.PageCount
else
intpage = cint(page)
end if
'***************************
rs.AbsolutePage=page
Response.write AllPage&","&rs.AbsolutePage&","
for i = 1 to rs.PageSize
if rs.EOF or rs.BOF then exit for
Response.write rs(0)&","&rs(1)&","&rs(2)&","&rs(3)&","
rs.movenext
next
rs.close
Set rs = nothing
%>
AJax處理的頁面代碼
文件名:AJax.JS
[復制此代碼]CODE:
var request = false;
//------------------判斷浏覽器並建立對象----------------------------------------------------------------
try { //嘗試創建 XMLHttpRequest 對象
request = new XMLHttpRequest(); //---此對象將兼容除IE外大部分浏覽器!
} //-
catch (trymicrosoft) { //如果失敗 catch (trymicrosoft)
try { //嘗試使用較新版IE兼容的對象（Msxml2.XMLHTTP）
request = new ActiveXObject("Msxml2.XMLHTTP"); //---此對象將兼容老版本IE
} //-
catch (othermicrosoft) { //如果失敗 catch (othermicrosoft)
try { //嘗試使用較老版IE兼容的對象（Microsoft.XMLHTTP）
request = new ActiveXObject("Microsoft.XMLHTTP"); //---此對象將兼容新版本IE
} //-
catch (failed) { //如果失敗 catch (failed)
request = false; //request = false
alert("Object Error!");
}
}
}
defaultPages();
//-------------------------------------------------------------------------------------------------------------*/
//**********讀取數據***********************************************************
function defaultPages() {
var url = "Demo.ASP";
request.open("GET", url, true); //open方法 （"方式",url,是否異步）
request.onreadystatechange = updatePage; //判斷服務器處理的結果
request.send(null); //送出.
}
function selectPages(Method,Pages) {
//先刪除以前的數據
for(i=0;i<3;i++)
document.getElementById("MyTable").deleteRow();
//----------------
if (Method == "Previous"){
var PageTemp = document.getElementById("PageNow").value;
var PageNow = parseInt(PageTemp)-1;
//alert (PageNow);//debug
var url = "Demo.ASP?Page="+PageNow;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
else if (Method == "Next"){
var PageTemp = document.getElementById("PageNow").value;
var PageNow = parseInt(PageTemp)+1;
//alert (PageNow);//debug
var url = "Demo.ASP?Page="+PageNow;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
}
//***********服務器是否處理完成.**********************************************************************************
function updatePage() {
if (request.readyState <= 3){ //小於或等於狀態3----loading.
document.getElementById("Status").innerHtml = "Loading...";
document.getElementById("Pages").innerHtml = "Previous│Next";
}
if (request.readyState == 4){ //狀態4----完成.
if (request.status == 200) { //如果http狀態為200--當成功獲取獲取數據.
requestAllright();
}else{ //如果http狀態為404--http報錯.
document.getElementById("Status").innerHtml = "Error:" + request.status;
document.getElementById("Pages").innerHtml = "Previous│Next";
}
}
}
//***********處理完成-生成數據.**********************************************************************************
function requestAllright() {
var getStr = request.responseText;
var getValue = getStr.split(",");
var PageCount = getValue[0];
var PageNow = getValue[1];
var Contact = [
[getValue[2],getValue[3],getValue[4],getValue[5]],
[getValue[6],getValue[7],getValue[8],getValue[9]],
[getValue[10],getValue[11],getValue[12],getValue[13]]
];
for (var List=0;List<Contact.length;List++){
var MyTr = MyTable.insertRow(); //創建Tr標簽
for (var Cell=0;Cell<Contact[List].length;Cell++){ //Td循環
var MyTd = MyTr.insertCell(); //創建Td標簽
MyTd.innerHtml = Contact[List][Cell]; //給Td標簽插入內容
if (Cell == 0) //如果當前為每行的第一個Td
MyTd.id = "Number"; //賦予其ID為Number
}
}
//上一頁下一頁處的判斷,是否可以點擊******************************************************************************************
if (PageNow == PageCount){
document.getElementById("Pages").innerHtml = "<a href=Javascript:selectPages('Previous','0'); target=_self class=pagesTag>Previous</a>│Next"
}
else if (PageNow == 1){
document.getElementById("Pages").innerHtml = "Previous│<a href=Javascript:selectPages('Next','0'); target=_self class=pagesTag>Next</a>"
}
else if (PageNow != 1 || PageNow != PageCount){
document.getElementById("Pages").innerHtml = "<a href=Javascript:selectPages('Previous','0'); target=_self class=pagesTag>Previous</a>│<a href=Javascript:selectPages('Next','0'); target=_self class=pagesTag>Next</a>"
}
//上一頁下一頁處的判斷,是否可以點擊******************************************************************************************
document.getElementById("PageCount").value = PageCount;
document.getElementById("PageNow").value = PageNow;
document.getElementById("Status").innerHtml = "Done with!";
//alert(PageCount);//debug
//alert(PageNow);//debug
}
Html頁面的代碼
頁面名稱:List.htm
[復制此代碼]CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<html XMLns="http://www.w3.org/1999/xHtml">
<head>
<meta http-equiv="Content-Type" content="text/Html; charset=gb2312" />
<title>Dynamic of Table - Auntion - Javascript+DOM</title>
<style type="text/CSS">
/*------------public style--------------*/
body {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
/*-------------------------------------*/
#MyTable {
color: #888888;
border-top:1px dashed #d6d6d6;
border-left:1px dashed #d6d6d6;
}
#MyTable td {
height:18px;
text-align: center;
border-right:1px dashed #d6d6d6;
border-bottom:1px dashed #d6d6d6;
padding: 3px 3px 2px 3px;
}
.MyTableTag {
color:#0099FF;
font-size:12px;
font-weight:bolder;
}
#Number {
color:#FF6633;
}
.pages {
border-left:1px dashed #d6d6d6;
border-right:1px dashed #d6d6d6;
border-bottom:1px dashed #d6d6d6;
}
.pagesTag {
color:#0099FF;
}
.status {
color:#666666;
}
.statusContact {
color:#888888;
}
.No {
color:#BBBBBB;
}
</style>
<script language="Javascript" type="text/Javascript" src="AJax.JS"></script>
</head>
<body>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0" id="MyTable" >
<tr>
<td width="30" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeId">Id</td>
<td width="140" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeName">Name</td>
<td width="80" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeSex">Sex</td>
<td width="50" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeAge">Age</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="300" height="24" border="0" cellpadding="0" cellspacing="0" bgcolor="#F0F9FF" class="pages">
<tr>
<td width="36" align="right" valign="middle" class="status" style="padding-left:8px;">Status:
<input type="hidden" name="PageCount" id="PageCount"/><!--儲存分頁總數-->
<input type="hidden" name="PageNow" id="PageNow"/><!--儲存當前頁碼-->
</td>
<td id="Status" width="162" align="left" valign="middle" class="statusContact" style="padding-left:2px;">Loading...</td>
<td id="Pages" width="98" align="center" valign="middle" class="No">Previous│Next</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</Html>
數據庫為Access.
數據庫文件名:database.mdb
表名:UserData
字段:Id Name Sex Age
id為編號.其他全部為String.發不上來圖,自己看加吧.性別也是普通的文本字段,如果需要yes/no.自己修改一下就可以了