Java基于GirdManager插件实现分页技术

Java基于GirdManager插件实现分页技术

1. GirdManager介绍
GirdManager是一款快速、灵活的对Table标签进行实例化，让Table标签充满活力的插件。起始于15年末的jQuery 插件 ListManager。在2.0版本时更名为GridManager, 并在 v2.1 中脱离对jQuery的依赖；采用原生JS进行编码，因此无依赖的集成至任何框架。并发布了相应的Angular-1.x、Vue 、React版本。GridManager是开源免费的软件（MIT 许可证），同时在github及开源中国(oschina)上开源（免费）。在维护现有功能的同时，新功能也在持续开发。
官网地址：https://gridmanager.lovejavascript.com/
2. 配置GirdManager
下载好后，将资源放在自己的静态资源文件类，再引入css和js文件。

<link rel="stylesheet" type="text/css"
href="/js/jquery/plugin/GridManager/css/gm.css"/>
<script type="text/javascript"
src="/js/jquery/plugin/GridManager/js/gm.js"></script>

再在 html页面加上相应的table

<table grid-manager="demo-baseCode"></table>

再在js中配置文件

var table =  document.querySelector('#table-demo-baseCode').GM({
gridManagerName: 'demo-baseCode',//gridManager的名字
ajaxData: '/system/article/datagrid',//提交到后台的地址
supportAjaxPage: true, //使用ajax请求
currentPageKey:"currentPage",//指定传递的当前页属性 默认是cPage
pageSizeKey:"pageSize",//指定传递的每页条数  默认是pSize
pageSize:10, //初次进行页面的每页条数(不写默认20)
sizeData:[5,10,20,50,100], //配置每页显示条数的下拉项，数组元素仅允许为正整数。
height:'100%',
columnData: [
//以下是根据自己的实体类添加的key
   {
       key: 'title',//比如这里的key就是实体类中的title，下面其他key同样如此
       text: '名称',
       align: 'center'
   }, {
       key: 'clickCount',
       text: '点击次数',
       align: 'center'
   }, {
       key: 'enable',
       text: '启用状态',
       align: 'center',
       //自定义显示格式
       template: function(cell, row, index, key){
          return cell?"<span style='color: green'>启</span>":"<span style='color: red'>禁用</span>"
        }
    }, {
        key: 'createDate',
        text: '创建时间',
        align: 'center'
    },{
         key:'type',
         text:'文章类型',
         align: 'center',
         template: function(cell, row, index, key){
              return cell.name;
         }
     },{
         key: 'id',
         text: '操作',
         align: 'center',
         template: function(v, r){
               return "<a style='color:#337ab7;'
href='javascript:;' >删除</a>|" +
                       "<a style='color:#337ab7;' href='javascript:;' >修改</a>";
               }
         }
    ]
});

3.后台的配置
给后台传送过去的参数首要有currentPageKey:“currentPage”,pageSizeKey:“pageSize”,所以我们可以先给他封装个实体

public class BaseQuery {
	private Integer currentPage = 1;
	private Integer pageSize = 10;

	/**
	 * 查询开始条数
	 * @return
	 */
	public Integer getBegin(){
		return (this.currentPage-1)*this.pageSize;
	}
	public Integer getCurrentPage() {
		return currentPage;
	}
	public void setCurrentPage(Integer currentPage) {
		this.currentPage = currentPage;
	}
	public Integer getPageSize() {
		return pageSize;
	}
	public void setPageSize(Integer pageSize) {
		this.pageSize = pageSize;
	}
	
}

查询的的实体类，前台是按照{总条数，所有数据}的方式显示的，所以我们可以再按照其条件封装实体类。

/**
 * 该类是为了方便前台取值
 * @author Administrator
 *
 * @param <T>
 */
public class PageList<T> {
    //总条数
    private Long total = 0L;
    //查询出来的列表
    private List<T> result = new ArrayList<T>();

    public PageList() {
    }
    public PageList( Long total, List<T> result) {
    	this.total = total;
    	this.result = result;
    }
    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List<T> getResult() {
        return result;
    }
    public void setResult(List<T> result) {
        this.result = result;
    }

}

接下来就是controller层对数据的查询操作

/**
* 获取文章列表
* @return
*/
@RequestMapping("/datagrid")
@ResponseBody
public Map<String,Object> datagrid(BaseQuery query){
 PageList<Article> pageList = articleService.selectPageByQuery(query);
 Map<String, Object> map = new HashMap<>();
 map.put("data", pageList.getResult());//总条数
 map.put("totals", pageList.getTotal());//所有的数据
 return map;
}

在Service中实现关键的核心代码

接口类：

 PageList<Article> selectPageByQuery(BaseQuery query);

实现类：

@Override
public PageList<Article> selectPageByQuery(ArticleQuery query) {
List<Article> result = articleMapper.selectListByQuery(query);
for (Article article : result){
article.setType(articleTypeMapper.selectById(article.getTypeId()));
}
Long count = articleMapper.selectCountByQuery(query);
return new PageList<Article>(count,result);
}

4.效果