前端ajax,后台java+springmvc实现异步表格局部刷新分页

package com.ht.vo;

import java.util.ArrayList;
import java.util.List;

public class EndorseVoPage {
	// 当前页码
	private int pageIndex;
	// 每页显示的记录条数
	private int pageSize;
	// 总页数
	private int pageCount;
	// 当前页的数据
	private List<PABusinessVO> endorseList = new ArrayList<PABusinessVO>();
	
	

	public EndorseVoPage() {
		super();
	}

	public EndorseVoPage(int pageIndex, int pageSize, int pageCount,
			List<PABusinessVO> endorseList) {
		super();
		this.pageIndex = pageIndex;
		this.pageSize = pageSize;
		this.pageCount = pageCount;
		this.endorseList = endorseList;
	}

	public int getPageIndex() {
		return pageIndex;
	}

	public void setPageIndex(int pageIndex) {
		this.pageIndex = pageIndex;
	}

	public int getPageSize() {
		return pageSize;
	}

	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}

	public int getPageCount() {
		return pageCount;
	}

	public void setPageCount(int pageCount) {
		this.pageCount = pageCount;
	}

	public List<PABusinessVO> getendorseList() {
		return endorseList;
	}

	public void setendorseList(List<PABusinessVO> endorseList) {
		this.endorseList = endorseList;
	}

}

private EndorseVoPage getODSForEndorse(Map params) throws Exception{
		//获得分页的批改信息列表
		       
		        List<PABusinessVO> endorseList = moritorBusinessCountBs.queryODSForEndorse(params);
		        int count = moritorBusinessCountBs.getEndorseCount(params);          //计算需要分的页数
		        int pageCount = 0;
		        int pageSize = 100;
		        if(count%pageSize == 0){
		            pageCount = count/pageSize;
		        }else{
		            pageCount = count/pageSize + 1;
		        }
		        
		        EndorseVoPage endorseVoPage = new EndorseVoPage(Integer.parseInt(params.get("pageIndex").toString()),pageSize,pageCount,endorseList);
		        
                return endorseVoPage;	
	}

	@RequestMapping({ "query_endorse" })
	public String queryEndorse(HttpServletRequest request, HttpServletResponse response) throws Exception {
		// 1.0 获取外部参数信息
		Map<String, String> params = new HashMap<String, String>();
		String db = request.getParameter("db");
		String flag = request.getParameter("flag");
		String policyno = request.getParameter("policyno");
		params.put("flag", flag);
		params.put("policyno", policyno);
		
		    DataSourceContextHolder.clearDataSourceType();
		    DataSourceContextHolder.setDataSourceType(db);
			List<PABusinessVO> vos1 = moritorBusinessCountBs.queryODSForEndorseDetail(params);

		request.setAttribute("vos1", vos1);		
		return "query_endorse";
	}
	
	@RequestMapping({ "query_endorsePage" })
	public void queryEndorsePage(HttpServletRequest request, HttpServletResponse response) throws Exception {
		// 1.0 获取外部参数信息
		Map<String, String> params = new HashMap<String, String>();
		String db = request.getParameter("db");
		String flag = request.getParameter("flag");
		String insuranceCode = request.getParameter("insuranceCode");
		params.put("insuranceCode", insuranceCode);
		params.put("flag", flag==null?"week":flag);
		
		    DataSourceContextHolder.clearDataSourceType();
		    DataSourceContextHolder.setDataSourceType(db);
			
			String pageSize = request.getParameter("pageSize");
			String pageIndex = request.getParameter("pageIndex");
			
			params.put("pageSize", pageSize);
			params.put("pageIndex", pageIndex);
	
			EndorseVoPage endorseVoPage =this.getODSForEndorse(params);
			    JSONArray json = null;
		        json=new JSONArray().fromObject(endorseVoPage);
		        PrintWriter out = response.getWriter();
		        out.write(json.toString());
		        out.flush();
		        out.close();
	}

前端:
<span style="text-align:center;display:block;font-weight:bold;"><h4><B>批改情况统计</B></h4></span>
			<table class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>保单号</th>
						<th>批改次数</th>
						<th>增减保费</th>
						<th></th>
					</tr>
				</thead>
				<tbody id ="endorses">
				<!--	<c:forEach items="${vos3}" var="vo">
						<tr>
							<td>${vo.key1 }</td>
							<td>${vo.mycount }</td>
							<td>${vo.mypremium}</td>
							<td><a href="#" οnclick="javascript:window.open('<%=request.getContextPath()%>/query_endorse.action?db=<%=db%>&flag=<%=flag%>&policyno=${vo.key1 }','用户信息','height=450,width=1000,top=200,left=200,toolbar=no,menubar=no,location=no, status=no,scrollbars=yes,resizable=yes')" target="_blank">详单</a></td>
						</tr>
					</c:forEach>-->
				</tbody>
			</table>
			<ul class="pagination" id="jqPaginator" align ="right"></ul>
			


		</div>
		<script>
        var model = {  
        pageIndex: 1,      //索引页  
        pageSize: 100,      //每页列表的行数  
        pageCount: 1,//总页数
        }; 


    $(document).ready(function () {  
        Filter();  
    });
    
    function Filter() {  
        $.ajax({  
            type:"POST",  
            dataType:"json",  
            url:"<%=request.getContextPath()%>/query_endorsePage.action",   //回发到的页面  
            data:"db=<%=db%>&flag=<%=flag%>&insuranceCode=<%=insuranceCode%>&pageIndex=" + model.pageIndex + "&pageSize=" + model.pageSize,
            //async:false, 
            cache:false, 
            success: function(data) {
                var endorsesdata = eval(data);
                if (endorsesdata[0].pageCount == 0 ) {
                        //model.filterCounts = 1;
                }else{
                    model.pageSize = endorsesdata[0].pageSize;
                    model.pageCount = endorsesdata[0].pageCount;
                    model.pageIndex = endorsesdata[0].pageIndex;
                }  
                $("#endorses").empty();   //清空div中内容
                
                $.each(endorsesdata[0].endorseList, function (index, content) {
                     var tr_url = "<%=request.getContextPath()%>/query_endorse.action?db=<%=db%>&flag=<%=flag%>&policyno="+content.key1;
                   	 var trDom = "<tr> "+
											"<td>"+content.key1+"</td>"+
											"<td>"+content.mycount+"</td>"+
											"<td>"+content.mypremium+"</td>"+
											'<td><a href="#" οnclick="javascript:window.open("'+tr_url+'","用户信息","height=450,width=1000,top=200,left=200,toolbar=no,menubar=no,location=no, status=no,scrollbars=yes,resizable=yes")" target="_blank">详单</a></td>'
										"</tr>";
                    $("#endorses").append(trDom);
                    
                })
                
                paginator(model.pageIndex, model.pageSize,model.pageCount); 
                
            },
            error:function(){
                $("#endorses").empty();   //清空div中内容
                $("#endorses").append('<strong><p style="text-indent:2em">No Contents</p></strong>');
            }
        });  
    }
    
    function paginator(pageIndex, pageSize, pageCount) {  
        $.jqPaginator('#jqPaginator', {
            totalPages: pageCount,
            visiblePages: 10,
            currentPage: pageIndex,
            pageSize: pageSize,
            first: '<li><a href="javascript:void(0);">首页<\/a><\/li>',  
            prev: '<li><a href="javascript:void(0);">上一页<\/a><\/li>',  
            next: '<li><a href="javascript:void(0);">下一页<\/a><\/li>',  
            last: '<li><a href="javascript:void(0);">末页<\/a><\/li>',  
            page: '<li><a href="javascript:void(0);">{{page}}<\/a><\/li>',
            onPageChange: function (n, type) {  
                if (type == 'change' && n != model.pageIndex) {  
                    model.pageIndex = n;    //点击改变页码时,同步model中的页码  
                    Filter();               //重新生成新表  
                }  
            }
        });
    }
		</script>


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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值