SoFunction
Updated on 2025-04-08

Implement paging using javascript+xml

In web-based technology, paging is a problem that everyone talks about. With the increasing application of xml technology, it is also a possibility to apply xml to paging. Of course, there are many tutorials on the Internet. When I was confused, I simply wrote one myself to share and correct it with everyone.
There are two files in total &
The source code is as follows:

___________________________________________________
<!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="../" type="text/css">
</HEAD>
<BODY>

<script language="javascript">
//***************Variable Related Definition***************
//*
//*         Email:rautinee@      *
//*This program can be freely propagated and used, but please be sure to retain this information.
//****************************************
var pagenum=4; //How many pieces of information are displayed on each page
var page=0 ;
var contpage ;
var BodyText="";
var xmlDoc = new ActiveXObject("");
var mode="member";
var toolBar;
="false"
("")
//*************** This place is changed based on the actual field name you obtained
header="<TABLE border=1><tr><td>Name</td><td>Icon</td><td>IP Address</td><td>email</td><td></td><td>Date</td><td></td></td></tr>";

//Number of retrieved records
maxNum = (mode).length
//Number of columns per record
    column=(mode).item(0).childNodes
//Number of columns per record
    colNum=
//Number of pages
    pagesNumber=(maxNum/pagenum)-1;
    pagesNumber2=(maxNum/pagenum);
//Previous page
function UpPage(page)
{
thePage="Previous page";
if(page+1>1) thePage="<A HREF='#' onclick='Javascript:return UpPageGo()'>Previous page</A>";
    return thePage;
}
function NextPage(page)
{
thePage="Last Page";
if(page<pagesNumber) thePage="<A HREF='#' onclick='Javascript:return NextPageGo()'>Last Page</A>";
    return thePage;
}

function UpPageGo(){

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

}
//The current number of pages
function currentPage()
{
    var cp;
cp="currently the "+(page+1)+" page";
    return cp;
}
//Total number of pages
function allPage()
{
    var ap;
ap='Total '+(pagesNumber+1)+' pages';
    return ap
}
function NextPageGo()
{
if (page<pagesNumber) page++;

    getContent();
    BodyText="";
}

//Show the paging status bar
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([].value)'>";
    //sp="<select name='hehe' onChange='alert([].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=(m).tagName;
                    BodyText=BodyText+("<TD>"+(mName).item(n).text+"</TD>");
                }
            BodyText=BodyText+"</TR>"
            mm="";
            }
            =BodyText+"</table>"+pageBar(page);

BodyText=""
}
</script>

<div ></div>
<script>
if (maxNum==0)
        {
("No suitable talent information was retrieved")
        }
    else
        {
            getContent()
        }
</script>

</BODY>
</HTML>

//The following code




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

<member id='1'>
<name>Haizai</name>
<loginName>rautinee</loginName>
<email>rautinee@</email></member>

<member id='2'>
<name>Strong</name>
<loginName>hehe</loginName>
<email>rautinee@</email></member>

<member id='3'>
<name>Jinhua Gang</name>
<loginName>nature_it</loginName>
<email>rautinee_sea@</email></member>

<member id='4'>
<name>Jian Qiang</name>
<loginName>tank</loginName>
<email>tank@</email></member>

<member id='7'>
<name>Joint Venture</name>
<loginName>kaka</loginName>
<email>kaka@</email></member>

<member id='6'>
<name>Add individual</name>
<loginName>apple</loginName>
<email>apple@</email></member>

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

<member id='10'>
<name>Baby</name>
<loginName>index</loginName>
<email>rautinee@</email></member>

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

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

<member id='14'>
<name>null</name>
<loginName>world</loginName>
<email>rautinee@</email></member>

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

<member id='16'>
<name>Weiger</name>
<loginName>hotmail</loginName>
<email>rautinee_sea@</email></member>

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

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

<member id='19'>
<name>null</name>
<loginName>ttth</loginName>
<email>rautinee@</email></member>

</rautinee>
Currently it seems that it only supports >IE5.0
If you have any good methods and improvements, please write to me and thank you.

ok ,just enjoy it ,and good luck