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%>'  onclick="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.实现效果