JAVASCRIPT分页(读取xml文件中的记录)

最近做一个网站,为了减少数据库的访问,将所有数据都建了个xml索引,前台页面中的数据都从xml文件中读取,但是为要实现新闻列表的分页不能使用asp.net的控件了,只好使用javascript来分页,代码如下:

var  xmlDoc;
var  nodeIndex;
var  pageIndex;
var  pageSize = 20 ;
var  lastPage;    // 最后一页
var  overSize ;    // 最后一页的记录数
var  listStr = '' ;
var  recordCount = 0 ;

function  getxmlDoc(path)     // 读取xml文件
{
  document.getElementById(
"txtPageCount").readOnly=true;
  document.getElementById(
"txtRecordCount").readOnly=true;
  document.getElementById(
"txtCurrPage").readOnly=true;
  document.getElementById(
"txtCurrPageRecord").readOnly=true;
  xmlDoc
=new ActiveXObject("Microsoft.XMLDOM");
    
var currNode;
    xmlDoc.async
=false;
    path
="../news/"+path;
    xmlDoc.load(path);
    
if(xmlDoc.parseError.errorCode!=0)
    
{
        
var myErr=xmlDoc.parseError;
        alert(
"出错!"+myErr.reason);
    }

    getRecordCount();
    
if(recordCount<pageSize)
       onLast();
    
else onFirst();
}

function  getRecordCount()              // 获得记录信息
{
    
var rootNode=xmlDoc.documentElement;
    recordCount
=rootNode.childNodes.length;
    
var pageCount=Math.ceil(recordCount/pageSize);
    document.getElementById(
"txtPageCount").value=pageCount;
    document.getElementById(
"txtRecordCount").value=recordCount;
    overSize
=recordCount%pageSize;
    
if(overSize>0)
    
{
        lastPage
=recordCount-overSize;
    }

    
else
    
{
        lastPage
=recordCount-pageSize;
    }

}

function  getPageRecord(pageIndex,pageSize)            // 读取xml文件中的记录
{
     clearRow(
"myTable"); 
    
var rootNode= xmlDoc.documentElement;
    
var currNode=rootNode.childNodes[pageIndex];
    listStr
='<ul>';
    
for(var i=pageIndex;i<pageIndex+pageSize&&i<rootNode.childNodes.length;i++)
    
{
        
var arr=new Array();
        
var nNode= xmlDoc.documentElement.childNodes[i];  
        title
=nNode.childNodes[0].text;    //标题
        time=nNode.childNodes[1].text;    
        time
=time.substring(2,10);       //日期
        url=nNode.childNodes[2].text;    //URL
         //alert(title);
        listStr=listStr+'<li><a href="'+url+'">'+title+'</a><span class="list_time">&nbsp;&nbsp;['+time+']</span></li>';
    }
   
   
if(pageIndex>=lastPage)document.getElementById("btnnext").style.display="none";
      
else document.getElementById("btnnext").style.display="";
   
if(pageIndex==0)document.getElementById("btnprev").style.display="none";
   
else document.getElementById("btnprev").style.display="";
    listStr
=listStr+'</ul>';
    document.getElementById(
"myTable").innerHTML=listStr;
}

function  onFirst()                                                               // 当点击首页的时候触发
{   
   
if(recordCount<pageSize)
    
{
      onLast();
      
return;
    }

    pageIndex
=0;
    
var currIndex=pageIndex;
    getPageRecord(currIndex,pageSize);
    pageIndex
=currIndex ;
    document.getElementById(
"txtCurrPage").value=(pageIndex / pageSize) + 1;
    document.getElementById(
"txtCurrPageRecord").value=pageSize;
}

function  onPrev()                          // 点击上一页时触发
{
    
var currIndex=pageIndex;
    currIndex
-=pageSize;
    getPageRecord(currIndex,pageSize)
    pageIndex
=currIndex;
    document.getElementById(
"txtCurrPage").value=(pageIndex / pageSize) + 1;
    document.getElementById(
"txtCurrPageRecord").value=pageSize;
   
}

function  onNext()                         // 点击下一页的时候触发
{    
    
var currIndex=pageIndex;
    currIndex
+=pageSize;
    getPageRecord(currIndex,pageSize);
    pageIndex
=currIndex;
    document.getElementById(
"txtCurrPage").value=(pageIndex / pageSize) + 1;
    document.getElementById(
"txtCurrPageRecord").value=pageSize;
    
}

function  onLast()                   // 点击最后一页的时候触发
{
    
if(overSize>0)
    
{
        getPageRecord(lastPage,overSize)
        document.getElementById(
"txtCurrPageRecord").value=overSize;
    }

    
else
    
{
        getPageRecord(lastPage,pageSize)
        document.getElementById(
"txtCurrPageRecord").value=pageSize;
    }
    
    pageIndex
=lastPage;
    document.getElementById(
"txtCurrPage").value=(pageIndex / pageSize) + 1;
}

function  toPage()                             // 转向指定页
{    
    
var index=document.getElementById("txtCurrPage").value
    
var currIndex=(index-1)*pageSize;      
    
if(event.keyCode==13)
    
{
         getPageRecord(currIndex,pageSize);
    }

    pageIndex
=currIndex;
}


function  clearRow(obj)                        // 清除页面中的一个标记之间的内容
{
 
var table=document.getElementById(obj);
 
var length=table.childNodes.length;  
 
for(var i=length-1;i>0;i--)
 
{
  table.removeChild(table.childNodes[i]);   
 }

}

以上是javascript脚本,下面是页面文件:

<% @ Page Language="C#"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 通知公告 </ title >
< link  href ="../css/body.css"  rel ="stylesheet"  type ="text/css"  media ="screen"   />
< link  href ="../css/index_news_list.css"  rel ="stylesheet"  type ="text/css"  media ="screen"   />
< script  src ="../js/page.js"  type ="text/javascript"  language ="javascript"   ></ script >
</ head >
< body  onload ='getxmlDoc("notice_list.xml")' >
< div  id ="hd" >
< iframe  width ="100%"  height ="160"  frameborder =0  scrolling ="no"  src ="../nav.htm" ></ iframe >
</ div >
< div  id ="box"  style ="" >

< form  id ="myform"  action ="../search.aspx"  onsubmit  ="search_submit();return false;" >
    
< div  style ="text-align:left;line-height:20px;height:20px;    " >
    
< asp:SiteMapPath  ID ="SiteMapPath1"  runat ="server"  Font-Names ="宋体"  Font-Size ="12px"
            PathSeparator
=" : "   >
            
< PathSeparatorStyle  Font-Bold ="False"  ForeColor ="#990000"   />
            
< CurrentNodeStyle  ForeColor ="#333333"   />
            
< NodeStyle  Font-Bold ="False"  ForeColor ="#990000"   />
            
< RootNodeStyle  Font-Bold ="False"  ForeColor ="#FF8000"   />
            
< PathSeparatorTemplate >
                
&gt;&gt;
            
</ PathSeparatorTemplate >
      
</ asp:SiteMapPath >

    
< input  name ="key"  style ="width:100px;margin-top:2px;height:16px;" />  
    
< select  name ="search_type"  style ="width:80px;height:20px;" >
        
< option  value ="1"  style ="height:50px;" > 标题 </ option >
        
< option  value ="2" > 全文 </ option >
    
</ select >
    
    
< input  type ="submit"  value ="搜索"  style ="background-image:url(../media/btn_bg.gif);height:20px;border:0;width:59px;" />  
    
</ div >
  
</ form >
< hr  style ="color: #018C6F;"   />
< div  id ="left_side_div" >
 
< ul >
 
<!--  菜单条目 -->
    
< li >< id ="current"  href ="news_notice_list.aspx" > 通知公告 </ a ></ li >
    
< li >< href ="news_picnews_list.aspx" > 图片新闻 </ a ></ li >
    
< li >< href ="keji_dongtai_list.aspx" > 科技动态 </ a ></ li >
    
< li >< href ="keji_zixun_list.aspx" > 科技资讯 </ a ></ li >
    
< li >< href ="news_policy_list.aspx" > 政策法规 </ a ></ li >
    
< li >< href ="news_peixun_list.aspx" > 培训信息 </ a ></ li >
</ ul >
</ div >
< div  id ="right_side_div" >
< table  width ="475"  align ="left"   >
    
< tr  width ="596" >
        
< td  >
            
< div  width ="100%"  id ="myTable" >            
            
</ div >
        
</ td >
    
</ tr >
    
< tr  >
        
< td  style ="height: 19px;" >
        
< div  id ="nav" >  每页20条 当前页
          
< input  id ="txtCurrPageRecord"  type ="text"    onkeydown ="toPage()" />
             共有
< input  id ="txtRecordCount"  type ="text"    onkeydown ="toPage()" />
             
< input  id ="btnFirst"  type ="button"  value ="首页"   onclick ="onFirst()"   />
             
< input  id ="btnPrev"  type ="button"  value ="上一页"   onclick ="onPrev()"   />
             
< input  id ="btnNext"  type ="button"  value ="下一页"   onclick ="onNext()"   />
             
< input  id ="btnLast"  type ="button"  value ="末页"   onclick ="onLast()"   />
             第
< input  id ="txtCurrPage"    type ="text"    onkeydown ="toPage()" /> /
             
< input   id ="txtPageCount" type ="text"  onkeydown ="toPage()" />
             页
        
</ div >
        
</ td >
  
</ tr >      
</ table >
 
</ div >
</ div >
< div  id ="ft" >
< iframe  width ="100%"  height ="80"  frameborder =0  scrolling ="no"  src ="../foot.htm" ></ iframe >
</ div >

</ body >
</ html >

xml文件格式如下:

<? xml version="1.0" standalone="yes" ?>
< NewDataSet >
  
< news >
    
< title > 合肥工业大学 </ title >
    
< time > 2007-04-18T00:00:00+08:00 </ time >
    
< url > txtfile/20070426221413.htm </ url >
  
</ news >
  
< news >
    
< title > 合肥工业大学计算机 </ title >
    
< time > 2007-04-27T00:00:00+08:00 </ time >
    
< url > notice/20070427184855.htm </ url >
  
</ news >
  
< news >
    
< title > 计算机2班 </ title >
    
< time > 2007-04-17T00:00:00+08:00 </ time >
    
< url > notice/20070427193529.htm </ url >
  
</ news >
  
< news >
    
< title > ssssss </ title >
    
< time > 2007-04-11T00:00:00+08:00 </ time >
    
< url > notice/20070427220218.htm </ url >
  
</ news >
</ NewDataSet >

请大家指点!!谢谢

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值