First look at the paging effect as follows:
1. To realize paging, you need to do some preparatory work first, download the following front-end page reference files, generally available on the official website or github.
1. bootstrap.min.css；
2. bootstrap.min.js；
3. handlebars-v4.1.1.js
4. bootstrap-paginator.min.js
2. Back-end code.
1. The back-end paging uses the paging done by PageHelper, and POM references need to be added.
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
2. At this point, if you need to make the paging plug-in work, you also need to add configuration in the application.properties file:
#pagehelper分页插件配置
pagehelper.helperDialect=oracle
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
3. The following is the method of using paging when querying (using the static method PageHelper, passing in the page number and the number of rows per page):
@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;
}
Third, the front-end code.
1. Using the front-end paging plug-in pageinator, first define a DIV on the page as the page number area.
<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>
Among them, pageindexdiv is the page number area.
2. For the method of page area rendering, see the following 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);
}
Among them, currentPage-->current page number; totalPages-->total number of pages; these two parameters, using the background PageHelper plug-in, will both return.
In addition, you need to define the processing logic for each button of the front-end page number control.
Here, the functuion in pageUrl is for this purpose. When the showPageIndex method is called, the function corresponding to pageUrl will be executed cyclically, rendering the processing logic of each page button. Here, we deal with it as calling a js method ajaxGetPage and passing in the page number.
3. Get paging data through ajax.
Here, we use handlebars and first define a template.
<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>
Then, after ajax retrieves the data, fill in the value in the template.
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){
}
});
}
At this point, a simple paging function is ready.