源码下载

https://files.cnblogs.com/jianjialin/ajax解析XML.rar

给上面的显示产品分页使用northwind数据库

添加存储过程

 


)
as
declare @sql nvarchar(1000);
declare @count int

set @count=@pagesize*@pageindex
set @sql= 'select top '+convert(nvarchar(3), @pagesize+'  * from products where supplierid='+convert(nvarchar(3), @supplierid)+' 
and productid not in(select top 
'+ convert(nvarchar(3), @count+
' productid from products where supplierid='+convert(nvarchar(3), @supplierid)+');'
set @sql=@sql+'select count(*)  from products where supplierid='+convert(nvarchar(3), @supplierid)+';'

exec sp_executesql @sql
DataAccess增加该方法使用存储过程
 pageIndex)
    {
        Con.Open();
        int count = pageIndex * pagesize;
        SqlCommand com 
= new SqlCommand("[dbo].[getProductsBySupplierID_Paged]", Con);
        com.CommandType 
= CommandType.StoredProcedure;
        SqlParameter param 
= new SqlParameter("@supplierID", SqlDbType.Int);
        SqlParameter param1 
= new SqlParameter("@pagesize", SqlDbType.Int);
        SqlParameter param2 
= new SqlParameter("@pageindex", SqlDbType.Int);
        param.Value 
= supplierID;
        param1.Value 
= pagesize;
        param2.Value 
= pageIndex;
        com.Parameters.Add(param);
        com.Parameters.Add(param1);
        com.Parameters.Add(param2);

        SqlDataAdapter sda 
= new SqlDataAdapter(com);
        DataSet ds 
= new DataSet();
        sda.Fill(ds);
        con.Close();
        
return ds;
    }

一般处理程序

 

 pageindex, HttpContext context)
    {
        DataSet ds = DataAccess.getProductBySupplier_Page(supplierID,pagesize,pageindex);
        XmlTextWriter write 
= new XmlTextWriter(context.Response.OutputStream, System.Text.Encoding.UTF8);
        write.Formatting 
= Formatting.Indented;
        write.Indentation 
= 4;
        write.IndentChar 
= ' ';

        ds.WriteXml(write);
        write.Flush();
        context.Response.End();
        write.Close();
    }

 

前台


            <select id="supplier" onchange="changeSelect(this)">
                
<option value="-1">请选择提供商</option>
             
</select>
            
<div style="border: 1px solid #FF0000" id="divPage">
                每页显示
<select id="selectPageCount">
                     
<option selected value="2">2</option>
                     
<option  value="1">1</option>
                     
<option  value="3">3</option>
                 
</select>
                 
<span id="spanPage"></span>
             
</div>
             
<div style="border: 1px solid #FF0000" id="divTable"></div>
js
 changeSelect(option){
            document.getElementById("divTable").innerHTML="";
            
var select=document.getElementById("selectPageCount");
            getProducts_page(option.value,select.options[select.selectedIndex].value,
0);
//改变选择因此pageindex为0
         }
         
function getProducts_page(supplierid,pagesize,pageindex){
            request
=new XMLHttpRequest();
            request.open(
"POST","Handler.ashx?supplierID="+supplierid+"&pagesize="+pagesize+"&pageindex="+pageindex,true);
            request.onreadystatechange
=setProducts;
            request.send(
null);
         }
         
function setProducts(){
            
if(request.readyState==4){
                
if(request.status==200){
//清空分页按钮区和数据显示区
                    document.getElementById("spanPage").innerHTML="";
                    document.getElementById(
"divTable").innerHTML="";
                
                    
var xml=request.responseText;
                    
var doc=new ActiveXObject("Msxml2.DOMDocument");
//存储过程返回两个table,第一个为分页数据,第二个为条数
                    doc.loadXML(xml);
                    alert(xml);
                    
var products=doc.documentElement.selectNodes("Table");
//获取有多少条记录
                    var temp=doc.documentElement.selectSingleNode("Table1/Column1").text;
//构造分页按钮 有几页就产生几个a标签添加到spanpage分页区
                    var pagesize;
                    
if(parseInt(temp)%2==0){
                        pagesize
=parseInt(temp)/2;
                    }else{
                        pagesize
=parseInt(temp)/2+0.5;
                    }
                    
for(var i=0; i<pagesize; i++){
                        
var span=document.createElement("a");
                        span.innerText
=i+1+"  ";
                        
var supplier=document.getElementById("supplier");
//给a标签添加属性点击则出发ajax方法,
//
这里写死为每页两条记录可以扩充修改
                        span.setAttribute("href","javascript:getProducts_page(document.getElementById('supplier').options[document.getElementById('supplier').selectedIndex].value,2,"+i+")");
                        document.getElementById(
"spanPage").appendChild(span);
                    }
                    
//下面同上一篇一样,构造table
                    if(products.length>0){
                        
var oTable=document.createElement("table");
                        
var oTbody=document.createElement("tbody");
                        oTable.appendChild(oTbody);
                        
                        oTbody.insertRow(
0);
                        
                        
                        
for(var j=0; j<products[0].childNodes.length; j++){
                            oTbody.rows[
0].insertCell(j);
                            oTbody.rows[
0].cells[j].appendChild(document.createTextNode(products[0].childNodes[j].nodeName));
                        }
                        
for(var i=0;i<products.length; i++){
                            oTbody.insertRow(i
+1);
                            
for(var j=0; j<products[i].childNodes.length; j++){
                                oTbody.rows[i
+1].insertCell(j);
                                oTbody.rows[i
+1].cells[j].appendChild(document.createTextNode(products[i].childNodes[j].text));
                            }
                        }
                        document.getElementById(
"divTable").appendChild(oTable);
                    }
                    
else{
                        document.getElementById(
"divTable").innerHTML="<b>没有该供应商的产品</b>";
                    }
                }
            }
         }

相关文章: