后台管理实现分页显示----核心分页对象

需求

实现简单的分页管理数据的页面功能,类似下面
后台管理实现分页显示----核心分页对象_第1张图片
采用物理分页方式:即每打开一页都交互从后台取回需要页数据

同时也有逻辑分页方式,就是一次交互,后台把所有的所有页面数据一起发过来,前端自己分页显示。虽交互简单,但也不没了实时性,不提倡。


解决方法

物理分页,交互核心对象Page

package xyz.cglzwz.bean;

import java.util.List;

/**
 * 分页对象
 * 用于封装当前页的分页相关的所有数据
 *
 * @author chgl16
 * @date 2018.10.8
 */

public class Page {
    /** 当前页的数据 */
    private List<Transaction> dataArray;
    /** 首页 */
    private Integer firstPage;
    /** 上一页 */
    private Integer prePage;
    /** 下一页 */
    private Integer nextPage;
    /** 末页、总页数 */
    private Integer totalPage;
    /** 当前页 */
    private Integer currentPage;
    /** 总记录数 */
    private Integer totalCount;
    /** 每页显示的记录数 */
    private Integer pageSize;

    public List<Transaction> getDataArray() {
        return dataArray;
    }

    public void setDataArray(List<Transaction> dataArray) {
        this.dataArray = dataArray;
    }

    public Integer getFirstPage() {
        // 首页直接返回1
        return 1;
    }

    public void setFirstPage(Integer firstPage) {
        this.firstPage = firstPage;
    }

    /**
     * 计算上一页
     *
     * @return prePage
     */
    public Integer getPrePage() {
        return this.getCurrentPage() == this.getFirstPage() ? 1 : this.getCurrentPage() - 1;
    }

    public void setPrePage(Integer prePage) {
        this.prePage = prePage;
    }

    /**
     * 计算下一页
     *
     * @return nextPage
     */
    public Integer getNextPage() {
        return this.getCurrentPage() == this.getTotalPage() ? this.getTotalPage() : this.getCurrentPage() + 1;
    }

    public void setNextPage(Integer nextPage) {
        this.nextPage = nextPage;
    }

    /**
     * 通过记录数计算总页数
     *
     * @return totalPage
     */
    public Integer getTotalPage() {
        return this.getTotalCount() % this.getPageSize()==0 ?
                   this.getTotalCount() / this.getPageSize() :
                   this.getTotalCount() / this.getPageSize() + 1;
    }

    public void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }

    public Integer getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(Integer currentPage) {
        this.currentPage = currentPage;
    }

    public Integer getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(Integer totalCount) {
        this.totalCount = totalCount;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }
}

业务层只需要根据页面大小pageSize和页码currentPage的需求,封装返回Page对象即可

package xyz.cglzwz.service;

import xyz.cglzwz.bean.Page;

/**
 * 获取返回需求页页面数据业务
 *
 * @author chgl16
 * @date 2018.10.12
 */

public interface PageService {
    /**
     * 通过传递当前页码和页面大小
     * 来获取当前页的数据,封装在Page返回
     *
     * @param currentPage
     * @param pageSize
     * @return Page
     */
    public Page getPage(Integer currentPage, Integer pageSize) throws Exception;
}

ajax交互请求(传递页面大小和请求页码)

$.ajax ({
        type: "POST",
        url: "getdata",
        dataType: "json",
        data: {
            "currentPage":currentPage,  
            "pageSize":pageSize,
        },
        success:function(data) {
            console.info("获取数据成功");
            // 封装page对象
            setPage(data);
            // 动态填充当前页
            fillPage();
            // 页面显示记录数和页数信息
            showInfomation();
            // 刷新显示脚步页码布局
            paginationFresh();
        },
        error:function(data) {
            console.error("获取数据失败");
        }
    });

交互json

{
    "currentPage":1,
    "dataArray":[
         {"address":"","amount":0,"flag":false,"id":1,"log":"","time":"","today":"","yesterday":""},
         {"address":"","amount":0,"flag":false,"id":8888,"log":"","time":"","today":"","yesterday":""},
         {"address":"","amount":0,"flag":false,"id":8889,"log":"","time":"","today":"","yesterday":""},
         {"address":"","amount":0,"flag":false,"id":8890,"log":"","time":"","today":"","yesterday":""}
    ],
    "firstPage":1,
    "nextPage":1,
    "pageSize":5,
    "prePage":1,
    "totalCount":4,
    "totalPage":1
}

你可能感兴趣的:(Java,开发,SSM,框架开发,前端开发,Spring)