詳細介紹如何使用javascript+xml實作分頁-XML/RSS教程-PHP中文網

首頁

後端開發

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）！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1655

CakePHP 教程

1413

Laravel 教程

1306

PHP教程

1252

C# 教程

1226

Related knowledge

能否用PowerPoint開啟XML文件 Feb 19, 2024 pm 09:06 PM

XML檔可以用PPT開啟嗎？ XML，即可擴展標記語言（ExtensibleMarkupLanguage），是一種廣泛應用於資料交換和資料儲存的通用標記語言。與HTML相比，XML更加靈活，能夠定義自己的標籤和資料結構，使得資料的儲存和交換更加方便和統一。而PPT，即PowerPoint，是微軟公司開發的一種用於創建簡報的軟體。它提供了圖文並茂的方

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

MyBatis分頁插件原理詳解 Feb 22, 2024 pm 03:42 PM

MyBatis是一個優秀的持久層框架，它支援基於XML和註解的方式操作資料庫，簡單易用，同時也提供了豐富的插件機制。其中，分頁插件是使用頻率較高的插件之一。本文將深入探討MyBatis分頁外掛的原理，並結合具體的程式碼範例進行說明。一、分頁外掛原理MyBatis本身並沒有提供原生的分頁功能，但可以藉助外掛程式來實現分頁查詢。分頁插件的原理主要是透過攔截MyBatis

如何使用 PHP 函數處理 XML 資料？ May 05, 2024 am 09:15 AM

使用PHPXML函數處理XML資料：解析XML資料：simplexml_load_file()和simplexml_load_string()載入XML檔案或字串。存取XML資料：利用SimpleXML物件的屬性和方法來取得元素名稱、屬性值和子元素。修改XML資料：使用addChild()和addAttribute()方法新增元素和屬性。序列化XML資料：asXML()方法將SimpleXML物件轉換為XML字串。實戰案例：解析產品饋送XML，提取產品信息，轉換並將其儲存到資料庫中。

您如何在PHP中解析和處理HTML/XML？ Feb 07, 2025 am 11:57 AM

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML（可擴展的標記語言）是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

PHP數組分頁的最佳實作方式 May 04, 2024 pm 02:39 PM

PHP陣列分頁有兩種最常見的方式：使用array_slice()函數：計算要跳過的元素數量，然後提取指定範圍的元素。使用內建迭代器：實作Iterator接口，rewind()、key()、current()、next()和valid()方法用於遍歷指定範圍內的元素。

如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務

XML 解析的 Java 函式庫比較：尋找最佳解決方案 Mar 09, 2024 am 09:10 AM

簡介XML（可擴展標記語言）是一種用於儲存和傳輸資料的流行格式。在Java中解析XML是許多應用程式的必要任務，從資料交換到文件處理。為了有效地解析XML，開發人員可以使用各種Java函式庫。本文將比較一些最受歡迎的XML解析函式庫，重點放在它們的特性、功能和效能，以幫助開發人員做出明智的選擇。 DOM（文件物件模型）解析函式庫JavaXMLDOMAPI：由oracle提供的標準DOM實作。它提供了一個物件模型，允許開發人員存取和操作XML文件。 DocumentBuilderFactoryfactory=D

See all articles

詳細介紹如何使用javascript+xml實作分頁

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題