SpringBoot+PageHelper+BootStrap+Handlerbars+Paginator 前后端分页
先看分页效果如下：
一、实现分页，需要先做一些准备工作，下载如下前端页面引用文件，一般官网或者github上都有。
1. bootstrap.min.css；
2. bootstrap.min.js；
3. handlebars-v4.1.1.js
4. bootstrap-paginator.min.js
二、后端代码。
1. 后端分页使用的是PageHelper做的分页，需要增加POM引用。
com.github.pagehelper
pagehelper-spring-boot-starter
1.2.3
2. 此时，如果需要使得分页插件起作用，还需要在application.properties文件中增加配置：
#pagehelper分页插件配置
pagehelper.helperDialect=oracle
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
3. 下面是使用查询时，使用分页的方法（使用静态方法PageHelper,传入页码和每页行数）：
@PostMapping(value = "/tasklistbytask")
private Object taskListbyList(@RequestBody Map reqMap) {
log.info("----------------tasklistbylist-----------------");
//分页插件
int pageNum = (int) reqMap.get("pageNum");
int pageSize = (int) reqMap.get("pageSize");
PageHelper.startPage(pageNum,pageSize);
List taskList = staticsDao.queryTaskListbyTask();
PageInfo pg = new PageInfo(taskList);
//PageInfo pageTaskList = new PageInfo(taskList);
Map map = new HashMap();
map.put("tasklistbytask",pg);
log.info("tasklistbytask返回："+Utils.toJson(map));
return map;
}
三、前端代码。
1. 使用前端分页插件pageinator，首先在页面上定义一个DIV，作为页码区域。
任务序列表
需求名称
需求部门
起始时间
结束时间
涉及人员
其中，pageindexdiv就是页码区域。
2. 页面区域渲染的方法，参见如下JS。
function showPageIndex(result){
var options = {
currentPage: result.tasklistbytask.pageNum,
totalPages: result.tasklistbytask.pages,
pageUrl: function(type, page, current){
console.log(type+'-'+page+'-'+current);
return "javascript:ajaxGetPage("+page+");";
},
tooltipTitles: function (type, page, current) {
switch (type) {
case "first":
return "首页"; //鼠标悬停时的展示
case "prev":
return "上一月";
case "next":
return "下一页";
case "last":
return "尾页";
case "page":
return page;
}
}
}
$('#pageindexdiv').bootstrapPaginator(options);
}
其中，currentPage-->当前页码；totalPages-->总页数；这两个参数，使用后台的PageHelper插件，都会返回。
另外，需要定义前端页码控件每个按钮的处理逻辑了。
这里，pageUrl中的functuion就是这个作用。showPageIndex方法被调用时，pageUrl对应的函数会被循环执行，渲染每个分页按钮的处理逻辑。这里，我们处理为调用一个js方法ajaxGetPage，并传入页码数。
3. 通过ajax获取分页数据。
这里，我们使用了handlebars，先定义了一个模板。
然后，ajax取回数据后，往模板里填值。
unction ajaxGetPage(pagenumstr){
var theTemplateScript = $("#tablecontent").html();
var theTemplate = Handlebars.compile(theTemplateScript);//handlerbars编译
$.ajax({
url : '/tasklistbytask',
type : 'post',
async:false,
data : '{"pageNum":'+pagenumstr+',"pageSize":10}',
contentType:'application/json',
dataType : 'json',
success: function(result){
$('#tbody').html('');//清空上次内容
var theCompiledHtml = theTemplate(result);//将result数据填充到模板
$('#tbody').append(theCompiledHtml);//显示处理好的内容
showPageIndex(result);
},
fail:function(e){
},
error:function(e){
}
});
}
到这里，一个简单的分页功能就做好了。