当前位置: 首页 > 图文教程 > XML家族 > XML > Xml_javascript分页

XML
XML简易教程之四
XML与HTML的结合（上）
XML与HTML的结合（下）
XML入门的常见问题(一)
XML入门的常见问题(二)
XMLHTTP资料
什么是XML
什么是 XML Web Service
XML正在接管Web服务 成为SOA的基础
怎么样在网页上读取远程xml的数据
XML教程—编写结构完整的XML文档
读写xml文件的2个小函数
XML文档的基本操作
初学者如何开发出一个高质量的J2EE系统
优化 JavaScript 代码
自动更新程序的设计框架
使Firefox对XML的处理兼容IE的节点处理方法
WML学习之四 锚和任务
WML学习之五 显示表单
WML学习之六 事件

No. « 17 18 19 20 »

技术文章搜索

关键字

XML 中的 Xml_javascript分页

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-17   浏览: 53 ::
收藏到网摘: n/a

Xml_javascript分页实例：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>龙的传人--Xml_javascript分页</title>
   
</head>
<body onload="getxmlDoc()">
<script language="javascript" type="text/javascript">
var xmlDoc;
var nodeIndex;
var pageIndex;
var pageSize=13;
var lastPage;   //最后一页
var overSize    //最后一页的记录数
function getxmlDoc()
{
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    var currNode;
    xmlDoc.async=false;
    xmlDoc.load("myTest.xml");
    if(xmlDoc.parseError.errorCode!=0)
    {
        var myErr=xmlDoc.parseError;
        alert("出错！"+myErr.reason);
    }
    getRecordCount();
    onFirst();
   
}
function getRecordCount()
{
    var personNode= xmlDoc.selectNodes("/Root")[0];
    var recordCount=personNode.childNodes.length;
    var pageCount=Math.ceil(recordCount/pageSize);
    document.getElementById("txtPageCount").value=pageCount;
    document.getElementById("txtRecordCount").value=recordCount;
    overSize=recordCount%pageSize;
    if(overSize>0)
    {
        lastPage=recordCount-overSize;
    }
    else
    {
        lastPage=recordCount-pageSize;
    }
   
}
function getPageRecord(pageIndex,pageSize)
{
     clearRow("myTable");   
    var personNode= xmlDoc.selectNodes("/Root")[0];
    var currNode=personNode.childNodes[pageIndex];
    for(var i=pageIndex;i<pageIndex+pageSize;i++)
    {
        var arr=new Array();
        var nNode= xmlDoc.selectSingleNode("Root/Person["+i+"]") ;
        arr[0]=nNode.getAttribute("Id");    //序号
        arr[1]=nNode.childNodes[0].text;    //工号
        arr[2]=nNode.childNodes[1].text;    //姓名
        arr[3]=nNode.childNodes[2].text;    //性别
        arr[4]=nNode.childNodes[3].text;    //部门
        arr[5]=nNode.childNodes[4].text;    //职位
        arr[6]=nNode.childNodes[5].text;    //地址
       
//        arr[0]=personNode.childNodes[i].getAttribute("Id");    //序号
//        arr[1]=personNode.childNodes[i].childNodes[0].text;    //工号
//        arr[2]=personNode.childNodes[i].childNodes[1].text;    //姓名
//        arr[3]=personNode.childNodes[i].childNodes[2].text;    //性别
//        arr[4]=personNode.childNodes[i].childNodes[3].text;    //部门
//        arr[5]=personNode.childNodes[i].childNodes[4].text;    //职位
//        arr[6]=personNode.childNodes[i].childNodes[5].text;    //地址
        addRow(i+1,"myTable",arr);
    }   
}
function onFirst()
{
    pageIndex=0;
    var currIndex=pageIndex;
    getPageRecord(currIndex,pageSize)
    pageIndex=currIndex ;
    document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
    document.getElementById("txtCurrPageRecord").value=pageSize;
}
function onPrev()
{
    var currIndex=pageIndex;
    currIndex-=pageSize;
    getPageRecord(currIndex,pageSize)
    pageIndex=currIndex;
    document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
    document.getElementById("txtCurrPageRecord").value=pageSize;
  
}
function onNext()
{   
    var currIndex=pageIndex;
    currIndex+=pageSize;
    getPageRecord(currIndex,pageSize)
    pageIndex=currIndex;
    document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
    document.getElementById("txtCurrPageRecord").value=pageSize;
   
}
function onLast()
{
    if(overSize>0)
    {
        getPageRecord(lastPage,overSize)
        document.getElementById("txtCurrPageRecord").value=overSize;
    }
    else
    {
        getPageRecord(lastPage,pageSize)
        document.getElementById("txtCurrPageRecord").value=pageSize;
    }   
    pageIndex=lastPage;
    document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
}
function toPage()
{   
    var index=document.getElementById("txtCurrPage").value
    var currIndex=(index-1)*pageSize;     
    if(event.keyCode==13)
    {
         getPageRecord(currIndex,pageSize);
    }
    pageIndex=currIndex;
}
function addRow(i,dataGridId,arr)
{
 var row=document.createElement("tr");
 var cell=createCellWidthText(i); 
  row.appendChild(cell);
 for(var j=0;j<arr.length;j++)
 {
  cell=createCellWidthText(arr[j]);
  row.appendChild(cell);
 }
 document.getElementById(dataGridId).firstChild.appendChild(row);
}
function createCellWidthText(text)
{
 var cell = document.createElement("td");
 var textNode = document.createTextNode(text);
 cell.appendChild(textNode);
 return cell;
}
function clearRow(obj)
{
 var table=document.getElementById(obj);
 var nodeTbody=table.firstChild
 var length=nodeTbody.childNodes.length; 
 for(var i=length-1;i>0;i--)
 {
  nodeTbody.removeChild(nodeTbody.childNodes[i]);  
 }
}
</script>
    <form id="form1" runat="server">
    <div>
        <table align="center" style="border-right: #0033ff thin solid; border-top: #0033ff thin solid;
            border-left: #0033ff thin solid; width: 650px; border-bottom: #0033ff thin solid">
            <tr>
                <td>
                    共<input id="txtPageCount" name="txtPageCount" style="width: 33px; color: #0000ff; border-top-style: none; border-right-style: none; border-left-style: none; background-color: transparent; border-bottom-style: none;" type="text"   onkeydown="toPage()"/>页/
                    <input id="txtRecordCount" name="txtRecordCount" style="width: 46px; color: #3300ff; border-top-style: none; border-right-style: none; border-left-style: none; background-color: transparent; border-bottom-style: none;" type="text"   onkeydown="toPage()"/>条记录
                    <input id="btnFirst" type="button" value="http://www.knowsky.com/首页"  onclick="onFirst()"/>
                    <input id="btnPrev" type="button" value="http://www.knowsky.com/上一页"  onclick="onPrev()"/>
                    <input id="btnNext" type="button" value="http://www.knowsky.com/下一页"  onclick="onNext()"/>
                    <input id="btnLast" type="button" value="http://www.knowsky.com/尾页"  onclick="onLast()"/>
                    第<input id="txtCurrPage" name="txtCurrPage" style="width: 46px; color: #ff3333;" type="text"   onkeydown="toPage()"/>
                    页(当前页<input id="txtCurrPageRecord" name="txtCurrPageRecord" style="width: 22px; color: #ff3333; border-top-style: none; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none;" type="text"   onkeydown="toPage()"/>条记录）</td>
            </tr>
            <tr>
                <td>
                    &nbsp;<table width="100%" id="myTable">
                        <tr style="background-color:Yellow">
                            <td style="width: 34px; height: 21px;">
                                Id</td>
                            <td style="width: 34px; height: 21px;">
                                序号</td>
                            <td style="width: 42px; height: 21px;">
                                工号</td>
                            <td style="width: 36px; height: 21px;">
                                姓名</td>
                            <td style="width: 39px; height: 21px;">
                                性别</td>
                            <td style="width: 43px; height: 21px;">
                                部门</td>
                            <td style="width: 50px; height: 21px;">
                                职位</td>
                            <td style="width: 100px; height: 21px;">
                                地址</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
   
    </div>
    </form>
</body>
</html>