web中数据静态分页
来源：互联网 发布：淘宝数据分析那个免费 编辑：程序博客网 时间：2024/06/05 10:17
方法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() < $PageNo*$PageSize) and (position() >= (number($PageNo)-1)*$PageSize) and (position() mod $PageSize = 1)]">
<xsl:apply-templates select=".|following-sibling::*[position()<$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<$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"><!-- 页号的分隔符 -->
 | 
</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() < $PageNo*$PageSize) and (position() >= (number($PageNo)-1)*$PageSize) and (position() mod $PageSize = 1)]/">";
XSLStream+="<xsl:apply-templates select=/".|following-sibling::*[position()<$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<$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+=" | ";
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>
- web中数据静态分页
- oracle数据在WEB中分页
- 静态数据（ajax）分页
- web中分页查询
- ExtJS中从WebService获取数据保存到本地，填充GridPanel实现静态数据分页
- web 中的数据分页显示
- java web 中分页技术
- java web中使用过滤器实现数据查询的分页显示
- 如何确定web里面的数据分页
- 【WEB基础】④关于数据分页
- java web实现分页显示数据
- MySQl + java-web 数据分页案例
- ASP.NET查询分页技术:实现Web数据分页浏览
- ASP.NET查询分页技术:实现Web数据分页浏览
- ExtJS中grid按照中文拼音首字母排序、改变行背景、列背景、静态数据分页不再困难
- 静态分页
- 静态分页,前台分页
- C++中静态数据成员
- Win32环境下dll编程原理(转载)
- grub
- 网上的手游开发笔记,还不错
- 解决phpMyAdmin数据乱码问题
- 动态生成控件
- web中数据静态分页
- 关于ASP.NET访问Excel 电子表格的代码
- 端午节时看看搜索引擎的脸
- Linux经验备案录
- source code generators.
- 使用Microsoft Date And Time Picker Control 6.0(SP6)时要注意的小问题
- .NET 配置
- windows 上的命令行
- 写Form设计器尝试
