Ajax异步刷新分页功能-MySQL
1.Servlet中代码
/** 条件Map */ Map<String, Object> map=new HashMap<String, Object>(); /** 分页配置 */ int index = request.getParameter("index")==null?1:Integer.parseInt(request.getParameter("index")); int size=2; map.put("index", (index-1)*size); map.put("size", size); /** 根据用户不同的请求进入不同的响应操作 */ String method = request.getParameter("method"); boolean mark=false; if(method!=null){ if(method.equals("paging")){ /**执行分页操作 */ mark=true; } } /** 得到用户添加到购物车中的商品集合 */ List<Entry> entrys = session.getMapper(EntryDao.class).selectUsEntry(map); if(mark){ String entrysJson = JSONArray.fromObject(entrys).toString(); out.print(entrysJson); return; } /** 得到总条数 算出总页数 */ Integer entryCount = session.getMapper(EntryDao.class).entryCount(map); int totalPage=entryCount%size==0?entryCount/size:entryCount/size+1; /** 响应结果 */ request.setAttribute("entrys", entrys);//得到用户的购物车 request.setAttribute("totalPage", totalPage);//总条数 /** 转发跳转 */ request.getRequestDispatcher("page/crat_page.jsp").forward(request, response);
此为JSP的代码
<body> <table id="ver-minimalist" > <thead> <tr> <th>类别</th> <th>商品名字</th> <th>普通价格</th> <th>会员价格</th> <th>数量</th> <th>操作</th> </tr> </thead> <tbody id="tbodyEntry" > <c:forEach items="${requestScope.entrys}" var="entry" > <tr> <td>${entry.commodity.variety.nickName }</td> <td>${entry.commodity.nickName }</td> <td>${entry.commodity.ordinaryPrice }</td> <td>${entry.commodity.memberPrice }</td> <td>${entry.quantity }</td> <td align="center"> <input type="button" value="删除" onclick="" /> </td> </tr> </c:forEach> </tbody> <thead> <tr> <th colspan="6" align="right" ><input type="button" value="结算" onclick="" /></th> </tr> </thead> <tbody> <tr> <td colspan="6" align="right"" width="30px" > <input type="button" value="首页" id="firstpage" /> <input type="button" value="上页" id="beforepage" /> <input type="button" value="下页" id="nextpage" /> <input type="button" value="尾页" id="lastpage" /> <span id="index" >1</span>\<span id="totalPage" >${requestScope.totalPage}</span><!-- 此为当前页,与总页数 --> </td> </tr> </tbody>
此为JQuerty的代码
/** 全局变量 */ var index = 1; var totalPage = 0; /** 分页窗体事件 */ $(function () { /**取从Servlect中传到JSP页面的总条数信息 给全局变量totalPage 赋值 * 下为JSP页面中显示当前页和总页数 * <span id="index" >1</span>\<span id="totalPage" >${requestScope.senior.totalPage}</span> */ totalPage=$("#totalPage").html(); //首页 $('#firstpage').click(function () { if (index != 1) { index = 1; paging();/** 点击分页异步刷新函数 */ } return false; }); //尾页 $('#lastpage').click(function () { if (index != totalPage) { index = totalPage; paging(); } return false; }); //上一页 $("#beforepage").click(function () { if (index != 1) { index = index - 1; paging(); } return false; }); //下一页 $("#nextpage").click(function () { if (index < totalPage) { index = index + 1; paging(); } return false; }); }) /** 点击分页 */ function paging(){ ajaxBase("cartPageServlet?method=paging","index="+index,"paging"); /** 给页面显示当前页赋值 */ $("#index").html(index); } /** ajax函数工具类 * @param url:地址 * @param data:请求参数 * @param method:方法信号,作用判断进行什么操作 */ function ajaxBase(url,data,method){ $.ajax({ type:'post', url:''+url+'', cache:false, data:data, dataType:'text', success:function(result){ alert("ajax函数工具类:success"); /** 调用请求成功后的操作函数 */ success(result,method); }, error:function(){ alert("ajax函数工具类:error"); } }); } /** 根据method方法信号判断进行什么操作 * @param result:服务端响应的数据 * @param method:方法信号,作用判断进行什么操作 */ function success(result,method){ if(method=="paging"){ $("#tbodyEntry").children().remove(); var result = eval("("+result+")"); var append=""; for(var rst in result){ append=append+"" +"<tr>" +"<td>"+result[rst].commodity.variety.nickName+"</td>" +"<td>"+result[rst].commodity.nickName+"</td>" +"<td>"+result[rst].commodity.ordinaryPrice +"</td>" +"<td>"+result[rst].commodity.memberPrice +"</td>" +"<td>"+result[rst].quantity +"</td>" +"<td align='center'>" +"<input type='button' value='删除' onclick='javascript:alert('执行删除操作:'"+result[rst].id +")' />" +"</td>" +"</tr>" } $("#tbodyEntry").append(append); } }