XML数据岛结合Ajax实现前端分页与搜索示例

XML数据岛结合Ajax实现前端分页与搜索示例

界面效果如图所示： 实现逻辑如下： 1. 当用户点击[选择]按钮时，根据当前下拉框选中的分类ID，通过Ajax向后端发起请求获取数据源。服务端通过dataSet.getXml()方法输出XML格式数据，鉴于数据量较小，此处采用较为简便的处理方式。 2. 客户端利用XML数据岛（Data Island）进行分页展示。这种方式的优势在于无需编写复杂的分页算法代码，直接利用浏览器特性即可实现。 3. 执行搜索操作时，结合当前选中的分类ID和输入的关键字，再次通过Ajax发起请求（虽然理论上可利用XML结果进行前端过滤，但为了简化逻辑，此处选择重新请求数据），随后进入第2步的显示流程。 4. 在数据展示过程中，点击某一行时，通过onclick事件将当前的<tr>元素作为参数传入，利用DOM操作提取<tr>内<td>的具体数值。 附注：由于代码未涵盖所有边界细节，结构略显杂乱，恳请指正，批评是进步的最佳途径。以下为完整代码，旨在促进技术交流。 index.html 页面结构： <select id="productID" onchange="changeID()" NAME="productID"> <option value="1" selected>1111</option> <option value="2">2222</option> <option value="3">3333</option> </select><br> <table> <tr> <td><input id="selectValue" type="text" size="40"></td><td><a href='#' onclick='show()'><img src='img/btnSelect.gif' /></a></td> </tr> </table> <div id="selectData"></div> <input id="abc" type="text" size="50%" /> data.js 核心逻辑代码： var xmlHttp; var xmlContent; // 用于保存Ajax请求返回的XML数据 var key = ""; var id = ""; //---------------------样式配置------------------// var divid = "selectData" // 对应第4步中的容器ID var txtValueID = "selectValue"; // 对应第2步中的输入框ID 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; // 获取最后一列的值 } } $(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>" 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 = "找不到相关数据"; } } // 首页操作：设置当前页为1 function firstPage() { $("page").innerHTML = 1; } // 上页操作：判断当前页是否大于1，若是则减1 function previousPage() { if($("page").innerHTML != "1") { $("page").innerHTML = parseInt($("page").innerHTML) - 1; } } // 下页操作：判断当前页是否小于总页数，若是则加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获取DOM对象 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(); } } // 发起XML请求 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(); }