封装dao方法 通用查询
/** * 通用的曾删改 * * @param sql * @param objct * @return */ public int executeUpdate(String sql, Object... objct) { int n=0; conn=DBHelper.getConn(); try { ps=conn.prepareStatement(sql); for (int i = 0; i < objct.length; i++) { ps.setObject(i+1, objct[i]); } n=ps.executeUpdate(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }finally { DBHelper.myclose(conn, ps, rs); } return n; } /** * 通用查询方法 * @param sql * @param objct * @return */ public ResultSet executeQuery(String sql, Object... objct) { conn=DBHelper.getConn(); try { ps=conn.prepareStatement(sql); for (int i = 0; i < objct.length; i++) { ps.setObject(i+1, objct[i]); } rs=ps.executeQuery(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return rs; }
分页sql语句定义oracle 语句dao 方法
@Override public List<Goods> getGoodsAll(Integer pagMax, Integer pagindex, String strName, Object... objects) { Integer pagcount = 4;// 默认每页显示4条 if (objects.length != 0) { try {// 如果传入字符串 报错 直接改为默认4条 pagcount = (Integer) objects[0]; } catch (Exception e) { pagcount = 4; } } Integer Maxindex = pagMax % pagcount == 0 ? pagMax / pagcount : pagMax / pagcount + 1; // 判断如果分页 页数大于了总分页条数 直接返回 不进数据库 if (pagindex > Maxindex) { return null; } Integer start = (pagindex - 1) * pagcount + 1; Integer end = pagcount * pagindex; String sql = "select gid,gname,gtype,gimage,gprice,gkc,ginfo from \r\n" + "(select a.gid,a.gname,a.gtype,a.gimage,a.gprice,a.gkc,a.ginfo,rownum as rid from \r\n" + "(select gid,gname,gtype,gimage,gprice,gkc,ginfo from tb_goods where gname like '%" + strName + "%' or ginfo like '%" + strName + "%')a\r\n" + " )b where b.rid between " + start + " and " + end + ""; ResultSet rs = this.executeQuery(sql); List<Goods> list = new ArrayList<Goods>(); try { while (rs.next()) { list.add(new Goods(rs.getInt(1), rs.getString(2), rs.getString(3), rs.getString(4), rs.getInt(5), rs.getInt(6), rs.getString(7))); } } catch (Exception e) { e.printStackTrace(); // TODO: handle exception } finally { //数据库 工具类 DBHelper.myclose(conn, ps, rs); } return list; }
Servlet界面获取数据代码 分页与提示共用界面 以及加载主页数据
package com.zking.cart.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.databind.ObjectMapper; import com.zking.cart.bzi.ICartBiz; import com.zking.cart.bzi.IGoodsBiz; import com.zking.cart.bzi.impl.CartBizImpl; import com.zking.cart.bzi.impl.GoodsBizImpl; import com.zking.cart.bzi.impl.UserBizImpl; import com.zking.cart.entity.Cart; import com.zking.cart.entity.Goods; import com.zking.cart.entity.Users; /** * Servlet implementation class GoodsList */ @WebServlet("/GoodsList.do") public class GoodsList extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ICartBiz cart=new CartBizImpl(); String parameter = request.getParameter("zt"); IGoodsBiz goods=new GoodsBizImpl(); //上方提示框制作 提示框 需要用到包含分类 商品名 与介绍 进行排分 提示框 后面跟着名字或者介绍 String str=request.getParameter("strname1"); if(str!=null) { List<Goods> goosdao =null; goosdao = goods.getvagueGoods(str); // System.out.println(goosdao.size()); //计算搜索框条数 Integer index=0; for (Goods goods2 : goosdao) { if(goods2.getGname().contains(str)) { index+=1; } if(goods2.getGinfo().contains(str)) { index+=1; } } Map< String , Object> map=new HashMap<String, Object>(); map.put("goodslist", goosdao); map.put("index", index); //json 转换对象 ObjectMapper oMapper=new ObjectMapper(); String writeValueAsString = oMapper.writeValueAsString(map); //返回给客户端 PrintWriter out = response.getWriter(); out.write(writeValueAsString); out.flush(); out.close(); //如果运行的是提示搜索 则后面代码不运行 return; }else { //获取当前页数 String indexs=request.getParameter("index"); Integer index=1; if(indexs!=null) { index=Integer.parseInt(indexs); } //获取模糊查询字段 String strName=request.getParameter("strName"); if(strName==null) { strName=""; } List<Goods> getvagueGoods = goods.getvagueGoods(strName); //计算最大页数 Integer pagSum=4; //Integer pagMax=getvagueGoods.size()%pagSum==0?getvagueGoods.size()/pagSum:getvagueGoods.size()/pagSum+1; List<Goods> goodsAll = goods.getGoodsAll(getvagueGoods.size(), index, strName,pagSum); //创建map集合保存 数据 Map<String, Object> map=new HashMap<String, Object>(); map.put("pagSum", pagSum); map.put("pagMax", getvagueGoods.size()); map.put("goodsAll",goodsAll); map.put("index",index); //json 转换对象 ObjectMapper oMapper=new ObjectMapper(); String writeValueAsString = oMapper.writeValueAsString(map); //返回给客户端 PrintWriter out = response.getWriter(); out.write(writeValueAsString); out.flush(); out.close(); } } }
Html界面代码 显示与搜索实现
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="css/style.css" /> <style type="text/css"> </style> <%@ include file="indexTop.jsp" %> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="js/jqPaginator.min.js" type="text/javascript"></script> <link href="css/myPage.css" rel="stylesheet" type="text/css" /> </head> <body> <script type="text/javascript"> window.sessionStorage.setItem("ztindex",0 ); </script> <!-- 引入头部标签 --> <%-- <c:if test="${empty requestScope.goodslist }"> <jsp:forward page="GoodsList.do"></jsp:forward> </c:if> --%> <script type="text/javascript"> //定义模糊查询的关键字 全局变量 let strName=""; //项目绝对地址 let path="${pageContext.request.servletContext.contextPath}"; $(function () { paging(1,""); //默认隐藏 $("#tsDiv").hide(); //判断有多少条数据 let count =0; //模糊查询! //键盘按下事件 $("#subut").prev().keyup(function () { let strname= $("#subut").prev().val()//获取搜索框中的值 //字符串取反 表示字符串为空的时候 返回true 有值则返回false |去掉取反符号 正好相反 if(!strname){ strName=""; paging(1,""); $("#tsDiv").slideUp(); $("#tsDiv").html("") return; } $.post(path+"/GoodsList.do","strname1="+strname, function (mag) { let list=$.parseJSON(mag); if(list.index>=11){ $("#tsDiv").css("height","300px"); }else{ $("#tsDiv").css("height",(20*list.index)+"px"); } console.log(list.goodslist.length) //在搜索时没有数据隐藏 if(list.goodslist.length==0){ $("#tsDiv").slideUp(); }else{ $("#tsDiv").slideDown(200); } let strs=""; $.each(list.goodslist,function (index,val) { //使用包含 js中的包含 //商品名包含 if(val.gname.includes(strname)){ let gname=val.gname; if(gname>=12){ gname=gname.substring(0, 12)+"..."; } strs+="<div onclick='clickts(this)' name='"+val.gname+"'><span>"+val.gname+"</span><label >商品名</label></div>"; } //商品介绍 14 if(val.ginfo.includes(strname)){ let ginfo=val.ginfo; if(ginfo.length>=12){ ginfo=ginfo.substring(0, 12)+"..."; } strs+="<div onclick='clickts(this)' name='"+val.ginfo+"'><span>"+ginfo+"</span><label >商品介绍</label></div>"; } }) $("#tsDiv").html(strs); }) }) $("#subut").prev().blur(function() { $("#tsDiv").slideUp(400); }) $("#subut").prev().focus(function() { let strname1= $("#tsDiv").html(); if(strname1.trim()){ $("#tsDiv").slideDown(); } }) }) //编写无刷新分页的代码 ajax function paging(index,strName,indexs) { $.ajax({ url:path+"/GoodsList.do", type:"post", async:"true", data: {"index":index,"strName":strName}, success:function(data){ let obj= $.parseJSON(data); //获取的最大页数 let pagMax=obj.pagMax; $("#PageCount").val(pagMax); //此方法刷新页数 还有 设置页码 console.log(pagMax) loadpage(parseInt(obj.index)); //重新计算页数方法 //获取的每页页数 let pagSum=obj.pagSum; //获取的数据 数组 let goodslist=obj.goodsAll; //保存拼接之后的标签 let str=""; $.each(goodslist,function (index,val) { str+="<tr class='odd'>"; str+="<td><input type='checkbox' name='bookId' value='"+val.cid+"'/></td>"; str+="<td class='title'>"+val.gname+"</td>"; str+="<td>¥"+val.gprice+"</td>"; str+="<td>"+val.gkc+"</td>"; str+="<td class='thumb'><img style='width: 100px; height: 80px' src='"+val.gimage+"' /></td></tr>"; }) //清空上一页数据!! for(var i=1;i<=parseInt(pagSum);i++){ //删除上一页的数据 $("#tablexs tr").eq(1).remove(); } $("#tablexs").append($(str)); } }) } //搜索按钮事件 function clicksu(obj) { strName=$(obj).prev().val(); //获取模糊搜索框中的值 paging(1,strName); } //提示框点击按钮事件 function clickts(obj) { strName=$(obj).attr("name"); $("#subut").prev().val(strName); paging(1,strName); } /** * 分页实现 下方样式!!!!!!!!!!!!!!!! */ function loadData(num) { if(num!=0){ paging(num,strName); } } </script> <div id="content" class="wrap"> <div class="list bookList"> <form method="post" name="shoping" action="${not empty users?'GoodsList.do':'javascript:index()'}"> <input type="hidden" value="1" name="zt"> <table id="tablexs"> <tr class="title"> <th class="checker"></th> <th>商品名</th> <th class="price">价格</th> <th class="store">库存</th> <th class="view">图片预览</th> </tr> <%-- <c:if test="${not empty requestScope.goodslist }"> <c:forEach items="${requestScope.goodslist }" var="goods"> <tr class="odd"> <td><input type="checkbox" name="bookId" value="${goods.cid }" /></td> <td class="title">${goods.gname }</td> <td>¥${goods.gprice }</td> <td>${goods.gkc }</td> <td class="thumb"><img style="width: 100px; height: 80px" src="${goods.gimage }" /></td> </tr> </c:forEach> </c:if> --%> </table> <div class="page-spliter"> <div> </div> <div> <ul class="pagination" id="pagination"> </ul> <input type="hidden" id="PageCount" runat="server" value="1"/> <input type="hidden" id="PageSize" runat="server" value="4" /> <input type="hidden" id="countindex" runat="server" value="10"/> <!--设置最多显示的页码数 可以手动设置 默认为7--> <input type="hidden" id="visiblePages" runat="server" value="4" /> </div> <script src="js/myPage.js" type="text/javascript"></script> </div> <div class="button"><input class="input-btn" type="submit" name="submit" value="" /></div> </form> </div> </div> <div id="footer" class="wrap">卓京信息网上书城 © 版权所有</div> </body> <script type="text/javascript"> function index() { alert("请你登录后在进行操作!!") location.href="login.jsp"; } </script> </html>
分页下一页应用了 插件基于BootStrap的分页
js引入界面
function exeData(num, type) { loadData(num); loadpage(); } function loadpage(index) { var myPageCount = parseInt($("#PageCount").val()); var myPageSize = parseInt($("#PageSize").val()); var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize); $("#countindex").val(countindex); $.jqPaginator('#pagination', { totalPages: parseInt($("#countindex").val()), visiblePages: parseInt($("#visiblePages").val()), currentPage: index, first: '<li class="first"><a href="javascript:;">首页</a></li>', prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>上一页</a></li>', next: '<li class="next"><a href="javascript:;">下一页<i class="arrow arrow3"></i></a></li>', last: '<li class="last"><a href="javascript:;">末页</a></li>', page: '<li class="page"><a href="javascript:;">{{page}}</a></li>', onPageChange: function (num, type) { if (type == "change") { exeData(num, type); } } }); } $(function () { loadData(0); loadpage(); });
css样式设置
.arrow2 { margin: 3px 8px 4px 0; border-left: 5px dashed transparent; border-bottom: 5px dashed transparent; border-top: 5px dashed transparent; border-right: 5px solid #ccc; display: inline-block; vertical-align: middle; } .arrow3 { margin: 3px 0 4px 8px; border-top: 5px dashed transparent; border-bottom: 5px dashed transparent; border-right: 5px dashed transparent; border-left: 5px solid #ccc; display: inline-block; vertical-align: middle; }
所设计到的依赖包
效果演示!