先看分页效果如下：
一、实现分页，需要先做一些准备工作，下载如下前端页面引用文件，一般官网或者github上都有。
1. bootstrap.min.css；
2. bootstrap.min.js；
3. handlebars-v4.1.1.js
4. bootstrap-paginator.min.js
二、后端代码。
1. 后端分页使用的是PageHelper做的分页，需要增加POM引用。
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
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<List> pg = new PageInfo<List>(taskList);
//PageInfo<List> pageTaskList = new PageInfo(taskList);
Map map = new HashMap();
map.put("tasklistbytask",pg);
log.info("tasklistbytask返回："+Utils.toJson(map));
return map;
}
三、前端代码。
1. 使用前端分页插件pageinator，首先在页面上定义一个DIV，作为页码区域。
<caption><font size="3px" style="normal"><b>任务序列表</b></font></caption> <!-- 表格的大标题 -->
<caption><hr></caption>
<thead>
<tr>
<th>需求名称</th>
<th>需求部门</th>
<th>起始时间</th>
<th>结束时间</th>
<th>涉及人员</th>
<th></th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</div>
<div class="span12">
<div class="row-fluid">
<div class="span9"></div>
<div id="pageindexdiv" class="span2"></div>
</div>
</div>
</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，先定义了一个模板。
<script id="tablecontent" type="text/x-handlebars-template">
{
{#each tasklistbytask.list}}
<tr class="sucess">
<td>{
{sysTitle}}</td>
<td>{
{department}}</td>
<td>{
{beginDate}}</td>
<td>{
{endDate}}</td>
<td>{
{executor}}</td>
</tr>
{
{/each}}
</script>
然后，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){
}
});
}
到这里，一个简单的分页功能就做好了。