Primero observe el efecto de paginación de la siguiente manera:
1. Para realizar la paginación, primero debe realizar un trabajo preparatorio, descargar los siguientes archivos de referencia de la página de inicio, generalmente disponibles en el sitio web oficial o github.
1. bootstrap.min.css ；
2. bootstrap.min.js ；
3. manillar-v4.1.1.js
4. bootstrap-paginator.min.js
2. Código de back-end.
1. La paginación de back-end usa la paginación realizada por PageHelper, y es necesario agregar referencias POM.
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.3</version>
</dependency>
2. En este punto, si necesita que el complemento de paginación funcione, también debe agregar la configuración en el archivo application.properties:
#pagehelper分页插件配置
pagehelper.helperDialect=oracle
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
3. El siguiente es el método para usar la paginación al realizar consultas (usando el método estático PageHelper, pasando el número de página y el número de filas por página):
@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;
}
En tercer lugar, el código de front-end.
1. Usando el pageinator del plug-in de paginación de front-end, primero defina un DIV en la página como el área de número de página.
<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>
Entre ellos, pageindexdiv es el área del número de página.
2. Para conocer el método de representación del área de la página, consulte el siguiente 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);
}
Entre ellos, currentPage -> número de página actual; totalPages -> número total de páginas; estos dos parámetros, utilizando el complemento PageHelper de fondo, regresarán.
Además, debe definir la lógica de procesamiento para cada botón del control de número de página de la interfaz.
Aquí, la función en pageUrl es para este propósito. Cuando se llama al método showPageIndex, la función correspondiente a pageUrl se ejecutará en un bucle, representando la lógica de procesamiento de cada botón de página. Aquí, lo tratamos como llamar a un método js ajaxGetPage y pasar el número de página.
3. Obtenga datos de paginación a través de ajax.
Aquí, usamos manillares y primero definimos una plantilla.
<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>
Luego, después de que ajax recupere los datos, complete el valor en la plantilla.
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){
}
});
}
En este punto, una función de paginación simple está lista.