DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> 使用javascript+xml實現分頁
使用javascript+xml實現分頁
編輯:XML詳解     

 基於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


XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved