实现一个分页的步骤 :
服务器需要知道的有 :
每一页有多少数据 : pageSize // 可以自己设置每页显示多少数据
一共有多少数据 : totalRecord // 通过查询数据库获取 selece count(*) from xxx
当前页码 : pageNum // 通过浏览器传入
查询条件 : condition // 通过浏览器传入
浏览器需要知道的有 :
每一页的数据 : List＜T＞ list // 通过查询数据库获取
总页数 : totalPage // 总页数/每页数据量
显示多少分页 : howManyPages // 可以自己设置
当前页码 : pageNum // 通过自己传给后台,然后后天传回
开始页码 : start //
结束页码 : end //
数据库需要知道的有 :
每次查询多少数据 pageSize // 自己设置
从多少条数据开始查询 selectStart // (pageNum-1)*pageSize
查询条件 : condition // 通过浏览器传入
实现一个json的多条件组合查询
servlet :
1. 获取请求参数 : request.getParameter("请求参数");
2. 获取当前页码 : request.getParameter("当前页码");
3. 拼接查询条件 :
String[] a1 = {"条件1","条件2","条件3","条件4"};
String[] a2 = {"值1","值2","值3","值4"};
StringBuffer condition = new StringBuffer("");
if(值1 != null && !值1.equals("") || ......){
// 说明有查询条件 拼接一个where
condition.append(" where ");
// 设置一个boolean值,用来在第二个条件中拼接and
boolean addAnd = false;
for(int i=0;i＜a2.length;i++){
if(a2[i]!=null && !a2[i].equals("")){
// 说明这个参数是查询条件
if(addAnd){
// 第一次时,addAnd 是false,进不来,之后可以进来,保证在第二个条件开始才有and
condition.append(" and ");
}
// 将 条件=值传入
condition.append(a1[i]+"="+"\'"+a2[i]+"\'"); // 这里需要写成 条件 = '值'
}
}
}
4. 将当前页信息与sql语句传给service
5. 获得service返回的PageBean值
6. 将PageBean转换为json数据,传给前端
代码:
package web; import domain.Book; import domain.PageBean; import net.sf.json.JSONObject; import service.BookService; 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 java.io.IOException; @WebServlet(name = "BookService",urlPatterns = "/book") public class BookServlet extends HttpServlet { private static BookService bookService = new BookService(); private String bname; private String author; private String price; private String category; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { bname = request.getParameter("bname"); author = request.getParameter("author"); price = request.getParameter("price"); category = request.getParameter("category"); String pc = request.getParameter("pc"); String [] strings = {"bname","author","price","category"}; String [] strings1 = {bname, author, price, category}; StringBuffer sb = new StringBuffer(""); if (isTrue()){ sb.append(" where "); boolean showAnd = false; for (int i=0;i < strings1.length;i++) { if (strings1[i] != null && !strings1[i].equals("")) { if (showAnd) { sb.append(" and "); } sb.append(strings[i] + "=" +"\'"+ strings1[i]+"\'" + " "); showAnd=true; } } } PageBean<Book> pageBean = bookService.select(pc, sb.toString()); // System.out.println(pageBean); JSONObject jsonObject = JSONObject.fromObject(pageBean); response.getWriter().write(jsonObject.toString()); // response.sendRedirect("/index.html"); } private boolean isTrue(){ if (bname!=null && !bname.equals("")) return true; if (author!=null && !author.equals("")) return true; if (price!=null && !price.equals("")) return true; if (category!=null && !category.equals("")) return true; return false; } }
service :
1. 获得servlet传入的pageNum和sql
2. 拼接查询语句 , 查询总数据量
String selectCount = "select count(*) from xxx";
selectCount += sql;
3. 查询数据库,获取返回的数据条数 totalRecord
4. 创建PageBean对象,给初始值 totalRecord(总数据),pageNum(当前页),pageSize(每页显示的数据),howManyPages(多少页)
PageBean pageBean = new PageBean(totalRecord,pageNum,10,10);
在PageBean的构造方法中,计算出 start,end ....
5. 拼接查询语句 , 查询分页数据
String selectData = "select * from xxx";
selectData += sql;
selectData += " limit("+pageBean.selectStart + ","+pageBean.pageSize+")";
6. 通过sql语句,查询数据库,返回一个该对象的集合
7. 将该集合设置给pageBean
8. 将pageBean返回给servlet
代码:
package service; import dao.BookDao; import domain.Book; import domain.PageBean; import java.util.List; public class BookService { private static BookDao bookDao = new BookDao(); public PageBean<Book> select(String pc,String sql) { int p = setPc(pc); String countSql = "select count(*) from book"; countSql +=sql; Long aLong = bookDao.selectCount(countSql); Number number = aLong; int i = number.intValue(); PageBean<Book> pageBean = new PageBean<>(p,10,i); sql+=" limit "+pageBean.getStartIndex()+","+pageBean.getPageSize(); String bookSql = "select * from book"; bookSql +=sql; List<Book> books = bookDao.selectBySql(bookSql); pageBean.setList(books); return pageBean; } private int setPc(String pc){ if (pc == null){ pc = "1"; }else if (pc.equals("")){ pc = 1+pc; } int p = Integer.parseInt(pc); return p; } }
pageBean :
// 这些是外部传入的属性
private int pageNum; // 当前页
private int totalRecord; // 总数据条数
private int pageSize; // 每页显示的数据量
private int howManyPages; // 超链接有多少页
// 这些是计算得到的数据
private int totalPage; // 总页数
private int start; // 第一个分页应该是多少页
private int end; // 最后一个分页应该是多少页
private int selectStart; // 查询数据库应该从多少条查起
// 这个是查询数据库后设置的数据
private List＜T＞ list; // 保存查询到的数据
// 在构造方法中,初始化参数,设置计算数据
public PageBean(int totalRecord,int pageNum, int pageSize, int howManyPages){
// 初始化传入的参数
this.totalRecord = totalRecord;
this.pageNum = pageNum;
this.pageSize = pageSize;
this.howManyPages = howManyPages;
// 计算出总页数
if(totalRecord \% pageSize == 0){
// 说明整除
this.totalPage = totalRecord/pageSize;
}else{
// 否则,多余的数据,再开一页
this.totalPage = totalRecord/pageSize + 1;
}
/**
/* 计算start 和 end;
/* 一般,当前页在分页的中间
/* 所以 start = pageNum - middle; end = pageNum + middle(奇数);end = pageNum+middle-1(偶数)
*/
int middle = howManyPages/2;
start = pageNum - middle;
if(howManyPages\%2 == 0){
end = pageNum + middle - 1;
}else{
end = pageNum + middle;
}
if(start ＜ 1){
// 如果start ＜ 1 , 说明无法到,最中间
start = 1;
end = start+howManyPages-start;
}
if(end ＞ totalPage){
// 说明要到最后页了
end = totalPage;
start = end - howManyPages + 1;
}
// 还有一种特殊情况,当数据量不够分页的条目时
if(totalPage ＜ howManyPages){
start = 1;
end = totalPage;
}
// 数据库应该从多少条数据开始查询
// 查询10条 第一页 0-9 第二页 10-19 第三页20-29; 可知 start = 当前页-1 * 每次查询多少
selectStart = (pageNum - 1)*pageSize;
}
// get/set方法
代码:
public class PageBean<T>{ // 这些是外部传入的属性 private int pageNum; // 当前页 private int totalRecord; // 总数据条数 private int pageSize; // 每页显示的数据量 private int howManyPages; // 超链接有多少页 // 这些是计算得到的数据 private int totalPage; // 总页数 private int start; // 第一个分页应该是多少页 private int end; // 最后一个分页应该是多少页 private int selectStart; // 查询数据库应该从多少条查起 // 这个是查询数据库后设置的数据 private List<T> list; // 保存查询到的数据 // 在构造方法中,初始化参数,设置计算数据 public PageBean(int totalRecord,int pageNum, int pageSize, int howManyPages){ // 初始化传入的参数 this.totalRecord = totalRecord; this.pageNum = pageNum; this.pageSize = pageSize; this.howManyPages = howManyPages; // 计算出总页数 if(totalRecord % pageSize == 0){ // 说明整除 this.totalPage = totalRecord/pageSize; }else{ // 否则,多余的数据,再开一页 this.totalPage = totalRecord/pageSize + 1; } /** /* 计算start 和 end; /* 一般,当前页在分页的中间 /* 所以 start = pageNum - middle; end = pageNum + middle(奇数);end = pageNum+middle-1(偶数) */ int middle = howManyPages/2; start = pageNum - middle; if(howManyPages%2 == 0){ end = pageNum + middle - 1; }else{ end = pageNum + middle; } if(start < 1){ // 如果start < 1 , 说明无法到,最中间 start = 1; end = start+howManyPages-start; } if(end > totalPage){ // 说明要到最后页了 end = totalPage; start = end - howManyPages + 1; } // 还有一种特殊情况,当数据量不够分页的条目时 if(totalPage < howManyPages){ start = 1; end = totalPage; } // 数据库应该从多少条数据开始查询 // 查询10条 第一页 0-9 第二页 10-19 第三页20-29; 可知 start = 当前页-1 * 每次查询多少 selectStart = (pageNum - 1)*pageSize; } }
js :
1. 获取请求参数
var url = location.search;
2. 访问servlet,获取json数据
function page(pageNum){
$.get("",function(data,status)){ }
}
3. 获取List中的数据,遍历使用表格显示
var xxlist = data[list];
$.each(xxlist,function(index,data)){ // 遍历显示}
4. 创建分页栏
// 使用for循环,从start到end
for(var i =data["start"];i＜=data["end"];i++){
// 显示
// 这里使用div,添加点击事件
click(function(){page($(this).text())})
}
5. 当前页特殊标记
// 到for循环里面
if(i = data[pageNum]){//特殊样式}
6. 上一页
// for循环前面
if(data[pageNum]＞1){// 上一页 page(data[pageNum] -1)}
7. 下一页
// for循环后面
if(data[pageNum]＜data[totalPage]){// 下一页 page(data[pageNum] +1)}
8. 跳页
// 下一页后面,使用js创建一个input和一个button
button点击事件
click(function(){page($('input'.val()))})
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>书店详情</title> <script src="/JS/jquery-3.2.1.min.js"></script> <style type="text/css"> a{text-decoration-line: none;font-size: 16px;margin: 2px} div{display: inline-block; height: 20px;width: 20px;border: 1px solid skyblue; margin: 2px;text-align: center} .div1{font-weight: bold;border: 0} .div2{width: 60px} .input{width: 30px} </style> </head> <body> <table border="1"></table> </body> <script type="text/javascript"> var url = location.search; console.log(url); xxx(""); function xxx(pc) { $('tr').remove(); $('div').remove(); $('input').remove(); $.get("/book"+url+pc,function (data, status) { console.log(data); console.log(status); if(status == "success"){ var jsonData = $.parseJSON(data); var jsonDatum = jsonData["list"]; console.log(jsonDatum); if (jsonDatum.length != 0){ $('table').append( $('<tr>').append($('<th>').text("bname")) .append($('<th>').text("author")) .append($('<th>').text("price")) .append($('<th>').text("category")) ); $.each(jsonDatum,function (index, data) { $('table').append( $('<tr>').append( $('<td>').text(data["bname"]) ).append( $('<td>').text(data["author"]) ).append( $('<td>').text(data["price"]) ).append( $('<td>').text(data["category"]) ) ) }) } else{ $('body').html("<a href='index.html'>没有数据,点击返回</a>") } if (jsonData["pageNum"] > 1){ $('body').append( $('<div>').attr({"class":"div2"}).text("上一页").click(function () { xxx(jsonData["pageNum"]-1) }) ) } for(var i=jsonData["start"];i<=jsonData["end"];i++){ if (jsonData["pageNum"] == i){ $('body').append( $('<div>').attr({"class":"div1"}).text(i).click(function () { xxx($(this).text()); }) ) }else{ $('body').append( $('<div>').text(i).click(function () { xxx($(this).text()); }) ) } } if (jsonData["pageNum"] < jsonData["totalPage"]){ $('body').append( $('<div>').attr({"class":"div2"}).text("下一页").click(function () { xxx(jsonData["pageNum"]+1) }) ) } if (jsonDatum.length != 0) { $('body').append( $('<input>').attr({"type": "text", "class": "input"}) ).append( $('<div>').text("跳转").css({"width": "40px"}).click(function () { console.log($('.input').val()); xxx($('.input').val()) }) ) } } }) } </script> </html>
首页的html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <script src="JS/jquery-3.2.1.min.js"></script> </head> <body> <form action="book.html" method="get" id="tf"> 书名:<input type="text" name="bname"><br> 作者:<input type="text" name="author"><br> 价格:<input type="text" name="price"><br> 分类:<input type="text" name="category"><br> <input type="hidden" name="pc" value=""> <input type="submit" value="提交"> </form> </body> </html>
浙公网安备 33010602011771号