您的位置:首页 > Web前端 > javascript > 正文

js实现分页

更多 时间:2015-1-13 类别:Web前端 浏览量:286

js实现分页

js实现分页

一、实现思路

前端JS进行逻辑判断、组织分页Html代码,然后通过ajax异步从后台获取数据

 

二、实现方式

1、JS组织分页代码

 

  • JScript 代码   复制
  • 
    /**
     * 其中会传入三个参数,另外在代码中有一个方法beginPostTestResult(page),
    
    * 该方法是需要自己写的方法,该方法的作用就是向后台发出请求,得回数据的方法;
     * @param page 当前页
     * @param maxPage 最大页
     * @param liId 你要把这个页分的显示放在哪个li中,传入liId
     */
     function initPageInfo(page,maxPage,liId){
     $("#"+liId).html("");
     var kongge = "    ";
     var firstPage = "首页";
     var prePage = "上一页";
     var endPage = "末页";
     var nextPage = "下一页";
    
    if(page < 1){
     page = 1;
     }
    
     if(page > maxPage ){
     page = maxPage ;
     }
    
     if(page == 1 && page < maxPage){
     endPage =<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
    nextPage =<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
     }
      else if(page >1 && page < maxPage){
     firstPage =<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
    prePage =<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
    endPage =<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
    nextPage =<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
     }
      else if(page > 1 && page == maxPage){
     firstPage =<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
    prePage =<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
     }
    
     $(“#”+liId).html(firstPage+kongge+prePage+kongge+page+kongge+nextPage+kongge+endPage);
     }
    
    		
  • 2、异步从后台获取数据

     

  • JScript 代码   复制
  • 
    function beginPostTestResult(page){
    
    $.post(url,{参数},function(data,state,response){
    
    //TODO你的操作
    
    //注意:参数page 都要是整形的,不能是字符型
    
    initPageInfo(page,maxPage,liId);
    
    },”json”);
    
    }
    
    		
  •  

    标签:分页
    您可能感兴趣