基于JAVASCRIPT操作XML的无刷新分页
2006-11-11 20:05
645 查看
核心代码来自于网络,本人将分页功能进行了强化.
初次发贴还请大家多多关照.
ListXml.JS:
var XD = "XML.xml";//载入的XML
var SD = "XSL.xsl";//载入的XSL
var BtoPage=20;//每页显示数据
var xmlDom = new ActiveXObject("Msxml2.DOMDocument");
xmlDom.async = false;
xmlDom.resolveExternals = false;
xmlDom.load(XD);
var xslDom = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
xslDom.async = false;
xslDom.resolveExternals = false;
xslDom.load(SD);
var xslt = new ActiveXObject("Msxml2.XSLTemplate");
xslt.stylesheet = xslDom;
var xslProc = xslt.createProcessor();
xslProc.input = xmlDom;
var FrontPage = 1;//当前页初始
var TotalPage = 1;//页总数初始
function MyDocument(){
xslProc.addParameter("Beginning", (FrontPage - 1)*BtoPage);//Beginning
xslProc.addParameter("Knottail", FrontPage*BtoPage);//Knottail
xslProc.transform();
return xslProc.output;
}
function GotoPage(PageNo){
if( PageNo < 1 ) {
FrontPage = 1;
} else if( PageNo >= TotalPage ) {
FrontPage = TotalPage;
} else {
FrontPage = PageNo;
}
LoadPage();
}
function Page(){
var int1=DataPage.value;
var int2=BtoPage;
if (int1/int2<=1){
TotalPage = 1
}else if(int1 / int2 > 1 && int1 % int2 == 0){
TotalPage = parseInt(int1 / int2)
}else{
TotalPage = parseInt(int1 / int2 + 1)
}
var txt = " 共"+int1+"条记录";
var TopPage = FrontPage - 1;
var BottomPage = parseInt(FrontPage) + 1;
if( FrontPage > 1 ) {
txt += " <a href='#' onClick='GotoPage(1)'>首页</a> "
txt += " <a href='#' onClick='GotoPage(" + TopPage + ")'>上一页</a> "
} else {
txt += " <font color='#d4d0c8'>首页</font> "
txt += " <font color='#d4d0c8'>上一页</font> "
}
if( FrontPage < TotalPage ) {
txt += " <a href='#' onClick='GotoPage(" + BottomPage + ")'>下一页</a> "
txt += " <a href='#' onClick='GotoPage(" + TotalPage + ")'>尾页</a> "
} else {
txt += " <font color='#d4d0c8'>下一页</font> "
txt += " <font color='#d4d0c8'>尾页</font> "
}
txt += "当前" + SelectPage(TotalPage,FrontPage) + "页 共" + TotalPage + "页<br />";
txt += NumberPage(TotalPage,FrontPage)
OnPage.innerHTML = txt;
}
function SelectPage(CountPage,PageNo){
var i=1;
var s;
s = "<select name='SelectPage' onChange='GotoPage(this.options[this.selectedIndex].value)'>"
while(i<=CountPage){
if (i==PageNo){
s += "<option value='" + i + "' selected>" + i + "</option>"
}else{
s += "<option value='" + i + "'>" + i + "</option>"
}
++i
}
s += "</select> "
return s
}
function NumberPage(CountPage,PageNo){
var i=1;
var s;
s = ""
while(i<=CountPage){
if (i==PageNo){
s += " <font color='#d4d0c8'>" + i + "</font> "
}else{
s += " <a href='#' onClick='GotoPage(" + i + ")'><b>" + i + "</b></a> "
}
++i
}
return s
}
function LoadPage(){
rule_list.innerHTML = MyDocument();
Page();
}
function So(){
var sotext=document.getElementById("InputStr").value;
if (sotext==""){
alert("请填写搜索内容！！")
}
else{
rule_list.innerHTML = Search(sotext);
}
LoadPage();
Page();
}
//Search
function Search(Str){
xslProc.addParameter("SoStr", Str);
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Photos Player</TITLE>
<style type="text/css">body,td,th {
font-family: 宋体;
font-size: 12px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="JS/ListXml.js"></script>
</HEAD>
<BODY onLoad="LoadPage()">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" value="" id="InputStr" size="35" maxlength="16"/><input type="button" value="搜索" onClick="So();"/></td>
</tr>
<tr>
<td><div id="rule_list"/></td>
</tr>
<tr>
<td align="left"><div id="OnPage" /></td>
</tr>
</table>
</BODY>
</HTML>
XML:
<?xml version="1.0" encoding="GB2312"?>
<CatEar>
<CatSon>
<CatGrandson>
<id>2</id>
<title>标题1</title>
<url>html/1.htm</url>
<name>王杰</name>
<time>2006-10-21 10:22:52</time>
</CatGrandson>
<enable>3</enable>
</CatSon><CatSon>
<CatGrandson>
<id>1</id>
<title>标题2</title>
<url>html/2.htm</url>
<name>发布</name>
<time>2006-10-20 10:22:52</time>
</CatGrandson>
<enable>3</enable>
</CatSon>
</CatEar>
XSL:
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:strip-space elements="*"/>
<xsl:output method= "html"/>
<xsl:param name="SoStr"></xsl:param>
<xsl:param name="Beginning">undefined</xsl:param>
<xsl:param name="Knottail">undefined</xsl:param>
<xsl:template match="/">
<html>
<body>
<xsl:apply-templates select="CatEar"/>
</body>
</html>
</xsl:template>
<xsl:template match="CatEar">
<input type="hidden" name="DataPage">
<xsl:attribute name="value"><xsl:value-of select="count(CatSon[contains(CatGrandson/title, $SoStr)])"/></xsl:attribute>
</input>
<TABLE id="viewTable" name="viewTable" width="700px" border="1" bordercolor="#85979f" cellSpacing="0" cellPadding="0" style="border-collapse:collapse;">
<tr height="25">
<TD width="80px" align="center">状态</TD>
<TD width="300px" align="center">标题</TD>
<TD width="100px" align="center">发贴人姓名</TD>
<TD width="200" align="center">发贴时间</TD>
</tr>
<xsl:for-each select='CatSon[contains(CatGrandson/title, $SoStr)]'>
<xsl:sort data-type="number" select="enable" />
<xsl:sort order="descending" select="CatGrandson/time" />
<xsl:if test="position() > $Beginning and position() <= $Knottail">
<tr>
<xsl:choose>
<xsl:when test="enable[. = '0']">
<td align="center" style="color:#FF0000; font-weight:bold;">固顶</td>
</xsl:when>
<xsl:when test="enable[. = '1']">
<td align="center" style="color:#FF6633; font-weight:bold;">推荐</td>
</xsl:when>
<xsl:otherwise>
<td align="center">一般</td>
</xsl:otherwise>
</xsl:choose>
<td align="center"><xsl:element name='a'><xsl:attribute name='href'><xsl:value-of select="CatGrandson/url"/></xsl:attribute><xsl:attribute name='target'>_blank</xsl:attribute>
<xsl:value-of select="CatGrandson/title"/></xsl:element>
</td>
<td><xsl:value-of select="CatGrandson/name"/></td>
<td><xsl:value-of select="CatGrandson/time"/></td>
</tr>
</xsl:if>
</xsl:for-each>
</TABLE>
</xsl:template>
</xsl:stylesheet>
初次发贴还请大家多多关照.
ListXml.JS:
var XD = "XML.xml";//载入的XML
var SD = "XSL.xsl";//载入的XSL
var BtoPage=20;//每页显示数据
var xmlDom = new ActiveXObject("Msxml2.DOMDocument");
xmlDom.async = false;
xmlDom.resolveExternals = false;
xmlDom.load(XD);
var xslDom = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
xslDom.async = false;
xslDom.resolveExternals = false;
xslDom.load(SD);
var xslt = new ActiveXObject("Msxml2.XSLTemplate");
xslt.stylesheet = xslDom;
var xslProc = xslt.createProcessor();
xslProc.input = xmlDom;
var FrontPage = 1;//当前页初始
var TotalPage = 1;//页总数初始
function MyDocument(){
xslProc.addParameter("Beginning", (FrontPage - 1)*BtoPage);//Beginning
xslProc.addParameter("Knottail", FrontPage*BtoPage);//Knottail
xslProc.transform();
return xslProc.output;
}
function GotoPage(PageNo){
if( PageNo < 1 ) {
FrontPage = 1;
} else if( PageNo >= TotalPage ) {
FrontPage = TotalPage;
} else {
FrontPage = PageNo;
}
LoadPage();
}
function Page(){
var int1=DataPage.value;
var int2=BtoPage;
if (int1/int2<=1){
TotalPage = 1
}else if(int1 / int2 > 1 && int1 % int2 == 0){
TotalPage = parseInt(int1 / int2)
}else{
TotalPage = parseInt(int1 / int2 + 1)
}
var txt = " 共"+int1+"条记录";
var TopPage = FrontPage - 1;
var BottomPage = parseInt(FrontPage) + 1;
if( FrontPage > 1 ) {
txt += " <a href='#' onClick='GotoPage(1)'>首页</a> "
txt += " <a href='#' onClick='GotoPage(" + TopPage + ")'>上一页</a> "
} else {
txt += " <font color='#d4d0c8'>首页</font> "
txt += " <font color='#d4d0c8'>上一页</font> "
}
if( FrontPage < TotalPage ) {
txt += " <a href='#' onClick='GotoPage(" + BottomPage + ")'>下一页</a> "
txt += " <a href='#' onClick='GotoPage(" + TotalPage + ")'>尾页</a> "
} else {
txt += " <font color='#d4d0c8'>下一页</font> "
txt += " <font color='#d4d0c8'>尾页</font> "
}
txt += "当前" + SelectPage(TotalPage,FrontPage) + "页 共" + TotalPage + "页<br />";
txt += NumberPage(TotalPage,FrontPage)
OnPage.innerHTML = txt;
}
function SelectPage(CountPage,PageNo){
var i=1;
var s;
s = "<select name='SelectPage' onChange='GotoPage(this.options[this.selectedIndex].value)'>"
while(i<=CountPage){
if (i==PageNo){
s += "<option value='" + i + "' selected>" + i + "</option>"
}else{
s += "<option value='" + i + "'>" + i + "</option>"
}
++i
}
s += "</select> "
return s
}
function NumberPage(CountPage,PageNo){
var i=1;
var s;
s = ""
while(i<=CountPage){
if (i==PageNo){
s += " <font color='#d4d0c8'>" + i + "</font> "
}else{
s += " <a href='#' onClick='GotoPage(" + i + ")'><b>" + i + "</b></a> "
}
++i
}
return s
}
function LoadPage(){
rule_list.innerHTML = MyDocument();
Page();
}
function So(){
var sotext=document.getElementById("InputStr").value;
if (sotext==""){
alert("请填写搜索内容！！")
}
else{
rule_list.innerHTML = Search(sotext);
}
LoadPage();
Page();
}
//Search
function Search(Str){
xslProc.addParameter("SoStr", Str);
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Photos Player</TITLE>
<style type="text/css">body,td,th {
font-family: 宋体;
font-size: 12px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="JS/ListXml.js"></script>
</HEAD>
<BODY onLoad="LoadPage()">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" value="" id="InputStr" size="35" maxlength="16"/><input type="button" value="搜索" onClick="So();"/></td>
</tr>
<tr>
<td><div id="rule_list"/></td>
</tr>
<tr>
<td align="left"><div id="OnPage" /></td>
</tr>
</table>
</BODY>
</HTML>
XML:
<?xml version="1.0" encoding="GB2312"?>
<CatEar>
<CatSon>
<CatGrandson>
<id>2</id>
<title>标题1</title>
<url>html/1.htm</url>
<name>王杰</name>
<time>2006-10-21 10:22:52</time>
</CatGrandson>
<enable>3</enable>
</CatSon><CatSon>
<CatGrandson>
<id>1</id>
<title>标题2</title>
<url>html/2.htm</url>
<name>发布</name>
<time>2006-10-20 10:22:52</time>
</CatGrandson>
<enable>3</enable>
</CatSon>
</CatEar>
XSL:
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:strip-space elements="*"/>
<xsl:output method= "html"/>
<xsl:param name="SoStr"></xsl:param>
<xsl:param name="Beginning">undefined</xsl:param>
<xsl:param name="Knottail">undefined</xsl:param>
<xsl:template match="/">
<html>
<body>
<xsl:apply-templates select="CatEar"/>
</body>
</html>
</xsl:template>
<xsl:template match="CatEar">
<input type="hidden" name="DataPage">
<xsl:attribute name="value"><xsl:value-of select="count(CatSon[contains(CatGrandson/title, $SoStr)])"/></xsl:attribute>
</input>
<TABLE id="viewTable" name="viewTable" width="700px" border="1" bordercolor="#85979f" cellSpacing="0" cellPadding="0" style="border-collapse:collapse;">
<tr height="25">
<TD width="80px" align="center">状态</TD>
<TD width="300px" align="center">标题</TD>
<TD width="100px" align="center">发贴人姓名</TD>
<TD width="200" align="center">发贴时间</TD>
</tr>
<xsl:for-each select='CatSon[contains(CatGrandson/title, $SoStr)]'>
<xsl:sort data-type="number" select="enable" />
<xsl:sort order="descending" select="CatGrandson/time" />
<xsl:if test="position() > $Beginning and position() <= $Knottail">
<tr>
<xsl:choose>
<xsl:when test="enable[. = '0']">
<td align="center" style="color:#FF0000; font-weight:bold;">固顶</td>
</xsl:when>
<xsl:when test="enable[. = '1']">
<td align="center" style="color:#FF6633; font-weight:bold;">推荐</td>
</xsl:when>
<xsl:otherwise>
<td align="center">一般</td>
</xsl:otherwise>
</xsl:choose>
<td align="center"><xsl:element name='a'><xsl:attribute name='href'><xsl:value-of select="CatGrandson/url"/></xsl:attribute><xsl:attribute name='target'>_blank</xsl:attribute>
<xsl:value-of select="CatGrandson/title"/></xsl:element>
</td>
<td><xsl:value-of select="CatGrandson/name"/></td>
<td><xsl:value-of select="CatGrandson/time"/></td>
</tr>
</xsl:if>
</xsl:for-each>
</TABLE>
</xsl:template>
</xsl:stylesheet>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript 操作 XML 实例 （获取新闻标题并分页，并分页）
- JavaScript操作XML实例代码（获取新闻标题并分页，并分页）
- JavaScript操作XML实例代码（获取新闻标题并分页，并分页）
- Flash & Ajax 操作 XML 实例:无刷新分页
- Flash & Ajax 操作 XML 实例:无刷新分页
- javascript项目实战---ajax实现无刷新分页
- javascript Xml增删改查(IE下)操作实现代码
- JavaScript--全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）
- 使用javascript+xml实现分页
- Javascript 读取操作Sql中的Xml字段
- Javascript+XML 操作
- 基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
- javascript 新闻标题静态分页代码 (无刷新)
- 使用javascript+dom+xml实现分页
- 用javascript操作xml
- JavaScript操作XML(二)
- javascript操作Xml增删改查(IE下)
- Javascript无刷新操作(数据库记录的加载删改)
- 用javascript操作xml
- webservice（四）有关xml的操作（基于JAXBContext 的xml和对象的转换）