search

Home  >  Article  >  Backend Development  >  Detailed introduction on how to use javascript+xml to implement paging

Detailed introduction on how to use javascript+xml to implement paging

黄舟
黄舟Original
2017-03-06 16:38:012933browse

In web-based technology, paging is an old problem, but it is a problem that everyone talks about. With the increasing application of xml technology, it is also possible to apply xml to paging. Of course, online There are a lot of tutorials, but I looked at them all in confusion, so I decided to write one myself and share and correct them with everyone.
There are two files tmh.htm & tt.xml
The source code is as follows:
tmh.htm
_____________________________________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="KeyWords" CONTENT="">
<META NAME="Description" CONTENT="">
<link rel="stylesheet" href="../website.CSS" type="text/css">
</HEAD>
<BODY>

<script language="javascript"> 
//****************变量相关定义**************
//*             author:海仔               *
//*         Email:rautinee@21cn.com      *
//*本程序可自由传播使用，但请务必保留此信息    *
//****************************************
var pagenum=4; //每页显示几条信息 
var page=0 ;
var contpage ;
var BodyText="";
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var mode="member";
var toolBar;
xmlDoc.async="false" 
xmlDoc.load("tt.xml")
//***************这个地方是你根据实际取得的字段名称来改了
header="<TABLE border=1><tr><td>姓名</td><td>图标</td><td>IP地址</td><td>email</td><td></td><td>日期</td><td></td><td></td></tr>";

//检索的记录数
maxNum = xmlDoc.getElementsByTagName(mode).length
    //每条记录的列数
    column=xmlDoc.getElementsByTagName(mode).item(0).childNodes
    //每条记录的列数
    colNum=column.length
    //页数
    pagesNumber=Math.ceil(maxNum/pagenum)-1; 
    pagesNumber2=Math.ceil(maxNum/pagenum); 
//上一个页面
function UpPage(page)
{
    thePage="前一页";
    if(page+1>1) thePage="<A HREF=&#39;#&#39; onclick=&#39;Javascript:return UpPageGo()&#39;>前一页</A>";
    return thePage;
}
function NextPage(page)
{
    thePage="后一页";
    if(page<pagesNumber) thePage="<A HREF=&#39;#&#39; onclick=&#39;Javascript:return NextPageGo()&#39;>后一页</A>";
    return thePage;
}

function UpPageGo(){ 

if(page>0) page--; 
    getContent(); 
    BodyText=""; 

} 
//当前的页数
function currentPage()
{
    var cp;
    cp="当前是第 "+(page+1)+" 页";
    return cp;
}
//总共的页数
function allPage()
{
    var ap;
    ap=&#39;总共 &#39;+(pagesNumber+1)+&#39; 页&#39;;
    return ap
}
function NextPageGo()
{ 
if (page<pagesNumber) page++;

    getContent(); 
    BodyText="";
} 

//显示分页状态栏
function pageBar(page)
{
    var pb;
    pb=UpPage(page)+"  "+NextPage(page)+"  "+currentPage()+"  "+allPage()+selectPage();
    return pb;
}
function changePage(tpage)
{    

    page=tpage
    if(page>=0) page--; 
    if (page<pagesNumber) page++;
    getContent(); 
    BodyText="";
}
function selectPage()
{
    var sp;
    sp="<select name=&#39;hehe&#39; onChange=&#39;javascript:changePage(this.options[this.selectedIndex].value)&#39;>";
    //sp="<select name=&#39;hehe&#39; onChange=&#39;alert(this.options[this.selectedIndex].value)&#39;>";
    sp=sp+"<option value=&#39;&#39;></option>";
    for (t=0;t<=pagesNumber;t++)
    {
        sp=sp+"<option value=&#39;"+t+"&#39;>"+(t+1)+"</option>";
    }
    sp=sp+"</select>"
    return sp;
}

function getContent()
{

        if (!page) page=0;
        n=page*pagenum;
        endNum=(page+1)*pagenum;
        if (endNum>maxNum) endNum=maxNum;
        BodyText=header+BodyText;
        for (;n<endNum;n++)
        {
            
            BodyText=BodyText+"<TR>";
                for (m=0;m<=colNum-1;m++)
                {    
                    mName=column.item(m).tagName;
                    BodyText=BodyText+("<TD>"+xmlDoc.getElementsByTagName(mName).item(n).text+"</TD>");
                }
            BodyText=BodyText+"</TR>"
            mm="";
            }
            showhtml.innerHTML=BodyText+"</table>"+pageBar(page); 

BodyText=""
}
</script> 

<div id="showhtml"></div>
<script>
if (maxNum==0)
        {
            document.write("没有检索到合适的人才信息")
        }
    else
        {
            getContent()
        }
</script>

</BODY>
</HTML>

//下面是tt.xml的代码




<?xml version="1.0" encoding="GB2312"?>
<rautinee>

<member id=&#39;1&#39;> 
<name>海仔</name>
<loginName>rautinee</loginName>
<email>rautinee@btamail.net.cn</email></member>

<member id=&#39;2&#39;>
<name>刚强</name>
<loginName>hehe</loginName>
<email>rautinee@chinamanagers.com</email></member>

<member id=&#39;3&#39;>
<name>金华刚</name>
<loginName>nature_it</loginName>
<email>rautinee_sea@hotmail.com</email></member>

<member id=&#39;4&#39;>
<name>的简强</name>
<loginName>tank</loginName>
<email>tank@163.com</email></member>

<member id=&#39;7&#39;>
<name>合资</name>
<loginName>kaka</loginName>
<email>kaka@eyou.com</email></member>

<member id=&#39;6&#39;>
<name>加个人</name>
<loginName>apple</loginName>
<email>apple@163.com</email></member>

<member id=&#39;8&#39;>
<name>null</name>
<loginName>sunny</loginName>
<email>rautinee@eyou.com</email></member>

<member id=&#39;10&#39;>
<name>宝贝</name>
<loginName>index</loginName>
<email>rautinee@21cn.com</email></member>

<member id=&#39;12&#39;>
<name>null</name>
<loginName>login</loginName>
<email>webmaster@chinamanagers.com</email></member>

<member id=&#39;13&#39;>
<name>jiang</name>
<loginName>123</loginName>
<email>japing@chianmanagers.com</email></member>

<member id=&#39;14&#39;>
<name>null</name>
<loginName>world</loginName>
<email>rautinee@21cn.com</email></member>

<member id=&#39;15&#39;>
<name>null</name>
<loginName>swallow</loginName>
<email>swallow@chinamanagers.com</email></member>

<member id=&#39;16&#39;>
<name>魏格</name>
<loginName>hotmail</loginName>
<email>rautinee_sea@hotmail.com</email></member>

<member id=&#39;17&#39;>
<name>null</name>
<loginName>wrong</loginName>
<email>wrong@chinamanagers.com</email></member>

<member id=&#39;18&#39;>
<name>null</name>
<loginName>leah</loginName>
<email>leah@chinamanagers.com</email></member>

<member id=&#39;19&#39;>
<name>null</name>
<loginName>ttth</loginName>
<email>rautinee@21cn.com</email></member>

</rautinee>

Currently it seems that it only supports>IE5.0

The above is a detailed introduction on how to use javascript+xml to implement paging. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!


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
Previous article：A detailed introduction to teach you how to quickly find information from an XML fileNext article：A detailed introduction to teach you how to quickly find information from an XML file

Related articles

See more