您的位置:首页 > Web前端 > JavaScript

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

2007-10-21 13:35 931 查看
下面举一个小例子,请各位指教

page.js 文件

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

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

//移到首页
first(){
var rsData = eval(m_sDataSrcId+".recordset");
rsData.movefirst();
setPageHTML();
}
//移到上一页
previous(){
var rsData = eval(m_sDataSrcId+".recordset");
rsData.moveprevious();
setPageHTML();
}
//下一页
next(){
var rsData = eval(m_sDataSrcId+".recordset");
rsData.movenext();
setPageHTML();
}
//尾页
last(){
var rsData = eval(m_sDataSrcId+".recordset");
rsData.movelast();
setPageHTML();
}
//任意页码
gotoPage(_nPage){
var rsData = eval(m_sDataSrcId+".recordset");
rsData.absoluteposition = _nPage;
setPageHTML();
}
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;
}

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

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();
}

doSearch(){
//获取需要检索的字段
var sSearchWord = SearchWord.;
//获取页面大小
var sPageSize = PageSize.;
//判断是否为有效的参数
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.;
//判断是否为有效的参数
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.XMLsetProperty("SelectionLanguage", "XPath");
//检索指定条件的节点
var arNodes = DocumentsDataSrc.XMLselectNodes(sPath);
//在表格中重新载入数据
reloadXML(arNodes);
}

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);

}

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

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

html 文件:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
< http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>XML+Java 实现静态页搜索及分页功能 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" ="doSearch()" ="搜索">
</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="java:first();">【首页】</a> <a class="nom-blue2" id="a_Pre"
style="display: none" href="java:previous();">【上一页】</a> <a class="nom-blue2"
id="a_Next" style="display: none" href="java:next();">【下一页】</a> <a class="nom-blue2"
id="a_Last" style="display: none" href="java:last();">【尾页】</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>

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

</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: