分页功能前后端代码实现

分页功能前后端代码实现

前端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表单则分页插件会失效

 

posted on 2020-06-09 11:52  JamesHarden1121  阅读(1059)  评论(0)  编辑  收藏  举报