详细介绍如何使用javascript+xml实现分页-Tutorial XML/RSS-php.cn

Rumah

pembangunan bahagian belakang

Tutorial XML/RSS

详细介绍如何使用javascript+xml实现分页

黄舟

Mar 06, 2017 pm 04:38 PM

基于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=&#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>

目前好像是只支持>IE5.0

以上就是详细介绍如何使用javascript+xml实现分页的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Anatomi dokumen RSS: Struktur dan ElemenMay 10, 2025 am 12:23 AM

Struktur dokumen RSS termasuk tiga elemen utama: 1.: Elemen akar, menentukan versi RSS; 2.: Mengandungi maklumat saluran, seperti tajuk, pautan, dan keterangan; 3.: Mewakili penyertaan kandungan tertentu, termasuk tajuk, pautan, keterangan, dll.

Memahami Dokumen RSS: Panduan KomprehensifMay 09, 2025 am 12:15 AM

Dokumen RSS adalah mekanisme langganan mudah untuk menerbitkan kemas kini kandungan melalui fail XML. 1. Struktur dokumen RSS terdiri daripada dan unsur -unsur dan mengandungi pelbagai elemen. 2. Gunakan pembaca RSS untuk melanggan saluran dan mengekstrak maklumat dengan parsing XML. 3. Penggunaan lanjutan termasuk penapisan dan penyortiran menggunakan perpustakaan fikanparser. 4. Kesilapan umum termasuk isu parsing XML dan pengekodan. Format XML dan pengekodan perlu disahkan semasa debugging. 5. Cadangan Pengoptimuman Prestasi termasuk dokumen RSS cache dan parsing tak segerak.

RSS, XML dan Web Moden: Sindikasi Kandungan Deep DiveMay 08, 2025 am 12:14 AM

RSS dan XML masih penting dalam web moden. 1.RSS digunakan untuk menerbitkan dan mengedarkan kandungan, dan pengguna boleh melanggan dan mendapatkan kemas kini melalui pembaca RSS. 2. XML adalah bahasa markup dan menyokong penyimpanan data dan pertukaran, dan fail RSS didasarkan pada XML.

Beyond Basics: Ciri -ciri RSS Lanjutan Diaktifkan oleh XMLMay 07, 2025 am 12:12 AM

RSS membolehkan embedding kandungan multimedia, langganan bersyarat, dan prestasi dan pengoptimuman keselamatan. 1) Kandungan multimedia seperti audio dan video melalui tag. 2) Gunakan ruang nama XML untuk melaksanakan langganan bersyarat, yang membolehkan pelanggan menapis kandungan berdasarkan keadaan tertentu. 3) Mengoptimumkan prestasi dan keselamatan RSSFEED melalui seksyen CDATA dan XMLSchema untuk memastikan kestabilan dan pematuhan piawaian.

Decoding RSS: Primer XML untuk Pemaju WebMay 06, 2025 am 12:05 AM

RSS adalah format berasaskan XML yang digunakan untuk menerbitkan data yang sering dikemas kini. Sebagai pemaju web, pemahaman RSS dapat meningkatkan keupayaan pengagregatan kandungan dan kemampuan kemas kini automasi. Dengan mempelajari struktur RSS, parsing dan generasi, anda akan dapat mengendalikan RSSFeeds dengan yakin dan mengoptimumkan kemahiran pembangunan web anda.

JSON vs XML: Mengapa RSS memilih XMLMay 05, 2025 am 12:01 AM

RSS memilih XML dan bukannya JSON kerana: 1) struktur dan keupayaan pengesahan XML lebih baik daripada JSON, yang sesuai untuk keperluan struktur data kompleks RSS; 2) XML disokong secara meluas pada masa itu; 3) Versi awal RSS didasarkan pada XML dan telah menjadi standard.

RSS: Format berasaskan XML dijelaskanMay 04, 2025 am 12:05 AM

RSS adalah format berasaskan XML yang digunakan untuk melanggan dan membaca kandungan yang sering dikemas kini. Prinsip kerjanya termasuk dua bahagian: penjanaan dan penggunaan, dan menggunakan pembaca RSS dapat memperoleh maklumat dengan cekap.

Di dalam dokumen RSS: tag dan atribut pentingMay 03, 2025 am 12:12 AM

Struktur teras dokumen RSS termasuk tag dan atribut XML. Langkah -langkah parsing dan generasi khusus adalah seperti berikut: 1. Baca fail XML, proses dan tag. 2. Ekstrak ,,, dan lain -lain Maklumat Tag. 3. Mengendalikan tag dan atribut tersuai untuk memastikan keserasian versi. 4. Gunakan cache dan pemprosesan tak segerak untuk mengoptimumkan prestasi untuk memastikan kebolehbacaan kod.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

3 minggu yang laluByDDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Bagaimana untuk memperbaiki KB5055612 gagal dipasang di Windows 10?

3 minggu yang laluByDDD

Nordhold: Sistem Fusion, dijelaskan

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.