javascript解析DOM（3）

源码下载

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

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

添加存储过程

 

alter procedure dbo.getProductsBySupplierID_Paged(
@supplierid int,
@pagesize int,
@pageindex int
)
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增加该方法使用存储过程

    public static DataSet getProductBySupplier_Page(int supplierID,int pagesize,int 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;
    }

一般处理程序

 

private void Xml_GetProductBySupplierID_Page(int supplierID,int pagesize,int 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();
    }

 

前台

<input type="button" value="获得供应商" onclick="getSupplier()" />
            <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

function 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>";
                    }
                }
            }
         }