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中,当然,这只是第一页的代码,上一页的按钮和下一页的按钮我还没做,不过大致原理上和第一页其实差不多,只不过还要考虑其他各种的因素才能完善,总的来说,今天就只是完成了个大概,还有很多细节没有完善呢。

  • 相关阅读:
    字符串编码之一:字符串语法
    PHP进阶学习系列1:字符串编码提纲
    关于技术成长的一些反思
    Yii2学习笔记002---Yii2的控制器和视图
    PHP5.3--PHP7 新特性总结
    计算机软考笔记之《数据库基础》
    计算机软考笔记之《文件结构》
    计算机软考笔记之《抽象数据类型(ADT)》
    计算机软考笔记之《数据压缩》
    计算机软考笔记之《数据结构与算法》
  • 原文地址:https://www.cnblogs.com/yitiaokuailedexiaojingyu/p/14868997.html
Copyright © 2011-2022 走看看