• 使用javascript+xml实现分页


    今天才开通我的csdn blog,把俺以前的帖子拿出来和大家分享。

    基于web的技术中,分页是一个老的不能再老的,但大家津津乐道的问题,随着xml技术的日渐应用,把xml应用到分页当中,也是一种可能,当然网上的教程很多,当我都是看得稀里糊涂,索性自己写一个,与大家分享、指正。
    共有两个文件tmh.htm & tt.xml
    源代码如下:
    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='#' onclick='Javascript:return UpPageGo()'>前一页</A>";
    return thePage;
    }
    function NextPage(page)
    {
    thePage="后一页";
    if(page<pagesNumber) thePage="<A HREF='#' onclick='Javascript:return NextPageGo()'>后一页</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='总共 '+(pagesNumber+1)+' 页';
    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='hehe' onChange='javascript:changePage(this.options[this.selectedIndex].value)'>";
    //sp="<select name='hehe' onChange='alert(this.options[this.selectedIndex].value)'>";
    sp=sp+"<option value=''></option>";
    for (t=0;t<=pagesNumber;t++)
    {
    sp=sp+"<option value='"+t+"'>"+(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='1'> 
    <name>海仔</name>
    <loginName>rautinee</loginName>
    <email>rautinee@btamail.net.cn</email></member>

    <member id='2'>
    <name>刚强</name>
    <loginName>hehe</loginName>
    <email>rautinee@chinamanagers.com</email></member>

    <member id='3'>
    <name>金华刚</name>
    <loginName>nature_it</loginName>
    <email>rautinee_sea@hotmail.com</email></member>

    <member id='4'>
    <name>的简强</name>
    <loginName>tank</loginName>
    <email>tank@163.com</email></member>

    <member id='7'>
    <name>合资</name>
    <loginName>kaka</loginName>
    <email>kaka@eyou.com</email></member>

    <member id='6'>
    <name>加个人</name>
    <loginName>apple</loginName>
    <email>apple@163.com</email></member>

    <member id='8'>
    <name>null</name>
    <loginName>sunny</loginName>
    <email>rautinee@eyou.com</email></member>

    <member id='10'>
    <name>宝贝</name>
    <loginName>index</loginName>
    <email>rautinee@21cn.com</email></member>

    <member id='12'>
    <name>null</name>
    <loginName>login</loginName>
    <email>webmaster@chinamanagers.com</email></member>

    <member id='13'>
    <name>jiang</name>
    <loginName>123</loginName>
    <email>japing@chianmanagers.com</email></member>

    <member id='14'>
    <name>null</name>
    <loginName>world</loginName>
    <email>rautinee@21cn.com</email></member>

    <member id='15'>
    <name>null</name>
    <loginName>swallow</loginName>
    <email>swallow@chinamanagers.com</email></member>

    <member id='16'>
    <name>魏格</name>
    <loginName>hotmail</loginName>
    <email>rautinee_sea@hotmail.com</email></member>

    <member id='17'>
    <name>null</name>
    <loginName>wrong</loginName>
    <email>wrong@chinamanagers.com</email></member>

    <member id='18'>
    <name>null</name>
    <loginName>leah</loginName>
    <email>leah@chinamanagers.com</email></member>

    <member id='19'>
    <name>null</name>
    <loginName>ttth</loginName>
    <email>rautinee@21cn.com</email></member>

    </rautinee>
    目前只支持>IE5.0
    如果你有什么好的方法和改进,请来信通知我,或访问网站http://www.tryitsoft.com谢谢。

    ok ,just enjoy it ,and good luck
  • 相关阅读:
    SpringDataJPA中No serializer
    SpringDataJPA中NO Session错误
    SpringDataJpa
    SSJ集成
    Spring创建对象的4种方式
    Properties在xml中添加值
    在ubuntu上进行React-Native开发之环境搭建
    免费学外语?上这10个网站。知道一个算你牛!
    ListView circleImageView Item test
    apk瘦身 提高优化效果
  • 原文地址:https://www.cnblogs.com/neozhu/p/285399.html
Copyright © 2020-2023  润新知