Springmvc json加载数据 前端拼接技术

来源:互联网 发布:苹果版软件商店 编辑:程序博客网 时间:2024/06/06 05:37

  //后台方法

@RequestMapping(value = "/main/showNextPage.ajax/{page}", method = RequestMethod.POST)

    @ResponseBody
    public ListResultDto showNextPageajax(@PathVariable("page") int page) {
        ModelAndView view = new ModelAndView();
        view = new ModelAndView("member/main/ListBaodanMember");
        MemberListReqDto dto=new MemberListReqDto();
        dto.setPage(page);
        ListResultDto result = memberService.findMyBaodanRegisterMembers(dto);
        return result;

    }

//页面html

    <div class="mn-content"  data-role="page" id="pageone">
        <table class="table table-hover table-condensed">
            <tbody id="list">
                <tr>
                    <td>会员编号</td>
                    <td>会员昵称</td>
                    <td>身份</td>
                    <td style="width: 80px;">操作</td>
                </tr>
                <c:forEach items="${result.rows}" var="row" varStatus="status">
                <tr>
                    <td>${row.memberAccount}</td>
                    <td>${row.memberName}</td>
                    <td>${row.registerGradeName}</td>
                    <td><a href="#" class="btn btn-primary btn-xs">详情</a></td>
                </tr>
                </c:forEach>
            </tbody>
        </table>
        <ul class="pager" id="pager">
        <c:choose>
        <c:when test="${result.totalPage>result.page}">
        <a href="javascript:void(0);" onclick="load('${ctx}','${memberPath}',2,'${result.totalPage}')">查看更多</a>
        </c:when>
        </c:choose>
        </ul>
    </div>

//js部分

        function load(ctx,memberPath,page,totalPage){
            $.ajaxPost(ctx+"/"+memberPath+"/main/showNextPage.ajax/"+page,null,function(result) {
        
                var html ="";
                var main = $("#list");
                
                for(var i =0;i< result.rows.length;i++){
                    
                    html +="<tr><td>"+result.rows[i].memberAccount+"</td>"+"<td>"
                    +result.rows[i].memberName+"</td>"+"<td>"
                    +result.rows[i].registerGradeName+"</td>"+
                    "<td><a href='#' class='btn btn-primary btn-xs'>详情</a></td>"+"</tr>"
                }
                main.append(html);
                //如果还有下一页 则 显示加载更多  否则隐藏
                if(totalPage>page){
                    page=parseInt(page)+parseInt(1);
                    $("#pager").html('<a href="javascript:void(0);" onclick="load(\''+ctx+'\',\''+memberPath+'\',\''+page+'\',\''+totalPage+'\')">查看更多</a>');
                    $("#pager").show();
                }else{
                    $("#pager").hide();
                }
            });
        }

0 0
原创粉丝点击