分页技术

如果列表数据过多,用户肯定无法直接看完所有数据。分页,是一种将所有数据分段展示给用户的技术。




一、假分页

后端一次把所有的数据从数据库中查询出来,然后全部输回前端,前端通过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 getAll();
    public List 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 getAll() {
        Session session = HibernateUtils.getCurrentSession();

        //查询所有user表的数据
        @SuppressWarnings("unchecked")
        Query q = session.createQuery("from User");
        List list = q.list();

        return list;
    }

    @Override
    public List getAll(int firstResult, int maxResults) {
        Session session = HibernateUtils.getCurrentSession();

        //查询指定 行数的数据
        @SuppressWarnings("unchecked")
        Query q = session.createQuery("from User");
        q.setFirstResult(firstResult);
        q.setMaxResults(maxResults);

        List list = q.list();
        return list;
    }

    @Override
    public Long getCount() {
        Session session = HibernateUtils.getCurrentSession();

        //查询数据的总行数
        @SuppressWarnings("unchecked")
        Query 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 getAll(int firstResult, int maxResults){
        Session session = null;
        Transaction trans = null;
        List 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 getAll(){
        Session session = null;
        Transaction trans = null;
        List 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 list = service.getAll();

        //将list对象,转化为json数据格式
        String gsonStr  = gson.toJson(list);

        //将数据输出给浏览器
        PrintWriter pw = resp.getWriter();
        pw.write(gsonStr);
        pw.close();
    }

}


5、html页面,js操作分页展示


<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>IDtd>
                <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("
  • "+i+"
  • "
    ); } //赋值 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"#tb"
    ).append(""+list[i].id+""+list[i].name+""+list[i].birthday+"") } }else{ //插入数据 for(var i=(current*pageSize);i<((current+1)*pageSize);i++){ $("#tb").append(""+list[i].id+""+list[i].name+""+list[i].birthday+"") } } } 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 list = service.getAll(firstResult, maxResults);
    
            //将list对象,转化为json数据格式
            String gsonStr  = gson.toJson(list);
    
            //将数据输出给浏览器
            PrintWriter pw = resp.getWriter();
            pw.write(gsonStr);
            pw.close();
        }
    
    }


    2、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>IDtd>
                    <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"#li"+i).remove();
                    }
    
                    for(var i=0;i//根据总页数添加分页按钮,并添加点击事件
                        $("#nex").before("
  • "+(i+1)+"
  • "
    ); } //赋值 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"#tb").append(""+data[i].id+""+data[i].name+""+data[i].birthday+"") } } }) } //当点击分页时,设置currentPage为当前页数 function display(current){ currentPage = current; getCount(); } script> html>

    你可能感兴趣的:(分页技术)