纯js写的xml数据分页显示程序

最新推荐文章于 2019-08-06 12:29:07 发布

ilovewebservice

最新推荐文章于 2019-08-06 12:29:07 发布

阅读量1.7k

点赞数 1

分类专栏： javascript/jquery 文章标签： xml class firefox function div mozilla

本文链接：https://blog.youkuaiyun.com/ilovewebservice/article/details/6928928

版权

javascript/jquery 专栏收录该内容

6 篇文章

订阅专栏

这段代码展示了如何使用JavaScript处理XML数据，并实现分页显示。通过`importXML`和`loadXML`函数读取XML文件，然后用`checkXMLDocObj`验证XML文档对象。`showInfoByPage`函数根据指定页码和每页大小展示数据，同时生成分页导航链接。代码还包含了一个Firefox特定的兼容性检查函数`checllq`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//===============================================================================
// http://www.e-works.net.cn
// 中国信息制造业信息技术有限公司
//===============================================================================
// Copyright (C) 2002-2012 E-WORKS
// All rights reserved.
//
//==============================================================================

// 错误信息常量
var MSG_INVALID_XMLFILE = "您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!";

// 读取服务器上的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 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 οnmοuseοver=\"this.style.cursor='pointer'\" οnclick=\"showInfoByPage(1,"+psize+")\"><< 首页</a></li>";
pageStr+="<li class=\"fy3\"><a οnmοuseοver=\"this.style.cursor='pointer'\" οnclick=\"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 οnmοuseοver=\"this.style.cursor='pointer'\" οnclick=\"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 οnmοuseοver=\"this.style.cursor='pointer'\" οnclick=\"showInfoByPage("+(currentPage+1)+","+psize+")\">下一页</a></li>";
pageStr+="<li class=\"fy1\"><a οnmοuseοver=\"this.style.cursor='pointer'\" οnclick=\"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;
  }

   }