<!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" />
<script type="text/javascript" src="061/xml.js"></script>
<style type="text/css">
.tblStyle
{
border-collapse:collapse;
background:#FFF;
border-top:#000 1px solid;
border-bottom:#000 1px solid;
border-left:#000 0px solid;
border-right:#000 0px solid;
}
.tblStyle th
{
background:#FF9;
text-align:left;
border-bottom:#000 1px solid;
}
.tblStyle td
{
border-collapse:collapse;
border-top:#000 1px solid;
}
</style>
<script type="text/javascript">
<!--
var xmlHttp;
function createXHR(){
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!xmlHttp) {
alert('浏览器不支持 XMLHTTP ');
return false;
}
}
function sendRequest(sort){
createXHR();
var url='061-sort.asp?sort='+sort+'&ts='+new Date().getTime();
xmlHttp.open('GET',url,true);
xmlHttp.onreadystatechange=catchResult;
xmlHttp.send(null);
}
function catchResult(){
if (xmlHttp.readyState==4){
if (xmlHttp.status == 200) {
sortTable(xmlHttp.responseXML);
}else{
alert('代码错误:'+xmlHttp.status+'/('+xmlHttp.statusText+'/)');
}
}
}
function sortTable(xmldoc){
var oldobj=document.getElementById('tbl');
var parentDiv=oldobj.parentNode;
var tblObj=document.createElement('table');
var tbody=document.createElement('tbody');
tblObj.setAttribute('width','100%');
tblObj.setAttribute('border','1');
tblObj.setAttribute('cellpadding','2');
tblObj.setAttribute('cellspacing','1');
tblObj.setAttribute('id','tbl');
tblObj.className='tblStyle';
var tblhead=document.getElementById('tblhead');
tbody.appendChild(tblhead);
var na=getNodeContent(xmldoc,'product');
for (var i=0;i<na.length;i+=4){
var row=document.createElement('tr');
for (var j=0;j<4;j++){
var cell=document.createElement('td');
var cellText=document.createTextNode(na[i+j][1]);
cell.appendChild(cellText);
row.appendChild(cell);
}
tbody.appendChild(row);
}
tblObj.appendChild(tbody);
parentDiv.replaceChild(tblObj,oldobj);
}
function headRow(){
}
//-->
</script>
</head>
<body onload="sendRequest();">
<h3>AJAX 表格字段数据排序</h3>
<p>表格字段数据排序的方法很多，本例，通过 AJAX 技术，把排序的工作交给服务器来执行，浏览器端只负责显示结果。</p>
<div class="br"><div class="bl"><div class="bt"><div></div></div>
<div>
<table width="100%" border="1" cellpadding="2" cellspacing="1" id="tbl" class="tblStyle">
<tr id="tblhead">
<th><a href="javascript://" onclick="sendRequest('pID');">产品编号</a></th>
<th><a href="javascript://" onclick="sendRequest('pName');">产品名称</a></th>
<th><a href="javascript://" onclick="sendRequest('pSpec');">产名规格</a></th>
<th><a href="javascript://" onclick="sendRequest('pPrice');">建议售价</a></th>
</tr>
</table>
</div>
<div class="bb"><div></div></div></div></div>
</body>
</html>
asp文件
<%
Response.Charset="gb2312"
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "Cache-Control","no-cache"
Response.ContentType="text/xml"
%>
<%
DbPath = SERVER.MapPath("AJAXSample.mdb")
Set StrConnect = Server.CreateObject("ADODB.Connection")
StrConnect.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & DbPath
sort=Request("sort")
IF sort="" Then
sort="pID"
ELSEIF InStr("(pID)(pName)(pSpec)(pPrice)","("&sort&")")=0 Then
sort="pID"
END IF
Set rs=Server.CreateObject("ADODB.Recordset")
sqlCMD="select * from aProductInfo ORDER BY "&sort
rs.Open sqlCMD,StrConnect,2,3
Response.Write "<?xml version=""1.0"" encoding=""gb2312""?>"
Response.Write "<root>"
'Response.Write "<sort>"&sort&"</sort>"
WHILE NOT rs.EOF
Response.Write "<product>"
Response.Write "<pID>"&rs("pID")&"</pID>"
Response.Write "<pName>"&rs("pName")&"</pName>"
Response.Write "<pSpec>"&rs("pSpec")&"</pSpec>"
Response.Write "<pPrice>"&rs("pPrice")&"</pPrice>"
Response.Write "</product>"
rs.MoveNext
WEND
Response.Write "</root>"
%>
xml.js文件
http://www.corange.cn//uploadfiles/xml_51206.rar
数据库结构可以看上面
原文地址:http://www.corange.cn/archives/2010/02/3528.html