当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > js结合xml文件实现分页效果代码下载

js结合xml文件实现分页效果代码下载

 2019-12-30 22:08:54 
本章节分享一段能够从xml文件读取数据，然后使用js读取实现分页效果，下面只列出代码，自己自行分析一下即可，这里就不多介绍了。代码如下:

一.前台读取js代码:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
</head>
<body >
<div id="gao"> </div>
<div>
  <table align="center">
    <tr>
      <td><input type="button" name="prev" id="prev" value="上一页"  onclick="showPage('false')">
        <input type="button" id="next" name="next" value="下一页"></td>
    </tr>
  </table>
</div>
<script type="text/javascript">
function LoadXML(url)
{
  var xmlDoc;
  if(window.ActiveXObject)
  { 
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async="false";
     xmlDoc.load(url);      
  }
  else if(document.implementation&&document.implementation.createDocument)
  {
    xmlDoc=document.implementation.createDocument("","",null);
    xmlDoc.async=false;
    xmlDoc.load(url);
  }
  else
  {
    alert("You browser cannot handle this script!");
  }
  return xmlDoc;
}
  
var xmlDoc=LoadXML("student.xml");
var students=xmlDoc.getElementsByTagName("student");
var stuLength=students.length;
var currentPage=0;
var pageSize=2;
var maxPage=Math.ceil(stuLength/pageSize);
  
function showPage(page)
{
  var mytable=document.getElementsByTagName("table")[1];
  if(mytable) document.body.removeChild(mytable); 
  var table=document.createElement("table");
  table.setAttribute("id","mytable");
  table.setAttribute("width","600");
  table.setAttribute("border","1");
  document.body.appendChild(table);
  
  var header=table.createTHead();
  var headerrow=header.insertRow(0);
  headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
  headerrow.insertCell(1).appendChild(document.createTextNode("学校"));
  headerrow.insertCell(2).appendChild(document.createTextNode("成绩"))
  if(page=="true")
  currentPage++;
  else
  currentPage--;
  if(currentPage>=maxPage) currentPage=maxPage;
  else if(currentPage<=0) currentPage=1;
  var start=(currentPage-1)*pageSize;
  var end=currentPage*pageSize-1;
  for(var i=start;i<=end;i++)
  {
    var e=students[i];
    var name=e.getAttribute("name");
    var school=e.getElementsByTagName("school")[0].firstChild.data;
    var grade=e.getElementsByTagName("grade")[0].firstChild.data;
    var row=table.insertRow(i%pageSize+1);
    row.insertCell(0).appendChild(document.createTextNode(name));
    row.insertCell(1).appendChild(document.createTextNode(school));
    row.insertCell(2).appendChild(document.createTextNode(school));
  }
}
showPage("true");
</script>
</body>
</html>
二.xml文件代码:
   [ 其他 ] 运行代码    下载代码
<script>
<?xml version="1.0" encoding="utf-8"?>
<students>
   <student name="gaoxing">
       <school>西北大学1</school>
    <grade>76</grade>
   </student>
   <student name="gaoxing">
       <school>西北大学2</school>
    <grade>76</grade>
   </student>
   <student name="gaoxing">
       <school>西北大3学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学4</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大5学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大6学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大7学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北8大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北9大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北10大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
</students>
</script>

            

                        
                        
                        
                        
                        
             
            
            
            
            
            

            

                
代码描述：js xml文件 分页效果。js结合xml文件实现分页效果代码下载

            

          

          

          
  
          
 下载全部 收藏 

          
  141    188  

          

          

          

                

      

      
      

        
用户评论

        

            

                
                                 

                  大牛，别默默的看了，快登录帮我点评一下吧！:)     
                  登录 | 
                  注册
                  

                                
                
                

                  
                

                
            

 			

			 
            
        

      

    

    

      

        

          

            
  522688 
              

                
                

                  
                

              

            

                         
            关注 
             
             
             
            

          
 TA的相关作品 >>更多 

          

            
          

                    
 热搜关键词 

          

            
          
  
                  

      

            

        
相关标签代码

        

          
        

      

  










 
   
   
   
   




    

        

            

            

                

                    

                        
                        

                            
XXX市XXXX区XXXXXXXXXX路0000号0000室

                            
753511799

                            
000-00000000

                        

                    

                

                

                    

                        关于我们
                        公司介绍
                        免费声明
                        用户条款
                        联系方式
                    

                

                

                    

                        网站地图
                        总站地图
                        内容地图
                        词库地图
                    

                

                

                

                    

                        战略合作
                        

                        暂无图片
                        暂无图片
                        

                    

                

            

        

    

    

        

            

                

                    

                        
Powered by 51qianduan 2.4.1 . Copyright ©  2015 - 2020 51前端  。 辽ICP备20007965号-3  。 Processed in 0.001970 second(s)

                    

                

                

                    
                

            

        

    
















	×
	

		
		
		

			
				
				QQ登录
			
			
				
				微信登录
			
			
				
				新浪登录
			

		

        
		
	

	






	×
	

	
51前端

	

		

		
注册

	

	

		
			
			QQ注册
		
		
			
			微信注册
		
		
			
			新浪注册
		

	

        
    
    

	





	×
	

	
绑定手机

	

		

        
请绑定手机号，在继续操作

	

		

		  

          
          

          

          
              

                

              

          
           

           

           
           
           
           
           
           
       

          

          
          

          
		  
          
          

		

        
    






	×
	

	
单次下载支付

	

		

	

		

		
应付金额：279元

        
支付完成后，回到下载页面，在进行下载

        

        

        

          
          
          
        

        
        支付宝支付
        
        
使用微信扫码付款

        


    	

        

          
          
          
        

        
        微信支付
        
        
使用微信扫码付款

        

		

		

    









  
 

  
官方QQ群

  
意见反馈

  
  

    
 qq群
      
扫描上面二维码加微信群

    

      

  

    

      
 官方QQ群 

      

      

        
jQuery/js讨论群

          群号：642649996

        
Css3+Html5讨论群

          群号：322131262

      

      
加群请备注：从官网了解到