前端通过Ajax请求从后台返回数据到页面显示，实现分页功能

最新推荐文章于 2022-08-01 10:29:37 发布

qq_34582884

最新推荐文章于 2022-08-01 10:29:37 发布

阅读量1.5w

点赞数 3

本文链接：https://blog.csdn.net/qq_34582884/article/details/72188042

版权

本文纯属自己平时编代码时的总结，主要用于自己以后方便查看

后端controller代码

JsonMessage jsonMessage = new JsonMessage();
//***********************经过一些处理将数据存储在map中********************
Map<String,Object> map = new HashMap<String,Object>();
//list中放返回的数据
map.put("list", list);
//pages为总页数
map.put("pages",pages);
//curpage表示当前页  
map.put("curpage", curPage);    
jsonMessage.setObj(map);
return jsonMessage;

前端处理

/* 翻页功能 */
ajax请求体内容{

   //清空标签中的数据
                          $(".pagenationul").html("");
                        var obj = showPages(jsonmsg.obj.curpage,jsonmsg.obj.pages);
                        for(var i=1;i<=jsonmsg.obj.pages;i++){
                        //active作为标签用来标识当前页
                            var  st = i == jsonmsg.obj.curpage ? 'active' : '';
                            var strpage;
                            if(obj[i]){
                                strpage ='<li><a class="'+st+'" href="javascript:void(0)">'+i+'</a></li>';
                            }else{
                                strpage ='<li><span class="'+st+'" href="javascript:void(0)">......</span></li>';
                                if(i<jsonmsg.obj.curpage){
                                    i=jsonmsg.obj.curpage-4;
                                }else{
                                    i=jsonmsg.obj.pages-1;
                                }
                            }
                            $(".pagenationul").append(strpage);
                        }
                        $(".pagenationul a").on("click",function(){
                            turnpage(this,client);
                        }); 
  }

}

showPage:

<script type="text/javascript">
<!--页码处理 -->
    function showPages(curpage,total){
        var obj = new Array();
        obj[1]=1;
        obj[total]=1;
        if(total>=5){
            for(var i=2;i<total;i++){
                if(Math.abs(curpage-i)<=3){
                    obj[i]=1;
                }
            }
        }else{
            for(var i=2;i<total;i++){
                obj[i]=1;
            }
        }
        return obj;

    }
</script>

turnpage:

<script type="text/javascript">
function turnpage(page,client){

        var curpage = 1;
        clickpage = page.text;
        $(".pagination li").each(function(index,item){
            if($(this).find("a").attr("class") == "active"){
                curpage = index + 1;
            }
        });
         if(curpage!=clickpage){    
         //如果点击也不等于当前页，责再次发起ajax请求
            matchlists(client);
        } 
    }
    </script>