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

稿源：互联网 2022-04-02 21:40:00 点击： 4847 撤稿纠错

XML+Javascript 实现静态页搜索及分页功能，但不支持<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">W3c标准文档验证代码，有兴趣的朋友可以改良一下。

以下讨论的是和分页相关的JS+XML实现静态页搜索及分页功能教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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 js.alixixi.com</title>
</head>
<body>
<xml id="DocumentsDataSrc">
<?xml version="1.0" encoding="UTF-8"?>
<books>
    <book id="0001" bookcategory="文艺" amount="150" remain="80" discount="8.5">
        <title>三国演义</title>
        <author>罗贯中</author>
        <publisher>文艺出版社</publisher>
        <ISBN>0-764-58007-8</ISBN>
        <price>80</price>
    </book>
    <book id="0002" bookcategory="文艺" amount="300" remain="180" discount="8.7">
        <title>红楼梦</title>
        <author>曹雪芹</author>
        <publisher>三秦出版社</publisher>
        <ISBN>7-805-46839-7</ISBN>
        <price>22</price>
    </book>
    <book id="0003" bookcategory="文艺" amount="200" remain="175" discount="8.5">
        <title>西游记（上下册）</title>
        <author>吴承恩</author>
        <publisher>人民文学出版社</publisher>
        <ISBN>7-020-00873-9</ISBN>
        <price>22</price>
    </book>
    <book id="0004" bookcategory="文艺" amount="300" remain="192" discount="8.7">
        <title>水浒传（上下册）</title>
        <author>施耐庵</author>
        <publisher>时代文艺出版社</publisher>
        <ISBN>7-538-71401-4</ISBN>
        <price>22</price>
    </book>
    <book id="0065" bookcategory="文学" amount="120" remain="86" discount="8.0">
        <title>外国文学史（亚非卷）</title>
        <author>朱维之</author>
        <publisher>南开大学出版社</publisher>
        <ISBN>7-310-01122-8</ISBN>
        <price>20</price>
    </book>
    <book id="0076" bookcategory="文学" amount="130" remain="84" discount="8.0">
        <title>20世纪欧美文学简史</title>
        <author>李明滨</author>
        <publisher>北京大学出版社</publisher>
        <ISBN>7-301-04616-2</ISBN>
        <price>21.8</price>
    </book>
    <book id="0218" bookcategory="计算机" amount="400" remain="300" discount="8.5">
        <title>程序设计基础</title>
        <author>张杰敏主编</author>
        <publisher>高等教育出版社</publisher>
        <ISBN>7-04-012652-4</ISBN>
        <price>17.6</price>
    </book>
    <book id="0318" bookcategory="计算机" amount="100" remain="60" discount="8.5">
        <title>数据结构与算法</title>
        <author>王晓东编</author>
        <publisher>高等教育出版社</publisher>
        <ISBN>7-04-013204-4</ISBN>
        <price>17.6</price>
    </book>
    <book id="0181" bookcategory="计算机" amount="250" remain="156" discount="8.0">
        <title>XML Web Service开发</title>
        <author>微软公司著</author>
        <publisher>高等教育出版社</publisher>
        <ISBN>7-04-015825-6</ISBN>
        <price>65.00</price>
    </book>
    <book id="0074" bookcategory="计算机" amount="400" remain="300" discount="8.5">
        <title>软件工程Java语言实现</title>
        <author>Stephen R.Schach</author>
        <publisher>机械工业出版社</publisher>
        <ISBN>7-111-06714-2</ISBN>
        <price>51.00</price>
    </book>
    <book id="0305" bookcategory="计算机" amount="210" remain="160" discount="8.0">
        <title>人工智能</title>
        <author>Nils J. Nilsson</author>
        <publisher>机械工业出版社</publisher>
        <ISBN>7-111-04738-6</ISBN>
        <price>17.6</price>
    </book>
</books>
</xml>
<xml id="SelectDocs"><?xml version="1.0"?><recs>test</recs></xml>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <input name="SearchWord"><input type="button" onClick="doSearch()" value="搜索">
        </td>
    </tr>
    <tr>
        <td>
        
            <table cellspacing="1" cellpadding="4" border="0" bgcolor="#CCCCCC" id="RecTable" datasrc="#DocumentsDataSrc" datapagesize="3">
                <thead> 
                    <tr> 
                        <th bgcolor="#efefef">书　名</th> 
                        <th bgcolor="#efefef">类　别</th>
                        <th bgcolor="#efefef">ISBN</th> 
                        <th bgcolor="#efefef">出版社</th>
                        <th bgcolor="#efefef">作　者</th>
                        <th bgcolor="#efefef">价　格</th>
                        <th bgcolor="#efefef">剩　余</th> 
                    </tr> 
                </thead> 
                <tbody>
                    <tr>
                        <td bgcolor="#FFFFFF"><a datafld="id" target="_blank"><span datafld="title"></span></a></td>
                        <td bgcolor="#FFFFFF"><span datafld="bookcategory"></span></td>
                        <td bgcolor="#FFFFFF"><span datafld="ISBN"></span></td>
                        <td bgcolor="#FFFFFF"><span datafld="publisher"></span></td>
                        <td bgcolor="#FFFFFF"><span datafld="author"></span></td>
                        <td bgcolor="#FFFFFF"><span datafld="price"></span></td>
                        <td bgcolor="#FFFFFF"><span datafld="remain"></span></td>
                    </tr>
                </tbody>
            </table>
            
            
        </td>
    </tr>
    <tr>
        <td height="40" valign="bottom">
            <span id="span_PageNum"></span>
            <a id="a_First" style="display: none" href="javascript:first();">【首页】</a> 
            <a id="a_Pre" style="display: none" href="javascript:previous();">【上一页】</a> 
            <a id="a_Next" style="display: none" href="javascript:next();">【下一页】</a> 
            <a id="a_Last" style="display: none" href="javascript:last();">【尾页】</a>
            【 第<input type="hidden" size="2" name="PageIndex"><span id="page_span"></span>页·共<span id="span_RecordCount"></span>条 <input type="hidden" size="2" name="PageSize"> <span id="pagesize_span"></span>条/页】
        </td>
    </tr>
</table>
<script type="text/javascript">
//获取id对象
var RecTable=document.getElementById("RecTable");
var a_First=document.getElementById("a_First");
var a_Pre=document.getElementById("a_Pre");
var a_Next=document.getElementById("a_Next");
var a_Last=document.getElementById("a_Last");
var page_span=document.getElementById("page_span");
var span_RecordCount=document.getElementById("span_RecordCount");
var pagesize_span=document.getElementById("pagesize_span");
var DEFAULT_PAGE_SIZE = 3;
//分页大小
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="javascript:void(0);" 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 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 = "book";//与xml结构一致,子节点
 //设置页面参数
 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 = "//book";//与xml结构一致,子节点
 if(sSearchWord.length > 0){
  sPath += "[contains(title,""+sSearchWord+"")]";//与xml结构一致,子节点，匹配搜索关键字段
 }
 //设定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"); //与xml结构一致，重置数据源父节点
 //删除原有的所有节点
 var oSelection = objDom.selectNodes("//books");//与xml结构一致
 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("books");//与xml结构一致,父节点
  
  //遍历指定范围的节点
  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();//初始化
</script>
</body>
</html>

关于JS+XML实现静态页搜索及分页功能的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011081573196.shtml方便下次再访问哦。

·上一篇： 文本框输入右侧提示文字表单效果
·下一篇： 始终漂浮在网页底部完美兼容IE6 fixed的浮动层

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

文章分类LIST >>返回首页

最新游戏

最新新闻