thymeleaf+Bootstrap条件分页器实现

这个是没有使用到js的实现方法

先写Controller返回需要的数据,关键是使用了HttpServletRequest对象获取请求地址URI,用于后面thymeleaf里的链接拼接

@Controller
public class IndexController {

    @Autowired
    private HttpServletRequest request; //用于获取请求地址URI

    @Autowired
    private ImageService imageService;
    //访问/或/index路径
    @GetMapping({"/","/index"})
    public String index(Long page,
                        Long limit,
                        String imageLink,
                        Model model){
        Page<Image> pageParam = new Page<>(page == null ? 1 : page, limit == null ? 3 : limit);
        QueryWrapper<Image> wrapper = new QueryWrapper<>();
        String uri = request.getRequestURI() + "?"; //获取不带参数的链接拼接上"?"用于后面传递参数
        if (imageLink!=null){
            //如果带了查询条件imageLink
            wrapper.like("image_link", imageLink);
            //给返回的URI链接拼接上查询条件
            uri = uri + "imageLink=" + imageLink + "&";
        }
        imageService.page(pageParam, wrapper);
        List<Image> records = pageParam.getRecords();
        long current = pageParam.getCurrent(); //获取当前页码
        long pages = pageParam.getPages(); //总页数
        long size = pageParam.getSize();//每页显示的记录数
        boolean hasNext = pageParam.hasNext(); //是否有下一页
        boolean hasPrevious = pageParam.hasPrevious(); //是否有上一页
        model.addAttribute("msg",records);
        model.addAttribute("current",current);
        model.addAttribute("pages",pages);
        model.addAttribute("hasNext",hasNext);
        model.addAttribute("hasPrevious",hasPrevious);
        model.addAttribute("size",size);
        //返回URI链接
        model.addAttribute("uri",uri);
        return "index/index";
    }
}

前端里的分页器代码,使用Bootstrap前端框架样式。

    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <!--上一页:
            显示条件:
            判断是否有上一页
            -->
            <li class="page-item" th:if="${hasPrevious}">
                <a class="page-link" th:href="@{${uri}+'page='+${current - 1}+'&limit='+${size}}" aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
            <!--
            第1页:
            显示条件:当前页不是第1页时显示
            -->
            <li class="page-item"><a class="page-link" th:href="@{${uri}+'page=1&limit='+${size}}" th:if="${current}!=1">1</a></li>
            <!--
            省略符..:
            显示条件:当前页-1是否大于3,想要在当前页码大于4的时候显示
            -->
            <li class="page-item disabled" th:if="${current}-1>3">
                <span class="page-link">..</span>
            </li>
            <!--
            当前页大于等于4时,当前页左边第2个页码,最小为2:
            显示条件:当前页-2是否大于1
            -->
            <li class="page-item"><a class="page-link" th:href="@{${uri}+'page='+${current - 2}+'&limit='+${size}}" th:if="${current}-2>1" th:text="${current}-2"></a></li>
            <!--
            当前页大于等于3时,当前页左边第1个页码,最小为2:
            显示条件:当前页-1是否大于1
            -->
            <li class="page-item"><a class="page-link" th:href="@{${uri}+'page='+${current - 1}+'&limit='+${size}}" th:if="${current}-1>1" th:text="${current}-1"></a></li>
            <!--
            当前页:
            显示条件:总页数大于1时就显示
            -->
            <li class="page-item active"><a class="page-link" href="#" th:if="${pages}>1" th:text="${current}"></a></li>
            <!--
            当前页右边第1个页码,最大为最后一页-1:
            显示条件:当前页+1是否<总页数
            -->
            <li class="page-item"><a class="page-link" th:href="@{${uri}+'page='+${current + 1}+'&limit='+${size}}" th:if="${current}+1<${pages}" th:text="${current}+1"></a></li>
            <!--
            当前页右边第2个页码,最大为最后一页-1:
            显示条件:当前页+2是否<总页数
            -->
            <li class="page-item"><a class="page-link" th:href="@{${uri}+'page='+${current + 2}+'&limit='+${size}}" th:if="${current}+2<${pages}" th:text="${current}+2"></a></li>
            <!--
            省略符..:
            显示条件:总页数-当前页>,想要在最后一页-当前页大于4的时候显示
            -->
            <li class="page-item disabled" th:if="${pages}-${current}>3">
                <span class="page-link">..</span>
            </li>
            <!--
            最后一页:
            显示条件:当前页不是最后一页时显示
            -->
            <li class="page-item"><a class="page-link" th:href="@{${uri}+'page='+${pages}+'&limit='+${size}}" th:if="${pages}>${current}" th:text="${pages}"></a></li>
            <!--下一页:
            显示条件:
            判断是否有下一页
            -->
            <li class="page-item" th:if="${hasNext}">
                <a class="page-link" th:href="@{${uri}+'page='+${current + 1}+'&limit='+${size}}" aria-label="Next">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        </ul>
    </nav>

不同于不带条件的分页http://www.zeromemos.com/index/article/read.html?id=385

不带条件

@{/(page=${current}-1,limit=${size})}

带条件

th:href="@{${uri}+'page='+${current - 1}+'&limit='+${size}}"

带条件的分页器用后端返回的uri直接进行拼接