search

Xml_javascript pagination

Feb 28, 2017 pm 04:52 PM

Xml_javascript paging

<!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="首页"  onclick="onFirst()"/>
                    <input id="btnPrev" type="button" value="上一页"  onclick="onPrev()"/>
                    <input id="btnNext" type="button" value="下一页"  onclick="onNext()"/>
                    <input id="btnLast" type="button" value="尾页"  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>
                     <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>

The above is the content of Xml_javascript paging. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Creating RSS Documents: A Step-by-Step TutorialCreating RSS Documents: A Step-by-Step TutorialApr 13, 2025 am 12:10 AM

The steps to create an RSS document are as follows: 1. Write in XML format, with the root element, including the elements. 2. Add, etc. elements to describe channel information. 3. Add elements, each representing a content entry, including,,,,,,,,,,,. 4. Optionally add and elements to enrich the content. 5. Ensure the XML format is correct, use online tools to verify, optimize performance and keep content updated.

XML's Role in RSS: The Foundation of Syndicated ContentXML's Role in RSS: The Foundation of Syndicated ContentApr 12, 2025 am 12:17 AM

The core role of XML in RSS is to provide a standardized and flexible data format. 1. The structure and markup language characteristics of XML make it suitable for data exchange and storage. 2. RSS uses XML to create a standardized format to facilitate content sharing. 3. The application of XML in RSS includes elements that define feed content, such as title and release date. 4. Advantages include standardization and scalability, and challenges include document verbose and strict syntax requirements. 5. Best practices include validating XML validity, keeping it simple, using CDATA, and regularly updating.

From XML to Readable Content: Demystifying RSS FeedsFrom XML to Readable Content: Demystifying RSS FeedsApr 11, 2025 am 12:03 AM

RSSfeedsareXMLdocumentsusedforcontentaggregationanddistribution.Totransformthemintoreadablecontent:1)ParsetheXMLusinglibrarieslikefeedparserinPython.2)HandledifferentRSSversionsandpotentialparsingerrors.3)Transformthedataintouser-friendlyformatsliket

Is There an RSS Alternative Based on JSON?Is There an RSS Alternative Based on JSON?Apr 10, 2025 am 09:31 AM

JSONFeed is a JSON-based RSS alternative that has its advantages simplicity and ease of use. 1) JSONFeed uses JSON format, which is easy to generate and parse. 2) It supports dynamic generation and is suitable for modern web development. 3) Using JSONFeed can improve content management efficiency and user experience.

RSS Document Tools: Building, Validating, and Publishing FeedsRSS Document Tools: Building, Validating, and Publishing FeedsApr 09, 2025 am 12:10 AM

How to build, validate and publish RSSfeeds? 1. Build: Use Python scripts to generate RSSfeed, including title, link, description and release date. 2. Verification: Use FeedValidator.org or Python script to check whether RSSfeed complies with RSS2.0 standards. 3. Publish: Upload RSS files to the server, or use Flask to generate and publish RSSfeed dynamically. Through these steps, you can effectively manage and share content.

Securing Your XML/RSS Feeds: A Comprehensive Security ChecklistSecuring Your XML/RSS Feeds: A Comprehensive Security ChecklistApr 08, 2025 am 12:06 AM

Methods to ensure the security of XML/RSSfeeds include: 1. Data verification, 2. Encrypted transmission, 3. Access control, 4. Logs and monitoring. These measures protect the integrity and confidentiality of data through network security protocols, data encryption algorithms and access control mechanisms.

XML/RSS Interview Questions & Answers: Level Up Your ExpertiseXML/RSS Interview Questions & Answers: Level Up Your ExpertiseApr 07, 2025 am 12:19 AM

XML is a markup language used to store and transfer data, and RSS is an XML-based format used to publish frequently updated content. 1) XML describes data structures through tags and attributes, 2) RSS defines specific tag publishing and subscribed content, 3) XML can be created and parsed using Python's xml.etree.ElementTree module, 4) XML nodes can be queried for XPath expressions, 5) Feedparser library can parse RSSfeed, 6) Common errors include tag mismatch and encoding issues, which can be validated by XMLlint, 7) Processing large XML files with SAX parser can optimize performance.

Advanced XML/RSS Tutorial: Ace Your Next Technical InterviewAdvanced XML/RSS Tutorial: Ace Your Next Technical InterviewApr 06, 2025 am 12:12 AM

XML is a markup language for data storage and exchange, and RSS is an XML-based format for publishing updated content. 1. XML defines data structures, suitable for data exchange and storage. 2.RSS is used for content subscription and uses special libraries when parsing. 3. When parsing XML, you can use DOM or SAX. When generating XML and RSS, elements and attributes must be set correctly.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use