分页功能前后端代码实现

Posted ryq1121

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了分页功能前后端代码实现相关的知识,希望对你有一定的参考价值。

分页功能前后端代码实现

前端jsp代码:

  

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>

<meta name="decorator" content="default"/>
<script type="text/javascript"> //这里是pagination分页插件的jsp代码,传入要跳转的页码和页大小
        function page(n, s) {
$("#pageNo").val(n);
$("#pageSize").val(s);
$("#searchForm").submit(); //提交searchForm表单,触发跳转
return false;          //不接收返回值
}
</script>
</head>
<body>

<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/checkPic/list">图片审核</a></li>
</ul>
<form:form id="searchForm" modelAttribute="pictureDTO" action="${ctx}/checkPic/" method="post" class="breadcrumb form-search"> // searchForm表单,要设置modelAttribute,然后提交的url

<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/> //提交跳转的页码
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>

<sys:message content="${message}"/>

<table id="contentTable"
class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>任务ID</th>
<th>图片</th>
<th>上传日期</th>
<th>操作</th>
</thead>

<tbody>
<c:forEach items="${page.list}" var="pic">
<tr>
<td>${pic.missionId}</td>
<td><img alt="加载失败" src="${pic.pic}" width="100px" height="100px"></td>
<td><fmt:formatDate value="${pic.createDate}" type="both"/></td>
<td>
<a href="${ctx}/checkPic/deletePictureByPicAddress?picAddress=${pic.pic}"
onclick="return confirmx(‘确认要删除吗?‘, this.href)">删除</a></td>
</tr>
</c:forEach>
</tbody>

</table>
<div class="pagination">${page}</div> //引入分页插件
</form:form>
</body>
</html>




后端代码:

      
package com.thinkgem.jeesite.modules.sys.web;

import com.thinkgem.jeesite.common.persistence.Page;
import com.thinkgem.jeesite.common.utils.StringUtils;
import com.thinkgem.jeesite.common.web.BaseController;
import com.thinkgem.jeesite.modules.api.service.MissionService;
import com.thinkgem.jeesite.modules.sys.entity.PictureDTO;
import com.thinkgem.jeesite.modules.sys.service.PictureDTOService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Date:2020/6/4
* Author: RuanYongQi
*/
@Controller
@RequestMapping(value = "${adminPath}/checkPic")
public class PicController extends BaseController {
@Autowired
private PictureDTOService pictureDTOService;

@Autowired
private MissionService missionService;

@ModelAttribute //对应前端jsp中的modelAttribute属性
public PictureDTO get(@RequestParam(required=false) String id) {
if (StringUtils.isNotBlank(id)){
return pictureDTOService.get(id);
}else{
return new PictureDTO();
}
}

/**
* 图片审核接口
*/
@RequestMapping(value = {"/list", ""})
public String checkPicture(PictureDTO pictureDTO, HttpServletRequest request, HttpServletResponse response,Model model) {
Page<PictureDTO> page = pictureDTOService.findPicPage(new Page<PictureDTO>(request,response),pictureDTO);
model.addAttribute("page", page);
return "modules/sys/picList";
}

@RequestMapping(value = "/deletePictureByPicAddress")
public String deletePictureByPicAddress(@RequestParam String picAddress) {
missionService.deletePic(picAddress);
return "redirect:" + adminPath + "/checkPic/list?repage=" + Math.random(); //repage:用于记录当前的页码,删除后重定向到当前页码
}


}


这里没有放上page类,pictureDTO类等相关的类
如果没设置form表单里面的hidden pageNo属性,点击下一页只会一直刷出第一页
如果没设置form表单则分页插件会失效

 

以上是关于分页功能前后端代码实现的主要内容,如果未能解决你的问题,请参考以下文章

Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十五(实现商品页面搜索功能,以及分页功能)

django功能八

django功能八

Django 分页等拆分功能-前后端分离

自己设计的网站,如何实现分页功能?(详细代码+注释)

Vue+SpringBoot 前后端分离实战(mybatisplus多表分页查询+博客显示)