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

  //后台方法

@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);" οnclick="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);" οnclick="load(\''+ctx+'\',\''+memberPath+'\',\''+page+'\',\''+totalPage+'\')">查看更多</a>');
                    $("#pager").show();
                }else{
                    $("#pager").hide();
                }
            });
        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值