XML+Javascript 实现静态页搜索及分页功能

来源：互联网发布：找正规网络兼职编辑：程序博客网时间：2024/04/27 15:55

page.js 文件

====================================

var DEFAULT_PAGE_SIZE = 20;
//分页大小
var m_nPageSize = DEFAULT_PAGE_SIZE;
//当前XML数据集对象
var m_sDataSrcId = "DocumentsDataSrc";
//当前页码
var m_nPageIndex = 1;

//移到首页
function first(){
var rsData = eval(m_sDataSrcId+".recordset");
rsData.movefirst();
setPageHTML();
}
//移到上一页
function previous(){
var rsData = eval(m_sDataSrcId+".recordset");
rsData.moveprevious();
setPageHTML();
}
//下一页
function next(){
var rsData = eval(m_sDataSrcId+".recordset");
rsData.movenext();
setPageHTML();
}
//尾页
function last(){
var rsData = eval(m_sDataSrcId+".recordset");
rsData.movelast();
setPageHTML();
}
//任意页码
function gotoPage(_nPage){
var rsData = eval(m_sDataSrcId+".recordset");
rsData.absoluteposition = _nPage;
setPageHTML();
}
function setPageDisplay(){
var rsData = eval(m_sDataSrcId+".recordset");
var sFirstDisplay = "none";
var sLastDisplay = "none";
// var sFirstDisplay = "";
// var sLastDisplay = "";
if(rsData.recordcount > 0){
  //显示上一页
  if(rsData.absoluteposition>1)sFirstDisplay = "";
  //显示下一页
  if(rsData.absoluteposition < rsData.recordcount)sLastDisplay = "";
}
a_Pre.style.display = a_First.style.display = sFirstDisplay;
a_Next.style.display = a_Last.style.display = sLastDisplay;
}

//设置页面参数
function setPageHTML(){
//获取数据集对象
var rsData = eval(m_sDataSrcId+".recordset");
//获取页数
var nPageCount = rsData.recordcount;
//获取当前页
var nPageIndex = rsData.absoluteposition;
//构造页码
var sHtml = "";
for(var i=1; i<=nPageCount; i++){
  if(nPageIndex != i){
   sHtml += "<a href=/"#/" onclick=/"gotoPage("+i+");/" class=nom-blue2>"+i+"</a> ";
  }else{
   sHtml += "<span style=/"color:CF2928/"><b>"+i+"</b></span> ";
  }
}
//设置页码
span_PageNum.innerHTML = sHtml;
//页面参数
PageSize.value = m_nPageSize;
pagesize_span.innerText=PageSize.value;
//当前页
PageIndex.value = nPageIndex;
page_span.innerText=PageIndex.value;
//设置上下页的显示模式
setPageDisplay();
}

function reloadXML(_arNodes){
//设置记录数
span_RecordCount.innerText = _arNodes.length;

SelectDocs.async = false;
SelectDocs.resolveExternals = false;
var objDom = SelectDocs.XMLDocument;
//获取根节点
var objRoot = objDom.selectSingleNode("recs");
//删除原有的所有节点
var oSelection = objDom.selectNodes("//Documents");
if(oSelection != null){
  oSelection.removeAll();
}

//获取本次更新的节点数
var nNodeCount = (_arNodes==null?0:_arNodes.length);
var nCurrPageCount = parseInt(nNodeCount/m_nPageSize);
if((nNodeCount % m_nPageSize) > 0)nCurrPageCount++;
//分页插入数据
var nCurrPose = 0;
for(var i=0; i<nCurrPageCount; i++){
  //产生新的文档集合对象
  var objDocs =  objDom.createElement("Documents");

  //遍历指定范围的节点
  for(var j=0; j<m_nPageSize; j++){
   //计算当前位置
   nCurrPose = i*m_nPageSize + j;
   //判断当前位置的有效性
   if(nCurrPose >= nNodeCount)break;

   var objNode = _arNodes[nCurrPose].cloneNode(true);
   //加入新的节点
   objDocs.appendChild(objNode);
  }//end For (遍历指定范围的节点)
  //追加新的Docs节点
  objRoot.appendChild(objDocs);
}
m_sDataSrcId = "SelectDocs";
//重新设置数据源
setDataSrc("#"+m_sDataSrcId);

}

function init(){
doSearch();
}
init();

=======================================

html 文件:

===============================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>XML+Javascript 实现静态页搜索及分页功能 by SKANSO</title>
</head>
<body>
    <xml id="DocumentsDataSrc">
<?xml version="1.0"?>
<Documents>

<D>
<T>中华人民共和国道路交通安全法实施条例</T>
<L>t20051123_30194.htm</L>
<H>2005-11-23</H>
</D>

<D>
<T>国家赔偿案件文书样式（试行）</T>
<L>t20051123_30193.htm</L>
<H>2005-11-23</H>
</D>

<D>
<T>中华人民共和国土地管理法</T>
<L>t20051123_30192.htm</L>
<H>2005-11-23</H>
</D>

<D>
<T>中华人民共和国个人所得税法</T>
<L>t20051123_30191.htm</L>
<H>2005-11-23</H>
</D>

</Documents>
</xml>
    <xml id="SelectDocs">
<?xml version="1.0"?>
<recs>test</recs>
</xml>
    <table width="75%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <input name="SearchWord"><input type="button" onclick="doSearch()" value="搜索">
            </td>
        </tr>
        <tr>
            <td>
                <table id="RecTable" datasrc="#DocumentsDataSrc" cellspacing="0" cellpadding="0"
                    width="100%" datapagesize="20" border="0">
                    <tr>
                        <td valign="bottom">
                        </td>
                        <td valign="bottom" width="94%">
                            <a datafld="L" target="_blank"><span datafld="T"></span></a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="font9-17" valign="bottom" height="33">
                <div align="right">
                    <span id="span_PageNum"></span><font color="#0066cc"><a class="nom-blue2" id="a_First"
                        style="display: none" href=";">【首页】</a> <a class="nom-blue2" id="a_Pre"
                            style="display: none" href=";">【上一页】</a> <a class="nom-blue2"
                                id="a_Next" style="display: none" href=";">【下一页】</a> <a class="nom-blue2"
                                    id="a_Last" style="display: none" href=";">【尾页】</a>
                        【 <a class="nom-blue2" href="http://www.hp.gov.cn/hpsfj/flfg/xzl/index.jsp#">第
                            <input class="button" type="hidden" size="2" name="PageIndex">
                            <span id="page_span"></span>页</a>·共<span id="span_RecordCount"></span>条
                        <input class="button" type="hidden" size="2" name="PageSize">
                        <span id="pagesize_span"></span>条/页】</font>
                </div>
            </td>
        </tr>
    </table>

</body>
</html>

===============================================