• 个人博客


    2021年5月12日:

    这是分页页面的截图:

     最初实现分页功能的时候,本来打算用pagehelper插件来做,但是并没有成功,于是只能用最原始的方法limit来将页码进行分页,并且每次一点击按钮就会将全局变量page进行加1或减1操作,然后将页码传给后端,最后才能将头像和姓名显示在页面上。

    同理,社团页面也是如此的原理,代码差不多:

    var page=1;
    var l=1;
    var pa;
    $(function() {
    $("#prev").attr("style","visibility:hidden");
    $.ajax({
    url : "${pageContext.request.contextPath}/club/page",
    data : "page=1&id="+${user.id},
    type : "get",
    success : function(data) {
    $.each(data,function(){
    var li=$("<li style='float: left; margin-right: 35px; 140px; margin-bottom: 50px;'></li>");
    var a=$("<a class='user-profile dropdown-toggle'></a>").attr("href","${pageContext.request.contextPath}/club/lookclub?name="+this.name+"&id="+this.id);
    var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/club/"+this.logo);
    $("#ul").append(li.append(a.append(img).append(this.name)));
    })
    }
    })
    })
    var clubs = ${clublist};
    if(clubs.length > 1){
    $("#page").show();
    }
    function prev() {
    $("#next").attr("style","visibility:visible");
    page--;
    if(page==1){
    $("#prev").attr("style","visibility:hidden");
    }
    $.ajax({
    url : "${pageContext.request.contextPath}/club/page",
    data : "page=" + page+"&id="+${user.id},
    type : "get",
    success : function(data) {
    l-=pa;
    pa=data.length;
    $("#ul").empty();
    $.each(data,function(){
    var li=$("<li style='float: left; margin-right: 35px; 140px; margin-bottom: 50px;'></li>");
    var a=$("<a class='user-profile dropdown-toggle'></a>").attr("href","${pageContext.request.contextPath}/club/lookclub?name="+this.name+"&id="+this.id);
    var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/club/"+this.logo);
    $("#ul").append(li.append(a.append(img).append(this.name)));
    })
    }
    })
    }
    function next() {
    page++;
    $("#prev").attr("style","visibility:visible");
    $.ajax({
    url : "${pageContext.request.contextPath}/club/page",
    data : "page=" + page+"&id="+${user.id},
    type : "get",
    success : function(data) {
    pa=data.length;
    l+=data.length;
    if(l==clubs.length){
    $("#next").attr("style","visibility:hidden");
    }
    $("#ul").empty();
    $.each(data,function(){
    var li=$("<li style='float: left; margin-right: 35px; 140px; margin-bottom: 50px;'></li>");
    var a=$("<a class='user-profile dropdown-toggle'></a>").attr("href","${pageContext.request.contextPath}/club/lookclub?name="+this.name+"&id="+this.id);
    var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/club/"+this.logo);
    $("#ul").append(li.append(a.append(img).append(this.name)));
    })
    }
    })
    }

  • 相关阅读:
    jvM垃圾回收
    Java快速失败和安全失败
    方法覆盖和方法重载
    leetcode-Reverse Words in a String
    自己玩玩
    leetcode-Reverse Vowels of a String
    leetcode-Reverse String
    leetcode-Multiply Strings
    java多线程-cas及atomic
    @media响应式布局
  • 原文地址:https://www.cnblogs.com/yitiaokuailedexiaojingyu/p/14872013.html
Copyright © 2020-2023  润新知