XML paging +ajax request data source +dom Fetch result instance code _javascript skill

The effect chart is as follows:

Solution Idea:
1. Click [Select] to use the AJAX request to obtain the data source (the server uses Dataset.getxml () output, because the data volume is not very large, so lazy) according to the classification ID of the current selection (dropdown box)
2. The client uses the XML data island page to display (uses the data island paging is simpler, does not have to write too many code)
3. Search, based on the current selection (dropdown box) of the category ID, and search keywords, reuse ajax request (as if you can also use the results of XML filtering, but for convenience, re-request), skip to step 2nd display
4. When the data, click a row, using the OnClick event, the current line of TR as a parameter, using DOM operation can get the TD in TR value
Attached: Because I did not consider other details of the problem, so the code is a bit messy, I hope you can be a lot of guidance, your criticism is my progress is the best shortcut. Thank you.
Post all the code and hope to communicate with you
index.html Display page:
<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= "" ></td><td><a href= ' # ' onclick= ' Show () ' ></a></td>
</tr>
</table>
<div id= "Selectdata" ></div>
<input id= "abc" type= "Text" size= "50%"/>
Data.js All Operations JS code
var xmlHttp;
var xmlcontent; Returns the saved data after the AJAX request
var key = "";
var id = "";
---------------------style settings------------------//
var divid = "Selectdata"//Description Step 4th
var Txtvalueid = "Selectvalue"; 2nd step.
var fieldnames = new Array (3); Click a row value to add a value column name before each column value
var isshowfieldnames = true; If you want to display the column name true to display when the value is taken, false does not display
fieldnames[0]= "Number:";
fieldnames[1]= "User name:";
fieldnames[2]= "Password:";
var pageSize = 10; Show number of rows per page
var ONMOUSEOVERBG = "#DDFFEC"; Move the mouse over the background color of the row
var ONMOUSEOUTBG = "#ffffff"; The background color of the row after the mouse has left
Table header column name modified as needed
var tablehead = "<thead style= ' background: #DDFFEC; ' > ";
Tablehead + = "<th> number </th>";
Tablehead + = "<th> username </th>";
Tablehead + = "<th> password </th>";
Tablehead = "</thead>";
Data-bound field names, modifying field names in 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"; Request page
-------------------External Call--------------------------//
Display selection
ProductID is the dropdown box ID, please modify it as needed
Function Show ()
{
$ (divid). Style.display = '
$ (divid). style.position= "Absolute"
$ (divid). style.backgroundcolor= "#FFFFFF"
key = "";
id = productid.options[productid.selectedindex].value;
RequestXML ();
}
Hide when classification changes
function Changeid ()
{
Hide ();
}
---------------------internal methods, generally do not need to modify---------------------------//
Select the value of a row to display to the text box
function Getcurrentrowdata (TR)
{
var tds = Tr.getelementsbytagname ("TD")//Get all columns
var result= "";
for (var i = 0; i < tds.length; i++)
{
if (isshowfieldnames) {result = Fieldnames[i]};
if (i!= tds.length-1)//is the last column
{
result = = Tr.getelementsbytagname ("div") [I].firstchild.nodevalue + ","; Get the value of column i + ","
}
Else
{
result = = Tr.getelementsbytagname ("div") [I].firstchild.nodevalue; Get the value of column I
}
}
$ (txtvalueid). Value = result;
Hide ();
}
Display content
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 () ' ></a></td><td><a href= ' # ' onclick= ' Hide () ' ></a></td></tr></table> ';
Content + + "</div>";
Content + + "<xml id=\" data_souce\ ">" + xmlcontent + "</xml>";
Content + = "<div id= ' Resultxml ' >"
----------------Paging operation-----------------------//
Content + = "<table cellpadding=0 cellspacing=0 width= ' 100% ' ><tr><td>"
Content + + "<a href=\" #\ "onclick=\" GotoPage (' the ' the ') ' ></a> ";
Content + + "<a href=\" #\ "onclick=\" GotoPage (' previous ') \ ></a> ';
Content + = "<a href=\" #\ "onclick=\" GotoPage (' next ') \ > </a> ";
Content + + "<a href=\" #\ "onclick=\" GotoPage (' last ') \ > </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>"
----------------Data source-----------------------//
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 +" > ";
----------------Column name-----------------------//
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 ();
}
Get the total page
function GetPages ()
{
var rowcount = $ ("Data_souce"). getElementsByTagName ("Table"); Get all the table nodes and get the total number of records
$ ("pages"). InnerHTML = Math.ceil (rowcount.length/pagesize);
$ ("Compart"). InnerHTML = "/";
if (rowcount.length = 0)
{
$ ("Resultxml"). InnerHTML = "No related data found";
}
}
Get the current page when home
function FirstPage ()
{
$ ("page"). InnerHTML = 1;
}
Get current page when on page
function PreviousPage ()
{
if ($ ("page"). InnerHTML!= "1")
{
$ ("page"). InnerHTML = parseint ($ ("page"). InnerHTML)-1;
}
}
Get current page when next page
function NextPage ()
{
if ($ ("page"). InnerHTML!= $ ("pages"). InnerHTML)
{
$ ("page"). InnerHTML = parseint ($ ("page"). InnerHTML) + 1;
}
}
Last time Get current page
function LastPage ()
{
$ ("page"). InnerHTML = $ ("pages"). InnerHTML;
}
Paging operation
function GotoPage (page)
{
Switch (page)
{
Case "a":
{
Datas.firstpage ();
FirstPage ();
Break
}
Case "Previous":
{
Datas.previouspage ();
PreviousPage ();
Break
}
Case "Next":
{
Datas.nextpage ();
NextPage ();
Break
}
Case "Last":
{
Datas.lastpage ();
LastPage ();
Break
}
}
}
Search
function Search ()
{
Key = $ ("key"). Value;
if (key = = "")
{
Alert ("Please enter search keywords");
Return
}
RequestXML ();
}
Get objects based on ID
function $ (ID)
{
return document.getElementById (ID);
}
Hide Selection
function Hide ()
{
$ (divid). Style.display = "None";
}
Create XMLHttpRequest
function Createxmlhttprequest ()
{
if (window. ActiveXObject)
{
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest)
{
XmlHttp = new XMLHttpRequest ();
}
}
Request
function RequestXML ()
{
var url = requestfile + "id=" + ID + "&key=" + key;
Createxmlhttprequest ();
Xmlhttp.open ("get", url);
Xmlhttp.onreadystatechange = Getxmlresult;
Xmlhttp.send (NULL);
}
Receive
function Getxmlresult ()
{
if (xmlhttp.readystate = 4)
{
if (Xmlhttp.status = 200)
{
Xmlcontent = Xmlhttp.responsetext;
ShowData ();
}
}
Else
{
$ (divid). InnerHTML = "in reading data";
}
}
Getxml.aspx server-side data source
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 + + 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 ();
}