xml分页+ajax请求数据源+dom取结果实例代码

　　效果图如下:

　　解决思路:

　　1.单击[选择]时,根据当前选择(下拉框)的分类ID,使用ajax请求,取得数据源(服务端使用dataSet.getXml()输出,因为数据量不是很大,所以就偷懒了)

　　2.客户端使用xml数据岛分页显示(使用数据岛分页比较简单,不用写太多的代码)

　　3.搜索时,根据当前选择(下拉框)的分类ID,和搜索关键字,重新使用ajax请求(好像也可以使用xml的结果过滤,但为了方便,重新请求算了),跳到第2步显示

　　4.取数据时,单击某行时,使用onclick事件,把当前行的tr做为参数,使用dom操作就可以得到tr里的td的值

　　附:由于没考虑到其它细节的问题,所以代码有点乱,希望各位能多多指导,各位的批评就是我进步的最好的捷径.谢谢

　　贴出全部代码,希望能和大家相互交流一下

　　index.html 显示页面:

　　</select><br>

　　<table>

　　<tr>

　　</tr>

　　</table>

　　data.js 所有操作js代码

　　var xmlHttp;

　　var xmlContent; //ajax请求后返回保存的数据

　　var key = "";

　　var id = "";

　　//---------------------样式设置------------------//

　　var divid = "selectData" //说明第4步

　　var txtValueID = "selectValue"; //说时第2步

　　var fieldNames = new Array(3); //单击某行取值是,每列值前添加一个该值列名

　　var isShowFieldNames = true; //取值时,是否要显示列名 true为显示,false不显示

　　fieldNames[0]="编号:";

　　fieldNames[1]="用户名:";

　　fieldNames[2]="密码:";

　　var pageSize = 10; //每页显示行数

　　var onmouseoverBG = "#DDFFEC"; //鼠标移上去该行的背景颜色

　　var onmouseoutBG = "#ffffff"; //鼠标离开后该行的背景颜色

　　//表头列名根据需要修改

　　var tableHead = "<thead style='background: #DDFFEC;'>";

　　tableHead += "<th>编号</th>";

　　tableHead += "<th>用户名</th>";

　　tableHead += "<th>密码</th>";

　　tableHead += "</thead>";

　　//数据绑定字段名,修改DATAFLD里的的字段名

　　var dataFiled = "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_id'></div></td>";

　　dataFiled += "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_userName'></div></td>";

　　dataFiled += "<td style='border-top: 1px solid #B9E2CC;'><div DATAFLD='F_passWord'></div></td>";

　　var RequestFile = "getXml1.aspx"; //请求页面

　　//-------------------外部调用--------------------------//

　　//显示选择

　　//productID是下拉框ID,请根据需要修改

　　function show()

　　{

　　$(divid).style.display = ''

　　$(divid).style.position="absolute"

　　$(divid).style.backgroundColor="#FFFFFF"

　　key = "";

　　id = productID.options[productID.selectedIndex].value;

　　RequestXML();

　　}

　　//分类改变时隐藏

　　function changeID()

　　{

　　hide();

　　}

　　//---------------------内部方法,一般不用修改---------------------------//

　　//选择某行的值,显示到文本框

　　function getCurrentRowData(tr)

　　{

　　var tds = tr.getElementsByTagName("td") //得到所有列

　　var result="";

　　for(var i = 0; i < tds.length; i++)

　　{

　　if(isShowFieldNames){result += fieldNames[i]};

　　if(i != tds.length -1 )//是否是最后一列

　　{

　　result += tr.getElementsByTagName("div")[i].firstChild.nodeValue + ","; //得到第i列的值 + ","

　　}

　　else

　　{

　　result += tr.getElementsByTagName("div")[i].firstChild.nodeValue; //得到第i列的值

　　}

　　$(txtValueID).value = result;

　　hide();

　　}

　　//显示内容

　　function ShowData()

　　{

　　var data = $(divid);

　　var content = "<div id=\"main\" style='border: 1px solid #009966;width:300px;font-size:13px';>";

　　content += "<div id=\"searchMain\">";

　　content += "<table><tr><td><input style='border: 1px solid #B9E2CC;' id=\"key\" type=\"text\" /></td><td><a href='#' onclick='Search()'><img style='border:0px;' src='img/btnSearch.gif' /></a></td><td><a href='#' onclick='hide()'><img style='border:0px' src='img/btnCancel.gif' /></a></td></tr></table>";

　　content += "</div>";

　　content += "<xml id=\"data_souce\">" + xmlContent + "</xml>";

　　content += "<div id='resultxml'>"

　　//----------------翻页操作-----------------------//

　　content += "<table CELLPADDING=0 CELLSPACING=0 width='100%'><tr><td>"

　　content += "<a href=\"#\" onclick=\"GotoPage('first')\"><img style='border:0px;' src='img/btnFirst.gif'/></a> ";

　　content += "<a href=\"#\" onclick=\"GotoPage('previous')\"><img style='border:0px;' src='img/btnPrevious.gif'/></a> ";

　　content += "<a href=\"#\" onclick=\"GotoPage('next')\"><img style='border:0px;' src='img/btnNext.gif'/></a> ";

　　content += "<a href=\"#\" onclick=\"GotoPage('last')\"><img style='border:0px;' src='img/btnLast.gif'/></a>";

　　content += "</td>"

　　content += "<td align='rigth' style='font-size:13px'><span style='color:red' id='page'>1</span><span id='compart'></span><span id='pages'></span>"

　　content += "</td></tr></table>"

　　//----------------数据源-----------------------//

　　content += "<table style='text-align:center;font-size:13px;border: 1px solid #B9E2CC;' width='300px' CELLPADDING=0 CELLSPACING=0 id=\"datas\" DATASRC=\"#data_souce\" DATAPAGESIZE=" + pageSize + ">";

　　//----------------列名-----------------------//

　　content += tableHead;

　　content += "<tr style=\"cursor:hand\" onmouseover=\"this.bgColor='" + onmouseoverBG + "'\" onmouseout=\"this.bgColor='" + onmouseoutBG + "'\" onclick=\"getCurrentRowData(this)\">";

　　content += dataFiled;

　　content += "</tr>";

　　content += "</table>";

　　content += "</div>"

　　data.innerHTML = content;

　　GetPages();

　　}

　　//得到总页

　　function GetPages()

　　{

　　var rowCount = $("data_souce").getElementsByTagName("Table"); //得到所有table节点,得到总记录数

　　$("pages").innerHTML = Math.ceil(rowCount.length / pageSize);

　　$("compart").innerHTML = "/";

　　if(rowCount.length == 0)

　　{

　　$("resultxml").innerHTML = "找不到相关数据";

　　}

　　//首页时得到当前页

　　function firstPage()

　　{

　　$("page").innerHTML = 1;

　　}

　　//上页时得到当前页

　　function previousPage()

　　{

　　if($("page").innerHTML != "1")

　　{

　　$("page").innerHTML = parseInt($("page").innerHTML) - 1;

　　}

　　//下页时得到当前页

　　function nextPage()

　　{

　　if($("page").innerHTML != $("pages").innerHTML)

　　{

　　$("page").innerHTML = parseInt($("page").innerHTML) + 1;

　　}

　　//尾页时得到当前页

　　function lastPage()

　　{

　　$("page").innerHTML = $("pages").innerHTML;

　　}

　　//翻页操作

　　function GotoPage(page)

　　{

　　switch(page)

　　{

　　case "first":

　　{

　　datas.firstPage();

　　firstPage();

　　break;

　　}

　　case "previous":

　　{

　　datas.previousPage();

　　previousPage();

　　break;

　　}

　　case "next":

　　{

　　datas.nextPage();

　　nextPage();

　　break;

　　}

　　case "last":

　　{

　　datas.lastPage();

　　lastPage();

　　break;

　　}

　　//搜索

　　function Search()

　　{

　　key = $("key").value;

　　if(key == "")

　　{

　　alert("请输入搜索关键字");

　　return;

　　}

　　RequestXML();

　　}

　　//根据ID得到对象

　　function $(id)

　　{

　　return document.getElementById(id);

　　}

　　//隐藏选择

　　function hide()

　　{

　　$(divid).style.display ="none";

　　}

　　//创建XMLHttpRequest

　　function CreateXMLHttpRequest()

　　{

　　if(window.ActiveXObject)

　　{

　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

　　}

　　else if(window.XMLHttpRequest)

　　{

　　xmlHttp = new XMLHttpRequest();

　　}

　　//请求

　　function RequestXML()

　　{

　　var url = RequestFile + "?id=" + id + "&key=" + key;

　　CreateXMLHttpRequest();

　　xmlHttp.open("get",url);

　　xmlHttp.onreadystatechange = GetXMLResult;

　　xmlHttp.send(null);

　　}

　　//接收

　　function GetXMLResult()

　　{

　　if(xmlHttp.readyState == 4)

　　{

　　if(xmlHttp.status == 200)

　　{

　　xmlContent = xmlHttp.responseText;

　　ShowData();

　　}

　　else

　　{

　　$(divid).innerHTML = "正在读取数据中";

　　}

　　getXml.aspx 服务端数据源

　　private void Page_Load(object sender, System.EventArgs e)

　　{

　　Response.Write(GetData());

　　Response.End();

　　}

　　private string GetData()

　　{

　　string id = Request.QueryString["id"];

　　string key = Request.QueryString["key"];

　　string sql = "select * from T_user where F_id = " + id;

　　if (key.Length > 0){sql += " and F_id like '%" + key + "%'or F_passWord like '%" + key + "%' or F_userName like '%" + key + "%'";}

　　StringBuilder sb = new StringBuilder();

　　sb.Append("<?xml version=\"1.0\"?>");

　　SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=sa;database=WebTest");

　　conn.Open();

　　SqlDataAdapter da = new SqlDataAdapter(sql,conn);

　　DataSet ds = new DataSet();

　　da.Fill(ds);

　　conn.Close();

　　sb.Append(ds.GetXml());

　　return sb.ToString();

　　}

教程首页更多教程