Jquery实现弹出选择框选择数据后返回,数据实现分页

1.在jsp增加弹出框界面设计

               <input type='hidden' style='width:100px' class='text_input' name='ApplierID'  id='ApplierID' value='<%=oFile.getApplierID()%>'/>
               <%String applier = gd.getNameListByCode("XT_User", "UserID", oFile.getApplierID(), "UserName",";"); %>
               <input type='text' style='width:100px' class='text_input' name='Applier'  id='Applier' value='<%=applier%>'  οnclick="pop()"/>
    <!-- 弹出框 begin -->
    <!--alert layer-->  
    <div id="choose-box-wrapper" style="display: none;background:rgb(242,250,255);width:300px;border:1px solid;"> 
          <input type="text" id="txtKeyword" value="" />
          <script>writeGeneralImageBtn("btnSearch","搜索","搜索","search.gif","searchUser()");</script> 
      <table  width="300px" id="popApplier" align="center" cellpadding="3" cellspacing="0" border="1" bordercolorlight="gray" bordercolordark="#ffffff">
			<tr align="center" name="headerRow">
				<td height="35px" width="10px" align="center" class="text_label"> </td>
				<td height="35px" width="30px" align="center" class="text_label">序号</td>
				<td height="35px" width="50px" align="center" class="text_label" >编号</td>
				<td height="35px" width="50px" align="center" class="text_label">姓名</td>
			</tr>
			<tr>
				<td colspan="8" align="right"><script>writeGeneralImageBtn("btnLast","上一页","上一页","","lastPageApplier()");</script><script>writeGeneralImageBtn("btnNext","下一页","下一页","","nextPageApplier()");</script>
				共<label id="lbTotal">0</label>条记录,共<label id="lbTotalPage">0</label>页,第<label id="lbPage">1</label>页
				</td>
			</tr>
			<tr>
				<td colspan="8" align="center">
				<script>writeGeneralImageBtn("btnDoSelect","确定","确定","","doSelect()");</script><script>writeGeneralImageBtn("btnHide","关闭","关闭","","hide()");</script>
			</tr>
      </table>
    <!--alert layer--> 
	<!-- 弹出框 end -->

2.jQuery实现显示/隐藏弹出窗，ajax请求jsp加载数据行，选择数据行并返回。ajax请求jsp获取上一页/下一页数据。

    /****************弹出选择窗口 beging************************/
    var rowcount = 5;
    function pop(){  
        //将窗口居中  
        makeCenter();  
        //初始化数据列表  
		loadUserList("",1,rowcount);
    }  
    //隐藏窗口  
    function hide() {  
        $('#choose-box-wrapper').css("display", "none");  
    }  
    //获取选择值  
    function doSelect() {  
        var list = $("[name='chxSelected']");  
        var userID = "";  
        var userName = "";  
        var i = 0;
        list.each(function () {  
            if ($(this).is(':checked')) {  
                userID = $("[name='userID']").eq(i).text();  
                userName = $("[name='userName']").eq(i).text();
                return;
            };
            i++;
        });  
        $('#ApplierID').val('').val(userID);  
        $('#Applier').val('').val(userName);  
        //关闭弹窗  
        hide();  
    }
    
    //申请人选择－上一页
    function lastPageApplier()
    {
        var keyword = $("#txtKeyword").val();
        var totalPage = $("#lbTotalPage").html();
        var page = $("#lbPage").html();
        if(page==1)
        {
        	alert("已经是第1页");
        	return;
        }
        page--;
		loadUserList(keyword,page,rowcount);
		$("#lbPage").html(page);
    }
        
    //申请人选择－下一页
    function nextPageApplier()
    {
        var keyword = $("#txtKeyword").val();
        var totalPage = $("#lbTotalPage").html();
        var page = $("#lbPage").html();
        if(page==totalPage)
        {
        	alert("已经是最后1页");
        	return;
        }
        page++;
		loadUserList(keyword,page,rowcount);
		$("#lbPage").html(page);
    }
    //加载用户列表
    function loadUserList(keyword,page,rowcount)
    {
    	 $("[name='dataRows']").remove();
    	 var dataRows = "";
		 $.ajax({
			  	url : "<%=request.getContextPath()%>/scripts/module/expenserequest/ExpenseRequest_Info_Operation.jsp",
				type : "POST",
				dataType:"json",
				data : {
					act:1,
					keyword:keyword,
					page:page,
					rowcount:rowcount
				},
				success : function(data){
				    var dataObj = eval("("+data.data+")");//转换为json对象 
				    $.each(dataObj,function(idx,item){
					var tr = "<tr align='center' name='dataRows'>"
								+"<td align='center' class='text_label'><input type='checkbox' name='chxSelected'/></td>"
								+"<td align='left' class='text_label'><div name='seq'>"+(idx+1)+"</div></td>"
								+"<td align='left' class='text_label'><div name='userID'>"+item.UserID+"</div></td>"
								+"<td align='left' class='text_label'><div name='userName'>"+item.UserName+"</div></td>"
							+"</tr>";
					dataRows = dataRows+tr;
                    });
                    $("[name='headerRow']").after(dataRows);
                    $("#lbTotal").html(data.total);
                    $("#lbTotalPage").html(Math.ceil(data.total/rowcount));
				},
				error:function(){
        			alert(arguments[1]);
				}
			});
    }
    //设置申请人弹出窗口的显示位置
    function makeCenter()
    {  
        $('#choose-box-wrapper').css("display","block");  
        $('#choose-box-wrapper').css("position","absolute");  
        $('#choose-box-wrapper').css("top", "0px");  
        var left = ($(document).width() - $('#choose-box-wrapper').width())/2; 
        $('#choose-box-wrapper').css("left", left+"px");  
    }
    function searchUser()
    {
        var keyword = $("#txtKeyword").val();
		loadUserList(keyword,1,rowcount);
		$("#lbPage").html(1);
    }
	/****************弹出选择窗口 end************************/

3.编写ExpenseRequest_Info_Operation.jsp，充当servlet角色。实现加载数据和获取分页数据。

<%@page import="com.costech.common.util.json.JSONObject"%>
<%@page import="com.sun.org.apache.bcel.internal.generic.NEW"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="org.apache.commons.collections.MapUtils"%>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%@page import="java.util.*"%>
<%@page import="com.costech.common.util.StringUtility"%>
<%@page import="com.costech.common.constants.CommonConstants"%>
<%@page import="com.costech.common.service.ICommonService"%>
<%@page import="com.costech.common.helper.ServiceHelper"%>
<%@page import="com.costech.common.helper.AuthHelper" %>
<%@page import="com.costech.module.expenserequest.helper.ExpenseRequestHelper" %>
<%@page import="com.costech.module.expenserequest.service.IExpenseRequestService" %>
<%@page import="java.net.URLDecoder"%>


<%
request.setCharacterEncoding("UTF-8");

JSONObject retJson = new JSONObject();
String code = "1";
String msg = "操作成功";
String data = "";

IExpenseRequestService iExpenseRequestService  = (IExpenseRequestService)ServiceHelper.getService("expenseRequestService");
try{
	if(request.isRequestedSessionIdValid())
	{
	
		String act = StringUtility.toStringValue(request.getParameter("act"),"0");
		
		switch (Integer.parseInt(act))
		{
            case 0:
              String params = StringUtility.toStringValue(request.getParameter("params"),"");
			  iExpenseRequestService.saveSelf(params);
			  retJson.put("code", code);
			  retJson.put("msg", msg);
			  retJson.put("data", "");
			  retJson.put("total", "0");
			  out.write(retJson.toString());
			break;
			
			case 1:
			  String keyword = StringUtility.toStringValue(request.getParameter("keyword"),"");
			  String page1 = StringUtility.toStringValue(request.getParameter("page"),"");
			  String rowcount = StringUtility.toStringValue(request.getParameter("rowcount"),"");
			  String retStr = iExpenseRequestService.getUserList(keyword, page1, rowcount);
			  out.write(retStr);
			break;
			
			case 2:
			break;
								
			case 3:
			break;
			
			case 4:
			break;
			
			case 5:
			break;
		}
	}
}
catch(Exception e)
{ 
	e.printStackTrace();
	code = "0";
	msg = e.getMessage();
	retJson.put("code", code);
	retJson.put("msg", msg);
	retJson.put("data", "");
	retJson.put("total", "0");
	out.write(retJson.toString());
}
%>

4.实现效果