当前位置:首页 » 网站技术 » XML

Javasript实现XML无刷新分页

...

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() &gt; $Beginning and position() &lt;= $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>

继续阅读
ASP.NET处理xmlHttp发送异步请求
使用xmlhttp为网站添加域名查询功能
XMLHTTPRequest的属性和方法简介
发表评论

昵称:
最新评论
暂时没有评论!