純js寫的xml資料分頁顯示程式
//===============================================================================
// http://www.e-works.net.cn
// 中國資訊製造業資訊科技有限公司
//===============================================================================
// Copyright (C) 2002-2012 E-WORKS
// All rights reserved.
//
//==============================================================================
// 錯誤資訊常量
var MSG_INVALID_XMLFILE = "您的瀏覽器不支援xml檔案讀取,於是本頁面禁止您的操作,推薦使用IE5.0以上可以解決此問題!";
function importXML(file)
{
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e)
{
alert(e.message);
return;
}
}
xmlDoc.async=false;
xmlDoc.load(file);
return xmlDoc;
}
// 讀取伺服器上的xml檔案
function loadXML(xmlFile)
{
var xmlDoc;
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
else if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument('', 'doc', null);
xmlDoc.load(xmlFile);
}
else
{
return null;
}
return xmlDoc;
}
// 檢測 生成xml文件
function checkXMLDocObj(xmlFile)
{
// var xmlDoc = loadXML(xmlFile);
var xmlDoc = importXML(xmlFile);
if(xmlDoc == null)
{
alert(MSG_INVALID_XMLFILE);
return false ;
}
return xmlDoc;
}
//分頁顯示函式
function showInfoByPage(pindex,psize)
{
var xmlDoc = checkXMLDocObj('/xml/data.xml') ;//獲取xml資料
var root=xmlDoc.documentElement;
var num=0;
if(checllq())//檢查是否為firefox，因為firefox得到資料行數是真實的兩倍
num=((root.childNodes.length-1)/2);
else
num=root.childNodes.length;//資料行數
var pageSize=psize;
var str='';
if((num-1)/pageSize>parseInt((num-1)/pageSize))
{
totalPage=parseInt((num-1)/pageSize)+1;
}
else
{
totalPage=parseInt((num-1)/pageSize);
}
var currentPage=pindex;//當前頁數
var startRow=(currentPage-1)*pageSize+1;//開始顯示的行數
var endRow=currentPage*pageSize+1;//結束的行數
endRow=(endRow>num)?num:endRow;
for(var i=0;i<num;i++)
{
if(i>=startRow&&i<endRow)
{
var node=root.childNodes[i];
if(node.nodeType==1){
var sitename=node.getAttribute('linkname');
var linkurl=node.getAttribute('linkurl');
var linklogo=node.getAttribute('linklogo');
var introduce=node.getAttribute('introduce');
if(linklogo!="")
{
str+="<li> ";
str+=" <div class=\"name\"><a href=\""+linkurl+"\" title=\""+sitename+"\" target=\"_blank\">"+sitename+"</a></div>";
str+=" <div class=\"pic\"><IMG height=\"31\" border=\"0\" src=\""+linklogo+"\"></div>";
str+=" <div class=\"int\">"+introduce+"</div></li>";
}
else if(linklogo=="")
{
str+="<li> ";
str+=" <div class=\"name\"><a href=\""+linkurl+"\" title=\""+sitename+"\" target=\"_blank\">"+sitename+"</a></div>";
str+=" <div class=\"pic\"></div>";
str+=" <div class=\"int\">"+introduce+"</div></li>";
}
}
}
}
var pageStr="";
if(currentPage>=1)
{
pageStr+="<ul>";
if(currentPage<=1)
{
pageStr+="<li class=\"fy1\"><span class=\"style1\"><< 首頁</span></li>";
pageStr+="<li class=\"fy3\"><span class=\"style1\">上一頁</span></li>";
}
else
{
pageStr+="<li class=\"fy1\"><a onmouseover=\"this.style.cursor='pointer'\" onclick=\"showInfoByPage(1,"+psize+")\"><< 首頁</a></li>";
pageStr+="<li class=\"fy3\"><a onmouseover=\"this.style.cursor='pointer'\" onclick=\"showInfoByPage("+(currentPage-1)+","+psize+")\">上一頁</a></li>";
}
for(var i=1;i<=totalPage;i++)
{
if(i==currentPage)
{
pageStr+="<li class=\"fy5\"><span class=\"style1\">"+i+"</span></li>";
}
else
{
pageStr+="<li class=\"fy5\"><a onmouseover=\"this.style.cursor='pointer'\" onclick=\"showInfoByPage("+(i)+","+psize+")\">"+i+"</a>";
}
}
if(currentPage>=totalPage)
{
pageStr+="<li class=\"fy3\"><span class=\"style1\">下一頁</span></li>";
pageStr+="<li class=\"fy1\"><span class=\"style1\">末頁 >></span></li>";
}
else
{
pageStr+="<li class=\"fy3\"><a onmouseover=\"this.style.cursor='pointer'\" onclick=\"showInfoByPage("+(currentPage+1)+","+psize+")\">下一頁</a></li>";
pageStr+="<li class=\"fy1\"><a onmouseover=\"this.style.cursor='pointer'\" onclick=\"showInfoByPage("+totalPage+","+psize+")\">末頁 >></a></li>";
}
pageStr+="<li class=\"fy4\">共有<span class=\"style1\">"+num+"</span>條記錄,每頁<span class=\"style1\">"+pageSize+"</span>條記錄 共有<span class=\"style1\">"+totalPage+"</span>頁,當前第<span class=\"style1\">"+currentPage+"</span>頁</li>";
pageStr+="</ul>";
}
document.getElementById("website").innerHTML=str;
document.getElementById("pageinfo").innerHTML=pageStr;
}
function checllq()
{
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串
var isFF = userAgent.indexOf("Firefox") > -1 ; //判斷是否Firefox
//以下進行測試
if(isFF)
{
return true;
}
else
{
return false;
}
}