如果列表数据过多，用户肯定无法直接看完所有数据。分页，是一种将所有数据分段展示给用户的技术。
一、假分页
后端一次把所有的数据从数据库中查询出来，然后全部输回前端，前端通过js代码进行分页显示。访问一次数据库，但由于选择的数据量比较大，所以第一次花费时间比较长，但之后每一页的显示都是直接、快速的，避免对数据库的多次访问。
- 优点：换页的时候，不需要在次查询，只需要js操作
- 缺点：无法做到实时，单次查询的数据量依然大。适用于数据量不是很大，而且没有实时要求的查询。
现在我们在浏览器页面中通过ajax请求方式，向servlet请求数据。通过hibernate来实现dao层的数据获取，把list集合的数据拼接成带有json数据格式的字符串，通过传输流，传回到浏览器页面，然后通过json工具把字符串转成json对象。通过JavaScript和jQuery操作，分页显示数据。
关键点：在获取 页面上 实现“分页”。
1、数据实体类
package org.ssh1.entity;
import java.util.Date;
/**
* 用来封装数据的实体类
*
* @author lee
*
*/
public class User {
private int id;
private String name;
private Date birthday;
public User() {};
public int getId(){return id;}
public void setId(int id) {this.id = id;}
public String getName() {return name;}
public void setName(String name) {this.name = name;}
public Date getBirthday() {return birthday;}
public void setBirthday(Date birthday) {this.birthday = birthday;}
}package org.ssh1.entity;
/**
* 用来封装 分页信息的实体类
*
* @author lee
*
*/
public class Page {
//总数据行数
private int sum;
//一页的数据行数
private int pageSize;
//总页数
private int pages;
//当前所在页
private int currentPage;
public int getSum() {
return sum;
}
//方式一页的总行数比总数据行数还要大时，做出的处理
public void setSum(int sum) {
this.sum = sum;
if(sum==0) {
setPages(1);
}else {
setPages((sum%pageSize==0)?sum/pageSize:(sum/pageSize+1));
}
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getPages() {
return pages;
}
public void setPages(int pages) {
this.pages = pages;
}
public int getCurrentPage() {
return currentPage;
}
//防止当前页，大于总页数
public void setCurrentPage(int currentPage) {
if(currentPage>pages) {
this.currentPage=pages;
}else {
this.currentPage = currentPage;
}
}
}
2、使用hibernate来做底层的数据处理
①dao层接口设计
package org.ssh1.dao;
import java.util.List;
import org.ssh1.entity.User;
public interface IUserDao {
public List<User> getAll();
public List<User> getAll(int firstResult,int maxResults);
public Long getCount();
}
②dao层接口实现类
package org.ssh1.dao.impl;
import java.util.List;
import org.hibernate.Session;
import org.hibernate.query.Query;
import org.ssh1.dao.IUserDao;
import org.ssh1.entity.User;
import org.ssh1.utils.HibernateUtils;
public class UserDao implements IUserDao{
@Override
public List<User> getAll() {
Session session = HibernateUtils.getCurrentSession();
//查询所有user表的数据
@SuppressWarnings("unchecked")
Query<User> q = session.createQuery("from User");
List<User> list = q.list();
return list;
}
@Override
public List<User> getAll(int firstResult, int maxResults) {
Session session = HibernateUtils.getCurrentSession();
//查询指定 行数的数据
@SuppressWarnings("unchecked")
Query<User> q = session.createQuery("from User");
q.setFirstResult(firstResult);
q.setMaxResults(maxResults);
List<User> list = q.list();
return list;
}
@Override
public Long getCount() {
Session session = HibernateUtils.getCurrentSession();
//查询数据的总行数
@SuppressWarnings("unchecked")
Query<Long> q = session.createQuery("select count(u.id) from User u");
return q.uniqueResult();
}
}
3、在service层做事务处理
package org.ssh1.service;
import java.util.List;
import org.hibernate.Session;
import org.hibernate.Transaction;
import org.ssh1.dao.IUserDao;
import org.ssh1.dao.impl.UserDao;
import org.ssh1.entity.User;
import org.ssh1.utils.HibernateUtils;
public class UserService {
private static IUserDao dao = new UserDao();
/**
* 获取数据总数
*
* @return count 数据总数
*/
public Long getCount() {
Session session = null;
Transaction trans = null;
Long count = null;
try {
//开启事务
session = HibernateUtils.getCurrentSession();
trans = session.beginTransaction();
//获取数据总数
count = dao.getCount();
trans.commit();
}catch(Exception e) {
//事务回滚
trans.rollback();
throw new RuntimeException(e);
}finally {
session.close();
}
return count;
}
/**
* 获取指定行数的数据
*
* @param firstResult 从第几行开始
* @param maxResults 总行数
* @return
*/
public List<User> getAll(int firstResult, int maxResults){
Session session = null;
Transaction trans = null;
List<User> list = null;
try {
//开启事务
session = HibernateUtils.getCurrentSession();
trans = session.beginTransaction();
//获取指定行数的数据
list = dao.getAll(firstResult, maxResults);
trans.commit();
}catch(Exception e) {
//事务回滚
trans.rollback();
throw new RuntimeException(e);
}finally {
session.close();
}
return list;
}
/**
* 获取所有数据
*
* @return list
*/
public List<User> getAll(){
Session session = null;
Transaction trans = null;
List<User> list = null;
try {
//开启事务处理
session = HibernateUtils.getCurrentSession();
trans = session.beginTransaction();
//获取所有数据
list = dao.getAll();
//提交事务
trans.commit();
}catch(Exception e) {
//事务回滚
trans.rollback();
throw new RuntimeException(e);
}finally {
session.close();
}
return list;
}
}4、在servlet中 处理用户的请求
package org.ssh1.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.ssh1.entity.Page;
import org.ssh1.entity.User;
import org.ssh1.service.UserService;
import org.ssh1.utils.HibernateUtils;
import com.google.gson.Gson;
/**
* Servlet implementation class UserServlet
*/
public class UserServlet extends HttpServlet {
private static UserService service = new UserService();
private static Page page = new Page();
private static Gson gson = new Gson();
static {
//设置一页的数据行数
page.setPageSize(5);
//先初试化hibernate
HibernateUtils.getCurrentSession();
}
/*
* 调用service 获取数据的总行数，使用json的数据格式返回给浏览器
*
* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
protected void doGet(HttpServletRequest res, HttpServletResponse resp) throws ServletException, IOException {
//获取当前页
int CurrentPage = Integer.parseInt(res.getParameter("currentPage"));
page.setCurrentPage(CurrentPage);
//设置总页数
page.setSum(service.getCount().intValue());
//将page对象，转化为json数据格式
String gsonStr = gson.toJson(page);
//将数据输出给浏览器
PrintWriter pw = resp.getWriter();
pw.write(gsonStr);
pw.close();
}
/*
* 调用service 获取所有数据，使用json的数据格式返回给浏览器
*
* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
protected void doPost(HttpServletRequest res, HttpServletResponse resp) throws ServletException, IOException {
//获取所有数据
List<User> list = service.getAll();
//将list对象，转化为json数据格式
String gsonStr = gson.toJson(list);
//将数据输出给浏览器
PrintWriter pw = resp.getWriter();
pw.write(gsonStr);
pw.close();
}
}5、html页面，js操作分页展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表展示</title>
</head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<body>
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>生日</td>
</tr>
<thead>
<tbody id="tb">
</tbody>
</table>
<nav aria-label="Page navigation">
<ul class="pagination">
<li id="pre">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</body>
<script>
//当前页数
var currentPage;
//总数据行数
var sum;
//总页数
var pages;
//一页的数据行数
var pageSize;
//服务器返回数据
var list;
$(function(){
/*
向服务发送请求，获取总页数pages
并设置总页数
*/
$.ajax({
url:"userServlet",
type:"get",
data:"currentPage=1",
dataType:"json",
success:function(data){
//alert(data.pages);
for(var i=data.pages;i>0;i--){
//根据总页数添加分页按钮，并添加点击事件
$("#pre").after("<li><a id='li"+i+"' onclick='display("+(i-1)+")' href='#'>"+i+"</a></li>");
}
//赋值
currentPage = data.currentPage;
sum = data.sum;
pages = data.pages;
pageSize = data.pageSize;
}
})
//想服务器请求 所有数据
$.ajax({
url:"userServlet",
type:"post",
dataType:"json",
success:function(data){
list = data;
//展示第一页数据
display(0);
}
})
})
//根据传入的参数，显示第几页
function display(current){
//
$("#tb").empty();
//alert(current+" "+(pages))
//判断当前页是否为最后一页
if(current == (pages-1)){
//插入数据
for(var i=(current*pageSize);i<sum;i++){
$("#tb").append("<tr><td>"+list[i].id+"</td><td>"+list[i].name+"</td><td>"+list[i].birthday+"</td></tr>")
}
}else{
//插入数据
for(var i=(current*pageSize);i<((current+1)*pageSize);i++){
$("#tb").append("<tr><td>"+list[i].id+"</td><td>"+list[i].name+"</td><td>"+list[i].birthday+"</td></tr>")
}
}
}
</script>
</html>假分页主要在于，一次性获取了所有的数据，然后通过js操作来分页展示。换页时，不需要再次向服务器发出请求。
因此也失去了是实时性，就是当数据发生改变，无法及时地展示出来。需要再次向服务器请求数据。
当数据量非常庞大时，一次性提取出所有数据就不提合理了，不能再使用假分页技术了 。
二、真分页
把表的数据分批从数据库中取出，然后传回前端。优点是数据量小，缺点是访问数据库频繁。实时，效率高，一般来说加以用这个方案。
我们在浏览器页面中通过ajax请求方式，向servlet请求 部分的数据（指定 开始行数，获取行数） 。通过hibernate来实现dao层数据获取（获取部分的数据）。把list集合的数据拼接成带有json数据格式的字符串，通过传输流，传回到浏览器页面，由浏览器展示给用户。
关键点：在获取 数据上 实现“分页”，即是只取部分数据。
dao层和service层上面都有，就不再重复。
1、在servlet中 处理用户的请求
package org.ssh1.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
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 org.ssh1.entity.Page;
import org.ssh1.entity.User;
import org.ssh1.service.UserService;
import org.ssh1.utils.HibernateUtils;
import com.google.gson.Gson;
/**
* Servlet implementation class PageSerlvet
*/
@WebServlet("/PageSerlvet")
public class PageSerlvet extends HttpServlet {
private static final long serialVersionUID = 1L;
private static UserService service = new UserService();
private static Page page = new Page();
private static Gson gson = new Gson();
static {
//设置一页的数据行数
page.setPageSize(5);
//默认显示第一页的数据
page.setCurrentPage(1);
//先初试化hibernate
HibernateUtils.getCurrentSession();
}
/*
* 调用service 获取数据的总行数，使用json的数据格式返回给浏览器
*
* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
protected void doGet(HttpServletRequest res, HttpServletResponse resp) throws ServletException, IOException {
//设置总页数
page.setSum(service.getCount().intValue());
//将page对象，转化为json数据格式
String gsonStr = gson.toJson(page);
//将数据输出给浏览器
PrintWriter pw = resp.getWriter();
pw.write(gsonStr);
pw.close();
}
/*
* 调用service 获取部分数据，使用json的数据格式返回给浏览器
*
* (non-Javadoc)
* @see javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
*/
protected void doPost(HttpServletRequest res, HttpServletResponse resp) throws ServletException, IOException {
int firstResult = Integer.parseInt(res.getParameter("firstResult"));
int maxResults = Integer.parseInt(res.getParameter("maxResults"));
//System.out.println(firstResult+" "+maxResults);
//获取所有数据
List<User> list = service.getAll(firstResult, maxResults);
//将list对象，转化为json数据格式
String gsonStr = gson.toJson(list);
//将数据输出给浏览器
PrintWriter pw = resp.getWriter();
pw.write(gsonStr);
pw.close();
}
}2、html页面，请求部分数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表展示</title>
</head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<body>
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>生日</td>
</tr>
<thead>
<tbody id="tb">
</tbody>
</table>
<nav aria-label="Page navigation">
<ul class="pagination" >
<li >
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li id="nex">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</body>
<script>
//当前页数
var currentPage;
//总数据行数
var sum;
//总页数
var pages;
//一页的数据行数
var pageSize;
//初始化页面
$(function(){
//默认展示第一页
currentPage=1;
getCount();
})
/*
向服务发送请求，获取总页数pages
并设置总页数
*/
function getCount(){
$.ajax({
url:"PageSerlvet",
type:"get",
dataType:"json",
success:function(data){
//alert(data.pages);
//移除所有分页按钮
for(var i=0;i<data.pages;i++){
$("#li"+i).remove();
}
for(var i=0;i<data.pages;i++){
//根据总页数添加分页按钮，并添加点击事件
$("#nex").before("<li id='li"+i+"'><a onclick='display("+(i+1)+")' href='#'>"+(i+1)+"</a></li>");
}
//赋值
sum = data.sum;
pages = data.pages;
pageSize = data.pageSize;
getData();
}
})
}
//根据传入的参数，显示第几页
function getData(){
//判断当前页是否为最后一页，调整获取的数据行数
var max;
if(currentPage==pages){
max = sum - (currentPage-1)*pageSize;
}else{
max = pageSize;
}
//alert(max+" "+(currentPage-1)*pageSize)
//想服务器请求 所有数据
$.ajax({
url:"PageSerlvet",
type:"post",
data:{
"firstResult":(currentPage-1)*pageSize,
"maxResults":max
},
dataType:"json",
success:function(data){
//alert(data.length);
//alert(data[0].id+" "+data[data.length-1].id);
$("#tb").empty();
for(var i=0;i<data.length;i++){
$("#tb").append("<tr><td>"+data[i].id+"</td><td>"+data[i].name+"</td><td>"+data[i].birthday+"</td></tr>")
}
}
})
}
//当点击分页时，设置currentPage为当前页数
function display(current){
currentPage = current;
getCount();
}
</script>
</html>
755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
