一、首先先导jQuery类库
二、编写底层代码:
代码如下:
①获取任意表格中的总记录数
/**
* 获取任意表格中的总记录数
*/
public Integer getTableCount(String tableName,String searchName) {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "";
// 2.给对应的对象及变量赋值
try {
// 获取链接
conn = DBHelper.getConn();
// sql
sql = "select count(*) from "+tableName +" where gname like '%"+searchName+"%'";
// 执行sql语句
ps = conn.prepareStatement(sql);
// 返回结果集
rs = ps.executeQuery();
// 遍历结果集
if (rs.next()) {
return rs.getInt(1);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBHelper.myClose(conn, ps, rs);
}
// 3.返回结果
return 0;
}
②模糊查询的方法
public List<Goods> queryGoodsListAll(int pageIndex, int pageSize, String searchName) {
// 1.定义对应的三兄弟以及其它相关变量
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "";
Goods goods = null;
List<Goods> list = new ArrayList<Goods>();
int start = (pageIndex-1)*pageSize +1;
int end = pageIndex * pageSize;
//莫老弟
// 2.给对应的对象及变量赋值
try {
// 获取链接
conn = DBHelper.getConn();
// sql
sql = "select b.* from ( select a.* , rownum as rid from ( select * from tb_goods where gname like '%"+searchName+"%' ) a ) b where b.rid between "+start+" and "+end+"";
// 执行sql语句
ps = conn.prepareStatement(sql);
// 返回结果集
rs = ps.executeQuery();
// 遍历结果集
while (rs.next()) {
goods = new Goods();
goods.setGid(rs.getInt("gid"));
goods.setGname(rs.getString("gname"));
goods.setGtype(rs.getString("gtype"));
goods.setGimage(rs.getString("gimage"));
goods.setGprice(rs.getInt("gprice"));
goods.setGkc(rs.getInt("gkc"));
goods.setGinfo(rs.getString("ginfo"));
// 添加集合
list.add(goods);
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
DBHelper.myClose(conn, ps, rs);
}
// 3.返回结果
return list;
}
三、servlet代码:
private IGoodsBiz igb = new GoodsBizImpl();
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 1.设置字符集编码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
int pageIndex = 1;
int pageSize = 2;
String searchName = request.getParameter("searchName");
if(searchName == null) {
searchName = "";
}
//获取总记录数
int pageCount = new BaseDao().getTableCount("tb_goods",searchName);
//根据总记录数和每页显示的条数 求得最大页码
int pageMax = pageCount / pageSize;
if(pageCount % pageSize !=0) {
pageMax++;
}
String pIndex = request.getParameter("pageIndex");
if(null!=pIndex) {
pageIndex = Integer.valueOf(pIndex);
}
List<Goods> adminGoodsList = igb.queryGoodsListAll(pageIndex, pageSize,searchName);
PrintWriter out = response.getWriter();
//创建JSON工具
ObjectMapper mapper = new ObjectMapper();
//String result = mapper.writeValueAsString(adminGoodsList);
//通过ajax传输数据从后台---前台 有多个值 使用map集合
Map<String,Object> maps = new HashMap<String, Object>();
maps.put("adminGoodsList", adminGoodsList);
maps.put("pageMax", pageMax);
String result = mapper.writeValueAsString(maps);
out.write(result);
out.flush();
out.close();
}
四、显示层代码:
<script type="text/javascript" src = "js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//获取全路径
var path = "${pageContext.request.servletContext.contextPath }";
//定义全局变量保存当前的页码
let pageIndex = 1;
let pageMax = 0;//初始化最大页码
//本节课重点L利用AJAX来实现数据分页
$(function(){
//alert(123);
//调用post方法 传入servlet中拿到数据后 返回出来
indexLoad("");
$("#searchBtn").click(function(){
//获取输入框的值
let searchName = $("#searchName").val();
//alert(searchName);
indexLoad(searchName);
});
})
//封装 数据加载的post请求
function indexLoad(searchName){
$.post(path+"/adminGoodsList.do",{"pageIndex":pageIndex,"searchName":searchName},function(msg){
//alert(msg);
//后台传递过来的数据是字符串,满足JSON格式的定义
let list = $.parseJSON(msg);
//servlet中传递过来的最大页码
pageMax = list.pageMax;
let str = "<table border = \"1\" cellspacing = \"0\" cellpadding = \"0\" width = \"100%\">";
str+="<tr>";
str+="<th>商品编号</th>";
str+="<th>商品名称</th>";
str+="<th>商品类型</th>";
str+="<th>商品图片</th>";
str+="<th>商品价格</th>";
str+="<th>商品库存</th>";
str+="<th>商品简介</th>";
str+="<th>操作</th>";
str+="</tr>";
//console.log(list.adminGoodsList);
$.each(list.adminGoodsList,function(index,obj){
//console.log(a,b)
str+="<tr>";
str+="<td>"+obj.gid+"</td>";
str+="<td>"+obj.gname+"</td>";
str+="<td>"+obj.gtype+"</td>";
str+="<td><img src = '"+path+"/"+obj.gimage+"' width = \"80\" height= \"50\"/></td>";
str+="<td>"+obj.gprice+"</td>";
str+="<td>"+obj.gkc+"</td>";
str+="<td>"+obj.ginfo+"</td>";
str+="<td><button onclick = \"\">加入购物车</button></td>";
str+="</tr>";
});
str+="</table>";
$("#content").html(str);
$("#pIndex").html(pageIndex);
$("#pMax").html(pageMax);
});
}
//下一页的点击事件
function nextBtn(){
if(pageIndex >= pageMax){
pageIndex = pageMax;
}else{
pageIndex++;
}
let searchName = $("#searchName").val();
alert(searchName)
//alert(pageIndex)
indexLoad(searchName);
}
</script>
</head>
<body>
<div>
<input type ="text" id = "searchName" />
<button id= "searchBtn">搜索</button>
</div>
<div id = "content" style ="width:70%;background: pink;height:250px;text-align: center;margin:0 auto;">
</div>
<div style = "text-align: center">
《<span id = "pIndex"></span>/<span id = "pMax"></span>》
<a>首页</a>
<a>上一页</a>
<a href = "javascript:nextBtn()">下一页</a>
<a>尾页</a>
</div>
</body>