zoukankan      html  css  js  c++  java
  • 个人博客

    2021年5月10日:

    今天大致上做了成员列表的完善,具体体现为当成员数大于20时会自动显示分页,并且在页面上显示出成员的头像和真实姓名,并且当到达最后一页时,会自动隐藏下一页按钮,当第一页时会自动隐藏上一页按钮,具体的代码如下所示:

    <div class="col-md-9 col-sm-9 col-xs-12">
    <div class="" role="tabpanel" data-example-id="togglable-tabs">
    <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
    <li role="presentation" class="active"><a
    href="#tab_content1" id="home-tab" role="tab" data-toggle="tab"
    aria-expanded="true">成员列表</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
    <div role="tabpanel" class="tab-pane fade active in"
    id="tab_content1" aria-labelledby="home-tab"
    style="height: 320px;">
    <div style="height: 320px;">
    <ul class="list-unstyled user_data" id="ul">
    </ul>
    </div>
    <ul class="nav nav-pills"
    style="margin-left: 720px; display: none;" id="page">
    <li class="active" id="prev"><a href="" data-toggle="tab"
    onclick="prev()">上一页</a></li>
    <li style="margin-left: 10px;" id="next"><a href=""
    data-toggle="tab" onclick="next()">下一页</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>

    这是选项卡的代码,该代码就是通过ajax请求将数据发送到ul中,ajax请求的代码:

    $(function() {
    $("#prev").attr("style","visibility:hidden");
    $.ajax({
    url : "${pageContext.request.contextPath}/user/page",
    data : "page=1&id="+${club.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","javaScript:;");
    var img=$("<img>").attr("src","${pageContext.request.contextPath}/statics/images/user/"+this.head_img);
    if(this.user_type==2){
    $("#ul").append(li.append(a.append(img).append(this.true_name+"(社长)")));
    }else
    {
    $("#ul").append(li.append(a.append(img).append(this.true_name)));
    }
    })
    }
    })
    })

    该代码的意思在于,在页面加载完成之后通过发送ajax请求获得到数据之后,通过传送页码也就是第一页以及社团的Id然后将动态生成的li加到ul中,当然,这只是第一页的代码,上一页的按钮和下一页的按钮我还没做,不过大致原理上和第一页其实差不多,只不过还要考虑其他各种的因素才能完善,总的来说,今天就只是完成了个大概,还有很多细节没有完善呢。

  • 相关阅读:
    sysmail_configure_sp 更改数据库邮件的配置设置
    浅析ObjectiveC 深浅拷贝学
    各种语言下 static 详解
    iphone 开发内存管理 心得
    Mac 虚拟机下进行 ios 开发札记(随时Update),一起进步
    开启VMWare的3D加速
    ObjC,文件加载与保存、序列化/反序列化
    解析ObjectiveC中多态、动态类型和动态绑定
    编译tool chains的笔记
    转载 常用的iphone开发学习网站
  • 原文地址:https://www.cnblogs.com/yitiaokuailedexiaojingyu/p/14868997.html
Copyright © 2011-2022 走看看