JavaWeb前端分页显示方法

逃离我推掉我的手 2022-09-21 15:29 208阅读 0赞

在前端中我们总会遇到显示数据的问题  
  
\- 正常情况分页显示是必须的，这个时候我们不能仅仅在前端进行分页，在前端其实做起分页是很困难的，着就要求我们在后台拿数据的时候就要把分页数据准备好，在前端我们只需要将这些后台准备好的数据拿过来就行了  
\- 在后台我们通常是实现准备好一个分页工具类Pagination![这里写图片描述][20160624142426527]这里是分页显示的基本数据  
\- 在前台中我们只需要将pagination中构造函数中所需要的参数传过来就可以了。然后在向数据查询数据的时候将pagination中的限定条件传过去查询的数据就不是所有的数据而是前端所请求的分页数据了理论就是这样了下面看看我是如何实现的  
\- \`@RequestMapping(value = \{ “/assistantWork.action” \})  
public String assistantWork(HttpSession session, Integer page, QueryVo vo,  
Model model) \{  
User user = (User) session.getAttribute(“user”);  
if (vo == null) \{  
vo = new QueryVo();  
\}  
// 当前页  
if (page == null) \{  
page = 1;  
\}  
vo.setUserId(user.getId());  
// 查询总记录  
Integer countrecord = workSerivce.selectAllWorksByConditionCount(vo);  
List clazzs = workSerivce.selectClazzsByUserId(user.getId());  
model.addAttribute(“clazzs”, clazzs);  
if(countrecord!=0)\{  
// 分页对象  
Pagination pagination = new Pagination(page, countrecord);

// 设置分页的查询条件
            vo.setStartSize(pagination.getStartsize());
            vo.setPageSize(pagination.PAGESIZE);
            // 拿到改助教管理下的所有班级的作业
            // List<Work> works = workSerivce.selectAllWorks(user.getId());
            List<Work> works = workSerivce.selectWorksByClazzId(vo);
            pagination.setRows(works);
    
            model.addAttribute("pagination", pagination);
            // 条件传过去 回写
            model.addAttribute("vo", vo);
        }else {
            //没有管理的班级
            model.addAttribute("msg", "当前用户没有管理的作业");
        }
        return "/pages/assistant/homework_assistant";
    }` 
    这段代码里面用到其他的mybatis分装类，这里读者请忽视其他的只看我们将的pagination这段就可以了，可以看出我在最后查询的时候是带着pagination条件的，最后拿到的数据就是我们前端需要的![这里写图片描述](https://img-blog.csdn.net/20160624145742854)

*  整个过程就是这样下面我将pagination工具类贴在下面
 *  \`package tm.change.util;

import java.util.List;

/\*\*  
\*  
\* @author redarmy\_chen  
\*  
\* @param  
\*/  
public class Pagination \{

// 分页信息
    private int nowpage;// 当前页
    private int countrecord;// 总记录
    private int countpage;// 总页数
    
    public static final int PAGESIZE = 3;// 每页显示的记录数
    
    private int startpage;// 页面中的起始页
    private int endpage;// 页面中的结束页
    
    private int startsize;
    
    private final int SHOWPAGE = 6;// 页面中显示的总页数 baidu,google显示的总页数是20
    // 在测试我们才用6来测试
    
    private List<T> rows;
    
    private String url;
    
    
    
    public Pagination() {
        super();
        // TODO Auto-generated constructor stub
    }
    
    /** 根据当前页及总记录数来构造分页对象 */
    public Pagination(int nowpage, int countrecord) {
        //获取当前页  //1 2 3
        //判断最小页码
        if(nowpage<=1){
            this.nowpage=1;
        }else{
            this.nowpage = nowpage;
        }
        //总记录数
        this.countrecord = countrecord;
    
        /** 计算总页数 */
        this.countpage = this.countrecord % this.PAGESIZE == 0 ? this.countrecord
                / this.PAGESIZE
                : this.countrecord / this.PAGESIZE + 1;
    
        //判断最大页
        if(this.nowpage>=this.countpage){
            this.nowpage=this.countpage;
        }
    
        //开始的记录数
        this.startsize=(this.nowpage-1)*this.PAGESIZE;
    
        /** 计算startpage与endpage的值 */
    
        /** 总页数数是否小于4 */
        if (this.countpage < (this.SHOWPAGE / 2 + 1)) {
            this.startpage = 1; // 页面中起始页就是1
            this.endpage = this.countpage;// 页面中的最终页就是总页数
        } else {
            /** else中是总页数大于4的情况 */
    
            /** 首先当前页的值是否小于等于4 */
            if (this.nowpage <= (this.SHOWPAGE / 2 + 1)) {
                this.startpage = 1;
                this.endpage = this.nowpage + 2;
                /** 判断页面的最终页是否大于总页数 */
                if (this.endpage >= this.countpage) {
                    this.endpage = this.countpage;
                }
            } else {
                this.startpage = this.nowpage - 3;
                this.endpage = this.nowpage + 2;
    
                if (this.endpage >= this.countpage) {
                    this.endpage = this.countpage;
                    if (this.countpage < this.SHOWPAGE) {
                        this.startpage = 1;
                    } else {
                        this.startpage = this.endpage - 5;
                    }
    
                }
            }
    
        }
    
    }
    
    public int getNowpage() {
        return nowpage;
    }
    
    public void setNowpage(int nowpage) {
        this.nowpage = nowpage;
    }
    
    public int getCountrecord() {
        return countrecord;
    }
    
    public void setCountrecord(int countrecord) {
        this.countrecord = countrecord;
    }
    
    public int getCountpage() {
        return countpage;
    }
    
    public void setCountpage(int countpage) {
        this.countpage = countpage;
    }
    
    public int getStartpage() {
        return startpage;
    }
    
    public void setStartpage(int startpage) {
        this.startpage = startpage;
    }
    
    public int getEndpage() {
        return endpage;
    }
    
    public void setEndpage(int endpage) {
        this.endpage = endpage;
    }
    
    public List<T> getRows() {
        return rows;
    }
    
    public void setRows(List<T> rows) {
        this.rows = rows;
    }
    
    public String getUrl() {
        return url;
    }
    
    public void setUrl(String url) {
        this.url = url;
    }
    
    public int getStartsize() {
        return startsize;
    }
    
    public void setStartsize(int startsize) {
        this.startsize = startsize;
    }

\}\`

[20160624142426527]: /images/20220721/172f6e09506d448ea147376fc3c42ad9.png