web中数据静态分页

原创 2006年05月31日 15:01:00

方法1:
使用script创建内建数据,将script数据和相关web元素绑定,这种方法比较繁琐,但对浏览器要求较低(只要支持script即可),在数据交互性强的情况下比较实用,可参考richClient脚本。

方法2:需要xml dom
利用xml和xsl(示例源码来自网络,个人稍微改编一下)
A、从xml(数据)文件和xsl(分页模板)文件中产生分页
fenyeXMLFile.htm:
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<TITLE>利用XSL模板实现分页范例</TITLE>
<script language="javascript" src="CXSLTemplate.js"></script>
<SCRIPT language="javascript">
var XMLFile="fenye.xml", XSLFile="fenye.xsl";
var xslt=new CXSLTemplate(XMLFile, XSLFile);

function Init()
{
 container.innerHTML=xslt.GetOutput();
}

function goPage(pageNo)
{
 if(parseInt(pageSize.value)<2)
 {
 alert("分页大小不能小于2");
 pageSize.value=2;
 return;
 }
 xslt.SetParam("PageNo", pageNo);
 xslt.SetParam("PageSize",pageSize.value);
 container.innerHTML=xslt.GetOutput();
}
</SCRIPT>
</HEAD>
<BODY onload="Init();">
<div id=container></div>
<br>
输入分页大小<input id=pageSize value=3>
<input type=button onclick='goPage(1);' value=确定>
</BODY>
</HTML>

fenye.xml:
<?xml version="1.0" encoding="GB2312"?>
<?xml-stylesheet type="text/xsl" href="fenye.xsl"?>
<Root>
 <Item1>
  <No>1</No>
  <Name>姓名1</Name>
 </Item1>
 <Item1>
  <No>2</No>
  <Name>姓名2</Name>
 </Item1>
 <Item1>
  <No>3</No>
  <Name>姓名3</Name>
 </Item1>
 <Item1>
  <No>4</No>
  <Name>姓名4</Name>
 </Item1>
 <Item1>
  <No>5</No>
  <Name>姓名5</Name>
 </Item1>
 <Item1>
  <No>6</No>
  <Name>姓名6</Name>
 </Item1>
 <Item1>
  <No>7</No>
  <Name>姓名7</Name>
 </Item1>
</Root>

fenye.xsl:
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output method="html" omit-xml-declaration="yes"/>
 <xsl:param name="PageNo">1</xsl:param>
 <xsl:param name="FuncName">goPage</xsl:param>
 <xsl:param name="PageSize">3</xsl:param>
 <!--PageSize表示一页里显示的记录数,默认为2-->

 <xsl:template match="/Root">
  <xsl:variable name="MaxNo" select="count(Item1)"/>

  <table border="1" align="center">
   <tr>
    <xsl:for-each select="Item1[1]/*">
     <th>
      <xsl:value-of select="name()"/>
     </th>
    </xsl:for-each>
   </tr>
   <xsl:for-each select="Item1[(position() &lt; $PageNo*$PageSize) and (position() &gt;= (number($PageNo)-1)*$PageSize) and (position() mod $PageSize = 1)]">
    <xsl:apply-templates select=".|following-sibling::*[position()&lt;$PageSize]"/>
   </xsl:for-each>
  </table>

  <div>
   <xsl:call-template name="PrevPage"/>
   <xsl:for-each select="Item1[position() mod $PageSize = 1]">
    <xsl:variable name="Position" select="position()"/>
    <xsl:call-template name="PageLink">
     <xsl:with-param name="Position" select="$Position"/>
    </xsl:call-template>
   </xsl:for-each>
   <xsl:call-template name="NextPage">
    <xsl:with-param name="MaxNo" select="$MaxNo"/>
   </xsl:call-template>
  </div>

 </xsl:template>

 <xsl:template match="Item1">
  <tr>
   <td>
    <xsl:value-of select="No"/>
   </td>
   <td>
    <xsl:value-of select="Name"/>
   </td>
  </tr>
 </xsl:template>

 <xsl:template name="PrevPage"><!-- 上页 -->
  <xsl:variable name="Position" select="number($PageNo)-1"/>
  <xsl:variable name="Href">javascript:<xsl:value-of select="$FuncName"/>(<xsl:value-of select="$Position"/>);</xsl:variable>
  <a>
   <xsl:if test="$Position>=1">
    <xsl:attribute name="href"><xsl:value-of select="$Href"/></xsl:attribute>
   </xsl:if>
   上一页
  </a>
  <xsl:call-template name="Separator"/>
 </xsl:template>

 <xsl:template name="NextPage"><!-- 下页 -->
  <xsl:param name="MaxNo"/>
  <xsl:variable name="Position" select="number($PageNo)+1"/>
  <xsl:variable name="Href">javascript:<xsl:value-of select="$FuncName"/>(<xsl:value-of select="$Position"/>);</xsl:variable>
  <a>
   <xsl:if test="(number($Position)-1)*$PageSize&lt;$MaxNo">
    <xsl:attribute name="href"><xsl:value-of select="$Href"/></xsl:attribute>
   </xsl:if>
   下一页
  </a>
 </xsl:template>

 <xsl:template name="PageLink"><!-- 页号的超链接 -->
  <xsl:param name="Position"/>
  <xsl:variable name="Href">javascript:<xsl:value-of select="$FuncName"/>(<xsl:value-of select="$Position"/>);</xsl:variable>
  <a>
   <xsl:if test="$Position!=$PageNo">
    <xsl:attribute name="href"><xsl:value-of select="$Href"/></xsl:attribute>
   </xsl:if>
   第 <xsl:value-of select="position()"/> 页
  </a>
  <xsl:call-template name="Separator"/>
 </xsl:template>

 <xsl:template name="Separator"><!-- 页号的分隔符 -->
  &#160;|&#160;
 </xsl:template>

</xsl:stylesheet>

CXSLTemplate.js:
//---------  CXSLTemplate.js  开始 -----------

function CXSLTemplate(XMLFile,XSLFile)
{
 this.SetXML=SetXML;
 this.SetXMLStreamData=SetXMLStreamData;
 this.SetUseXMLFile=SetUseXMLFile;
 this.SetXSL=SetXSL;
 this.SetXSLStreamData=SetXSLStreamData;
 this.SetUseXSLFile=SetUseXSLFile;
 this.SetParam=SetParam;
 this.DeleteParam=DeleteParam;
 this.DeleteAllParam=DeleteAllParam;
 this.GetOutput=GetOutput;

 var m_strXMLFile="";
 var m_strXMLStreamData="";
 var m_bUseXMLFile=true;
 var m_strXSLFile="";
 var m_strXSLStreamData="";
 var m_bUseXSLFile=true;
 var m_strOutput="";
 var m_arrParam=new Array();
 var bNeedRefresh=true;

 function m_CXSLTemplate(XMLFile,XSLFile)
 {
  if(XMLFile!=undefined) SetXML(XMLFile);
  if(XSLFile!=undefined) SetXSL(XSLFile);
 }
 function SetXML(strXMLFile)
 {
  if(strXMLFile==undefined) return;
  //if(m_strXMLFile!=strXMLFile)
  bNeedRefresh=true;
  m_strXMLFile=strXMLFile;
  //SetUseXMLFile(true);
 }
 function SetXMLStreamData(strXMLStreamData)
 {
  if(strXMLStreamData==undefined) return;
  //if(m_strXMLStreamData!=strXMLStreamData)
  bNeedRefresh=true;
  m_strXMLStreamData=strXMLStreamData;
  //SetUseXMLFile(false);
 }
 function SetUseXMLFile(bUseXMLFile)
 {
  if(bUseXMLFile==undefined) bUseXMLFile=true;
  m_bUseXMLFile=bUseXMLFile;
 }
 function SetXSL(strXSLFile)
 {
  if(strXSLFile==undefined) return;
  //if(m_strXSLFile!=strXSLFile)
  bNeedRefresh=true;
  m_strXSLFile=strXSLFile;
  //SetUseXSLFile(true);
 }
 function SetXSLStreamData(strXSLStreamData)
 {
  if(strXSLStreamData==undefined) return;
  //if(m_strXSLStreamData!=strXSLStreamData)
  bNeedRefresh=true;
  m_strXSLStreamData=strXSLStreamData;
  //SetUseXSLFile(false);
 }
 function SetUseXSLFile(bUseXSLFile)
 {
  if(bUseXSLFile==undefined) bUseXSLFile=true;
  m_bUseXSLFile=bUseXSLFile;
 }
 function SetParam(param, value)
 {
  if(param==undefined) return;
  bNeedRefresh=true;
  m_arrParam[param]=value;
 }
 function DeleteParam(param)
 {
  if(param==undefined) return;
  bNeedRefresh=true;
  m_arrParam.splice(param,1);
 }
 function DeleteAllParam()
 {
  bNeedRefresh=true;
  m_arrParam=null;
  m_arrParam=new Array();
 }
 function GetOutput(bNoRefresh)
 {
  if(arguments.length<1) bNoRefresh=true;
  if(!bNoRefresh || bNeedRefresh) m_strOutput=m_GetOutput();
  return m_strOutput;
 }

 function m_GetOutput()
 {
  bNeedRefresh=false;
  if(m_bUseXMLFile){if(m_strXMLFile=="") return "";}
  else if(m_strXMLStreamData=="") return "";
  if(m_bUseXSLFile){if(m_strXSLFile=="") return "";}
  else if(m_strXSLStreamData=="") return "";

  var xmlDoc=new ActiveXObject("MSXML2.FreeThreadedDOMDocument.3.0");
  xmlDoc.async=false;
  if(m_bUseXMLFile) xmlDoc.load(m_strXMLFile);
  else xmlDoc.loadXML(m_strXMLStreamData);

  var xslDoc=new ActiveXObject("MSXML2.FreeThreadedDOMDocument.3.0");
  xslDoc.async=false;
  if(m_bUseXSLFile) xslDoc.load(m_strXSLFile);
  else xslDoc.loadXML(m_strXSLStreamData);

  var xslTemplate=new ActiveXObject("MSXML2.XSLTemplate.3.0");
  xslTemplate.stylesheet=xslDoc;

  var xslProcessor=xslTemplate.createProcessor();
  xslProcessor.input=xmlDoc;
  for(var i in m_arrParam) xslProcessor.addParameter(i,m_arrParam[i]);
  xslProcessor.transform();
  return xslProcessor.output;
 }

 m_CXSLTemplate(XMLFile,XSLFile);
}

//---------  CXSLTemplate.js  结束 -----------
/*
<script language="javascript">
 xslt=new CXSLTemplate();
 xslt.SetXML("test.xml");
 xslt.SetXSL("test.xsl");
 xslt.SetParam("Param", paramValue);
 alter(xslt.GetOutput());
</script>
//*/

B、从xml数据流产生分页(个人认为这种方法在实际开发中比A实用)
fenyeXMLStream.htm:
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<TITLE>利用XSL模板实现分页范例</TITLE>
<script language="javascript" src="CXSLTemplate.js"></script>
<SCRIPT language="javascript">
var XMLStream="<?xml version=/"1.0/" encoding=/"GB2312/"?>";
//XMLStream+="<?xml-stylesheet type=/"text/xsl/" href=/"fenye.xsl/"?>";
XMLStream+="<Root>";
XMLStream+="<Item1><No>1</No><Name>姓名1</Name></Item1>";
XMLStream+="<Item1><No>2</No><Name>姓名2</Name></Item1>";
XMLStream+="<Item1><No>3</No><Name>姓名3</Name></Item1>";
XMLStream+="<Item1><No>4</No><Name>姓名4</Name></Item1>";
XMLStream+="<Item1><No>5</No><Name>姓名5</Name></Item1>";
XMLStream+="<Item1><No>6</No><Name>姓名6</Name></Item1>";
XMLStream+="<Item1><No>7</No><Name>姓名7</Name></Item1>";
XMLStream+="</Root>";

var XSLStream="<?xml version=/"1.0/" encoding=/"GB2312/"?>";
XSLStream+="<xsl:stylesheet version=/"1.0/" xmlns:xsl=/"http://www.w3.org/1999/XSL/Transform/">";
XSLStream+="<xsl:output method=/"html/" omit-xml-declaration=/"yes/"/>";
XSLStream+="<xsl:param name=/"PageNo/">1</xsl:param>";
XSLStream+="<xsl:param name=/"FuncName/">goPage</xsl:param>";
XSLStream+="<xsl:param name=/"PageSize/">3</xsl:param>";
XSLStream+="<xsl:template match=/"/Root/">";
XSLStream+="<xsl:variable name=/"MaxNo/" select=/"count(Item1)/"/>";
XSLStream+="<table border=/"1/" align=/"center/">";
XSLStream+="<tr>";
XSLStream+="<xsl:for-each select=/"Item1[1]/*/">";
XSLStream+="<th>";
XSLStream+="<xsl:value-of select=/"name()/"/>";
XSLStream+="</th>";
XSLStream+="</xsl:for-each>";
XSLStream+="</tr>";
XSLStream+="<xsl:for-each select=/"Item1[(position() &lt; $PageNo*$PageSize) and (position() &gt;= (number($PageNo)-1)*$PageSize) and (position() mod $PageSize = 1)]/">";
XSLStream+="<xsl:apply-templates select=/".|following-sibling::*[position()&lt;$PageSize]/"/>";
XSLStream+="</xsl:for-each>";
XSLStream+="</table>";
XSLStream+="<div>";
XSLStream+="<xsl:call-template name=/"PrevPage/"/>";
XSLStream+="<xsl:for-each select=/"Item1[position() mod $PageSize = 1]/">";
XSLStream+="<xsl:variable name=/"Position/" select=/"position()/"/>";
XSLStream+="<xsl:call-template name=/"PageLink/">";
XSLStream+="<xsl:with-param name=/"Position/" select=/"$Position/"/>";
XSLStream+="</xsl:call-template>";
XSLStream+="</xsl:for-each>";
XSLStream+="<xsl:call-template name=/"NextPage/">";
XSLStream+="<xsl:with-param name=/"MaxNo/" select=/"$MaxNo/"/>";
XSLStream+="</xsl:call-template>";
XSLStream+="</div>";
XSLStream+="</xsl:template>";
XSLStream+="<xsl:template match=/"Item1/">";
XSLStream+="<tr>";
XSLStream+="<td>";
XSLStream+="<xsl:value-of select=/"No/"/>";
XSLStream+="</td>";
XSLStream+="<td>";
XSLStream+="<xsl:value-of select=/"Name/"/>";
XSLStream+="</td>";
XSLStream+="</tr>";
XSLStream+="</xsl:template>";
XSLStream+="<xsl:template name=/"PrevPage/">";
XSLStream+="<xsl:variable name=/"Position/" select=/"number($PageNo)-1/"/>";
XSLStream+="<xsl:variable name=/"Href/">javascript:<xsl:value-of select=/"$FuncName/"/>(<xsl:value-of select=/"$Position/"/>);</xsl:variable>";
XSLStream+="<a>";
XSLStream+="<xsl:if test=/"$Position>=1/">";
XSLStream+="<xsl:attribute name=/"href/"><xsl:value-of select=/"$Href/"/></xsl:attribute>";
XSLStream+="</xsl:if>";
XSLStream+="上一页";
XSLStream+="</a>";
XSLStream+="<xsl:call-template name=/"Separator/"/>";
XSLStream+="</xsl:template>";
XSLStream+="<xsl:template name=/"NextPage/">";
XSLStream+="<xsl:param name=/"MaxNo/"/>";
XSLStream+="<xsl:variable name=/"Position/" select=/"number($PageNo)+1/"/>";
XSLStream+="<xsl:variable name=/"Href/">javascript:<xsl:value-of select=/"$FuncName/"/>(<xsl:value-of select=/"$Position/"/>);</xsl:variable>";
XSLStream+="<a>";
XSLStream+="<xsl:if test=/"(number($Position)-1)*$PageSize&lt;$MaxNo/">";
XSLStream+="<xsl:attribute name=/"href/"><xsl:value-of select=/"$Href/"/></xsl:attribute>";
XSLStream+="</xsl:if>";
XSLStream+="下一页";
XSLStream+="</a>";
XSLStream+="</xsl:template>";
XSLStream+="<xsl:template name=/"PageLink/">";
XSLStream+="<xsl:param name=/"Position/"/>";
XSLStream+="<xsl:variable name=/"Href/">javascript:<xsl:value-of select=/"$FuncName/"/>(<xsl:value-of select=/"$Position/"/>);</xsl:variable>";
XSLStream+="<a>";
XSLStream+="<xsl:if test=/"$Position!=$PageNo/">";
XSLStream+="<xsl:attribute name=/"href/"><xsl:value-of select=/"$Href/"/></xsl:attribute>";
XSLStream+="</xsl:if>";
XSLStream+="第 <xsl:value-of select=/"position()/"/> 页";
XSLStream+="</a>";
XSLStream+="<xsl:call-template name=/"Separator/"/>";
XSLStream+="</xsl:template>";
XSLStream+="<xsl:template name=/"Separator/">";
XSLStream+="&#160;|&#160;";
XSLStream+="</xsl:template>";
XSLStream+="</xsl:stylesheet>";


var xslt=new CXSLTemplate();

function Init()
{
 xslt.SetXMLStreamData(XMLStream);
 xslt.SetUseXMLFile(false);
 xslt.SetXSLStreamData(XSLStream);
 xslt.SetUseXSLFile(false);
 //xslt.SetXSL("fenye.xsl");
 //xslt.SetUseXSLFile(true);
 container.innerHTML=xslt.GetOutput();
}

function goPage(pageNo)
{
 if(parseInt(pageSize.value)<2)
 {
 alert("分页大小不能小于2");
 pageSize.value=2;
 return;
 }
 xslt.SetParam("PageNo", pageNo);
 xslt.SetParam("PageSize",pageSize.value);
 container.innerHTML=xslt.GetOutput();
}
</SCRIPT>
</HEAD>
<BODY onload="Init();">
<div id=container></div>
<br>
输入分页大小<input id=pageSize value=3>
<input type=button onclick='goPage(1);' value=确定>
</BODY>
</HTML>

方法3:在web中使用xml数据岛(静态规整数据,种方法),需要浏览器支持xml数据岛
rsXML.htm:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<script type="text/javascript">
function Init()
{
 First();
}

function First()
{
 tbl.dataPageSize=parseInt(pageSize.value);
 tbl.firstPage();
}
function Prev()
{
 tbl.previousPage();
}
function Next()
{
 tbl.nextPage();
}
function Last()
{
 tbl.lastPage();
}
function Add()
{
 var arr=[txt_No.value,txt_Name.value];
 xmldso_list.recordset.addNew(['No','Name'],arr);
 Last();
}
function Delete()
{
 //xmldso_list.recordset.delete();//只允许在ado中执行删除操作
 //只好自己利用xmldso_list.XMLDocument操作xml数据了
 alert("尚未完成!");
}
function Save()
{
 var file=GetFile();
 if(file=="") return;
 try
 {
 //xmldso_list.XMLDocument.save("E:/tcl/Web测试例程/xml数据/my/save.xml");//没有权限
 xmldso_list.recordset.save(file,1);
 }
 catch(e){alert(e.message);}
}
function GetFile()
{
 File.value="";
 File.click();
 return File.value;
}
function GotoPage()
{
 //没发现简单方法实现,可以用nextPage()或者自定义数据绑定
 var page=parseInt(pageNo.value);
 var i=1;
 First();
 while(i<page){Next();i++;}
}
</script>
</head>
<body onload="Init();">
<xml id="xmldso_list" src="fenye.xml"></xml>
<table id=tbl datasrc="#xmldso_list" border="1">
<thead>
<tr><th>No</th><th>Name</th><th>操作</th></tr>
</thead>
<tr>
<td><input datafld="No"></td>
<td><input datafld="Name"></td>
<td><input type=button onclick="Delete();" value='删除'></td>
</tr>
</table>
<br>
输入No<input id=txt_No><br>
输入Name<input id=txt_Name><br>
<input type=button onclick='Add();' value=添加新记录>
<br>
输入分页大小<input id=pageSize value=3>
<input type=button onclick='First();' value=确定>
<br>
输入页码<input id=pageNo value=1>
<input type=button onclick='GotoPage();' value=转到>
<br>
<a href="javascript:First();">第一页</a>
<a href="javascript:Prev();">上一页</a>
<a href="javascript:Next();">下一页</a>
<a href="javascript:Last();">最后页</a>
<br>
<input type=button onclick='Save();' value=保存到本地xml文件(和源xml文件不同,此乃recordset转换而来)>
<input type=file style="display:none;" id=File>
</body>
</html>

java web与Oracle数据的分页功能

  • 2017年03月13日 16:29
  • 1.07MB
  • 下载

MySQl + java-web 数据分页案例

MySQl + java-web 数据分页案例 本案例使用MySQl数据库,Servlet,jsp实现数据的分页功能。案例使用三层架构(持久层:操作数据库;服务层:业务处理;表现层:数据的接收,页面跳...

用table,js实现web动态取数据并实现分页效果

上图为实现的效果图 分页过程 首先用table存储数据 创建几个表格需要根据数据库中数据的条数确定 每个表格存储的数据为五条所以第一个表格存储前五条,第二个存储六至十条.....。 网页显示...

oracle数据在WEB中分页

随着Internet技术的发展,Web已越来越多的被应用到各行各业。传统的基于大机或C/S结构的应用也正逐渐的为B/S(Browser/Server)结构所代替。而数据库,作为保存着大量信息的容器,使...
  • zzd1990
  • zzd1990
  • 2012年03月12日 13:54
  • 408

应用数据静态化架构高性能单页Web应用

应用数据静态化架构高性能单页Web应用 2016-04-10 张开涛 开涛的博客 在电商网站中,单页Web是非常常见的一种形式,比如首页、频道页、广告页等都属于单页应用。而这种页面是由...

asp静态分页的AJAX实现

  • 2013年01月08日 16:10
  • 22KB
  • 下载

生成静态页面并有分页效果

  • 2009年04月18日 08:23
  • 1.1MB
  • 下载

ASP.NET查询分页技术:实现Web数据分页浏览

通过ASP.NET查询分页技术可将其按照一定规则分成多页进行显示,每页显示一定数目记录。应用数据记录分页技术,可以提高数据的查询性能及页面的显示速度,减轻数据库服务器的负担。 AD: ...

Ajax 静态 分页

  • 2008年11月10日 17:28
  • 10KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:web中数据静态分页
举报原因:
原因补充:

(最多只允许输入30个字)