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

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="#" οnclick="gotoPage("+i+");" class=nom-blue2>"+i+"</a>&nbsp;";
  }else...{
   sHtml += "<span style="color:CF2928"><b>"+i+"</b></span>&nbsp;";
  }
 }
 //设置页码
 span_PageNum.innerHTML = sHtml;
 //页面参数
 PageSize.value = m_nPageSize;
 pagesize_span.innerText=PageSize.value;
 //当前页
 PageIndex.value = nPageIndex;
 page_span.innerText=PageIndex.value;
 //设置上下页的显示模式
 setPageDisplay();
}


function setDataSrc(_sDataSrcName) ... {
 //获取数据集对象
 var rsData = eval(m_sDataSrcId+".recordset");
 //设定当前页
 if(rsData.absoluteposition>0 && rsData.absoluteposition >= m_nPageIndex)...{
  rsData.absoluteposition = m_nPageIndex;
 }else...{
  rsData.absoluteposition = 1;
 }
 //设定数据源
 RecTable.dataSrc = _sDataSrcName;
 RecTable.dataFld = "D";
 //设置页面参数
 setPageHTML();
}


function doSearch() ... {
 //获取需要检索的字段
 var sSearchWord = SearchWord.value;
 //获取页面大小
 var sPageSize = PageSize.value;
 //判断是否为有效的参数
 if(sPageSize.length>0 && isNaN(sPageSize))...{
  alert("页面参数不是有效的数字！");
  PageSize.select();
  PageSize.focus();
  return;
 }
 //设置分页大小
 if(sPageSize.length>0)...{
  m_nPageSize = parseInt(sPageSize);
  if(m_nPageSize<=0)m_nPageSize = DEFAULT_PAGE_SIZE;
 }
 else...{
  m_nPageSize = DEFAULT_PAGE_SIZE;
 }
 //获取当前页码
 var sPageIndex = PageIndex.value;
 //判断是否为有效的参数
 if(sPageIndex.length>0 && isNaN(sPageIndex))...{
  alert("当前页不是有效的数字！");
  PageIndex.select();
  PageIndex.focus();
  return;
 }
 //设置分页大小
 if(sPageIndex.length>0)...{
  m_nPageIndex = parseInt(sPageIndex);
  if(m_nPageIndex<=0)...{
   m_nPageIndex = 1;
  }
 }
 else...{
  m_nPageIndex = 1;
 }
 
 //构造检索表达式
 var sPath = "//D";
 if(sSearchWord.length > 0)...{
  sPath += "[contains(T,""+sSearchWord+"")]";
 }
 //设定XML的检索方式
 DocumentsDataSrc.XMLDocument.setProperty("SelectionLanguage", "XPath"); 
 //检索指定条件的节点
 var arNodes = DocumentsDataSrc.XMLDocument.selectNodes(sPath);
 //在表格中重新载入数据
 reloadXML(arNodes);
}

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 >

     < script src = ' page.js ' ></ script >

</ body >
</ html >