前端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>