文章目录
- 涉及到的技术点
- 分页的种类
- 分页原理
- javaee三层架构
- 代码思路
- 实现代码
- 目录结构
- 实现效果
涉及到的技术点
- 前端使用bootstrap的分页组件来完成数据的分页显示;
- 服务器端使用javaee经典三层架构;
- 使用C3P0连接池,dbutils来完成数据库操作。
分页的种类
- 物理分页:使用数据库本身的分页操作来完成数据查询,查询到的就是当前页的信息。例如mysql可以使用limit,oracle数据库可以使用rownum来完成。优点是性能好,但是存在不通用的问题。
- 逻辑分页:利用数据库的游标来操作,性能低但是通用。
- 现在开发中常用物理分页。
分页原理
- sql语句:select * from table limit(页码-1) ×每页条数,(每页条数);
- 完成分页操作必备条件:
- 页码pageNo默认是1,会根据上一页、下一页、首页、尾页的选择变化,通过js来控制;
- 每页显示条数人为控制;
- 总条数;
- 总条数=总条数/每页显示条数(要取整);
- 封装的当前页的数据。
javaee三层架构
代码思路
- 前期准备
- 工程的目录结构
- 配置文件、工具类、jar包导入
- 完成查询所有列表操作
- 创建查询页面,向服务器发送请求(获取要查询的信息)。
- 创建servlet接收浏览器请求,获取产品信息(web包下创建)。
- 创建业务层service。
- 创建持久化层dao。dao层进行数据库查询-----service----servlet
- servlet将list结果转换成json响应到浏览器。
- 浏览器页面ajax操作,遍历数据写入表格。
- 分页操作
- 在浏览器端设置pageNo和pageSize,将他们作为参数传递到服务器端。
- 服务器处理分页:
- 在分页条中需要总页数据,也就是说,总页数我们需要在服务器端查询获得到。可以定义一个pageBean对象,在pageBean中封装分页需要的数据,将他在服务器端生成。服务器端就不需要直接返回list集合,而是返回一个pageBean的json数据。
- 在浏览器端展示分页信息
- 判断处理当前页高亮显示
- 点击页码,可以跳转到指定页
- 在真正生成分页数据前将数据清空
- 处理请求参数pageNo
- 实现上一页、下一页功能
实现代码
- html页面操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/web08/bootstrap/css/bootstrap.min.css">
<script src="/web08/jquery/jquery-1.11.3.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/web08/bootstrap/js/bootstrap.min.js"></script>
<script>
var pageNo = 1; //默认第一页
var pageSize = 5; //每页显示条数
var totalPage = 0;
var totalCount = 0;
<!-- 页面加载完成后,要向服务器发送请求,来获取产品信息,在table中显示出来 -->
$(function(){
skipPage(pageNo);
});
//处理跳转页面
function skipPage(pageNum){
pageNo = pageNum;
var url = "/web08/score";
$.post(url,{"pageNo":pageNo,"pageSize":pageSize},function(data){
var json = eval(data);
var jsonObj = json.content;//得到分页数据
//将页码 每页条数 总条数 总页数与服务器响应的数据同步
totalPage = json.totalPage;
totalCount = json.totalCount;
//将json数据遍历,转换成html代码插入tab
var html=" ";
for (var i = 0; i < jsonObj.length; i++) {
html += "<tr><td>" + jsonObj[i].id + "</td><td>"
+ jsonObj[i].stu_id + "</td><td>"
+ jsonObj[i].c_name + "</td><td>"
+ jsonObj[i].greade + "</td></tr>";
}
//展示分页条数据
var pageMsg="<ul class='pagination'>";
//实现上一页功能
if(pageNo == 1){
pageMsg += "<li class='disabled'><a href='#'>«</a></li>";
}else{
pageMsg += "<li><a href='javascript:viod(0)' οnclick='skipPage("+(pageNo-1)+")'>«</a></li>";
}
for(var i = 0; i < totalPage; i++){
//判断页码与(i+1)是否一致,一致就代表当前页码要高亮显示
if((i+1) == pageNo){
pageMsg += "<li class='active'><a href='jacascript:void(0)'>"+(i+1)+"</a></li>";
}else{
pageMsg += "<li><a href='jacascript:void(0)' οnclick='skipPage("+(i+1)+")'>"+(i+1)+"</a></li>";
}
}
//实现下一页功能
if(pageNo == totalPage){
pageMsg += "<li class='disabled'><a href='#'>»</a></li>";
}else{
pageMsg += "<li><a href='javascript:viod(0)' οnclick='skipPage("+(pageNo+1)+")'>»</a></li>";
}
pageMsg += "</ul>";
//清空页面数据,避免重复显示
$("#tab").html("<tr><td>序号</td><td>学号</td><td>科目</td><td>成绩</td></tr><tr><td colspan='4'><nav id='n'></nav></td></tr>");
$("#n").append(pageMsg);
$("#tab tr:nth-child(1)").after(html);
},"json");
}
</script>
</head>
<body>
<div class="container">
<table class="table table-striped" id="tab">
<tr>
<td>序号</td>
<td>学号</td>
<td>科目</td>
<td>成绩</td>
</tr>
<tr>
<td colspan="4"><nav id="n"></nav></td>
</tr>
</table>
</div>
</body>
</html>
- servlet层操作
public class ScoreServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//处理响应数据中文乱码
response.setCharacterEncoding("utf-8");
//接收请求参数pageNo、pageSize
int pageNo = Integer.parseInt(request.getParameter("pageNo")); //页码
int pageSize = Integer.parseInt(request.getParameter("pageSize"));//每页显示条数
try {
//查询所有产品
ScoreService scoreService = new ScoreService();
PageBean<Score> pageBean = scoreService.selectAll(pageNo,pageSize);
//将pageBean转换成json响应到浏览器
String json = JSONObject.toJSONString(pageBean);
response.getWriter().write(json);
} catch (SQLException e) {
e.printStackTrace();
//向浏览器发送一条描述错误信息的json数据
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
- service层操作
public class ScoreService {
// public List<Score> selectAll(int pageNo,int pageSize) throws SQLException{
// ScoreDao scoreDao = new ScoreDao();
//
// return scoreDao.selectAll(pageNo,pageSize);
// }
//使用pageBean来处理分页数据
public PageBean<Score> selectAll(int pageNo,int pageSize) throws SQLException{
ScoreDao scoreDao = new ScoreDao();
List<Score> list = scoreDao.selectAll(pageNo,pageSize);
PageBean<Score> pageBean = new PageBean<Score>();
//将分页数据封装到PageBean中
pageBean.setContent(list);
pageBean.setPageNo(pageNo);
pageBean.setPageSize(pageSize);
//总条数通过selece count(*) from table查询
int totalCount = scoreDao.selectCount();
pageBean.setTotalCount(totalCount);
//System.out.println(totalCount);
int totalPage = (int) Math.ceil(totalCount*1.0/pageSize);//向上取整
//System.out.println(totalPage);
pageBean.setTotalPage(totalPage);
return pageBean;
}
}
- dao层操作
public class ScoreDao {
QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
public List<Score> selectAll(int pageNo, int pageSize) throws SQLException {
List<Score> lsit = queryRunner.query("select * from score limit ?,?", new BeanListHandler<Score>(Score.class),
(pageNo - 1) * pageSize, pageSize);
return lsit;
}
//查询总条数
public int selectCount() throws SQLException {
Long l = (Long)queryRunner.query("select count(*) from score", new ScalarHandler());
return l.intValue();
}
}
- bean类的代码
public class PageBean<T> {
private int pageNo; //页码
private int pageSize; //每页显示条数
private int totalPage; //总页数
private int totalCount;//总条数
private List<T> content;//当前页显示的数据
public int getPageNo() {
return pageNo;
}
public void setPageNo(int pageNo) {
this.pageNo = pageNo;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
public List<T> getContent() {
return content;
}
public void setContent(List<T> content) {
this.content = content;
}
}
目录结构
实现效果