实现百度搜索使用的前五后四原则,效果如下。

下面贴出代码,复制到前端即可,只需要域中放置page对象就可以。(springdatajpa自带的page 注意:第一页是按0开始算的)

<div class="page">

    <ul class="pagination">

        <!--上一页数-->

        <li  class="page-item" th:if="${page.pageable.getPageNumber() != 0}">

            <a th:onclick="pageRequest([[${page.pageable.getPageNumber()-1}]])"     class="page-link"

               data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">

                <span aria-hidden="true">«</span>

            </a>

        </li>

        <li class="page-item">

            <a th:onclick="pageRequest(0)" class="page-link" >首页</a>

        </li>

        <!--前五后四分页实现-->

        <!--总页数<10-->

        <li th:if="${page.totalPages lt 11}" class="page-item" data-th-each="i : ${#numbers.sequence(0, page.totalPages)}"

            data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >

            <a class="page-link" th:onclick="pageRequest([[${i}]])">

                <span data-th-text="${i+1}"></span>

            </a>

        </li>

        <!--总页数>10-->

        <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() lt 5}" class="page-item" data-th-each="i : ${#numbers.sequence(0, 9)}"

            data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >

            <a class="page-link" th:onclick="pageRequest([[${i}]])">

                <span data-th-text="${i+1}"></span>

            </a>

        </li>

        <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.totalPages lt page.pageable.getPageNumber()+5  }"

            class="page-item" data-th-each="i : ${#numbers.sequence(page.totalPages-10, page.totalPages-1)}"

            data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >

            <a class="page-link" th:onclick="pageRequest([[${i}]])">

                <span data-th-text="${i+1}"></span>

            </a>

        </li>

        <li th:if="${page.totalPages gt 10 && page.pageable.getPageNumber() gt 4 && page.pageable.getPageNumber()+4 lt page.totalPages}"

            class="page-item" data-th-each="i : ${#numbers.sequence(page.pageable.getPageNumber()-5, page.pageable.getPageNumber()+4)}"

            data-th-classappend="${(page.number ) eq i} ? 'active' : ''" >

            <a class="page-link" th:onclick="pageRequest([[${i}]])">

                <span data-th-text="${i+1}"></span>

            </a>

        </li>

        <!--尾页-->

        <li class="page-item">

            <a th:onclick="pageRequest([[${page.getTotalPages() - 1}]])" class="page-link" >尾页</a>

        </li>

        <!--下一页-->

        <li  class="page-item"  th:if="${page.pageable.pageNumber} != ${page.totalPages}-1">

            <a class="page-link" th:onclick="pageRequest([[${page.pageable.pageNumber}+1]])">

                »

            </a>

        </li>

    </ul>

</div>

基于springboot+thymeleaf+springDataJpa自带的分页插件实现完整的动态分页的更多相关文章

  1. 【spring boot】14.spring boot集成mybatis,注解方式OR映射文件方式AND pagehelper分页插件【Mybatis】pagehelper分页插件分页查询无效解决方法

    spring boot集成mybatis,集成使用mybatis拖沓了好久,今天终于可以补起来了. 本篇源码中,同时使用了Spring data JPA 和 Mybatis两种方式. 在使用的过程中一 ...

  2. 基于jquery 的分页插件,前端实现假分页效果

    上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...

  3. 使用jQuery的分页插件jquery.pagination.js进行分页

    1,需要用到jquery.pagination.js和pagination.css https://pan.baidu.com/s/1G3PLQSRGjvLxl2ryqpV76w https://pa ...

  4. springboot+thymeleaf+pageHelper带条件分页查询

    html层 <div> <a class="num"><b th:text="'共 '+ ${result.resultMap['pages ...

  5. SpringBoot系列——Spring-Data-JPA(究极进化版) 自动生成单表基础增、删、改、查接口

    前言 我们在之前的实现了springboot与data-jpa的增.删.改.查简单使用(请戳:SpringBoot系列——Spring-Data-JPA),并实现了升级版(请戳:SpringBoot系 ...

  6. Springboot集成mybatis通用Mapper与分页插件PageHelper

    插件介绍 通用 Mapper 是一个可以实现任意 MyBatis 通用方法的框架,项目提供了常规的增删改查操作以及 Example 相关的单表操作.通用 Mapper 是为了解决 MyBatis 使用 ...

  7. MyBatis Generator实现MySQL分页插件

    MyBatis Generator是一个非常方便的代码生成工具,它能够根据表结构生成CRUD代码,可以满足大部分需求.但是唯一让人不爽的是,生成的代码中的数据库查询没有分页功能.本文介绍如何让MyBa ...

  8. 【超酷超实用】CSS3可滑动跳转的分页插件制作教程

    原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...

  9. jq分页插件,支持动态,静态分页的插件,简单易用。

    工作中经常要用到分页功能.为了方便封装了一个比较通用的分页插件开源出来了,简单易用. 官网:https://cwlch.github.io/Ch_Paging 下载地址:https://github. ...

随机推荐

  1. zoj 1633 Big String

    Big String Time Limit: 2 Seconds Memory Limit: 65536 KB We will construct an infinitely long string ...

  2. gradle 生成 pom,引用mybatis-plus源代码到自己的工程中

    一 前情概要 自己的maven工程使用mybatis-plus,然后想用热部署加载mapping文件.经过各种探索之后实现了,但是修改了xml文件后,就不断在控制台提示“mapper xxx is i ...

  3. H3C 传递信息

  4. Vue的第一个实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Python--day37--进程锁

    进程锁的示意图: 锁.py: #锁 #火车票 import json import time from multiprocessing import Process from multiprocess ...

  6. 1626 - Brackets sequence——[动态规划]

    Let us define a regular brackets sequence in the following way: Empty sequence is a regular sequence ...

  7. javaScript通过URL获取参数

    // 函数方法 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=( ...

  8. 2019-11-17-dotnet-core-使用-GBK-编码

    title author date CreateTime categories dotnet core 使用 GBK 编码 lindexi 2019-11-17 16:36:27 +0800 2019 ...

  9. 【31.42%】【CF 714A】Meeting of Old Friends

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  10. excel转换成实体

    package com.cinc.ecmp.utils; import java.io.IOException; import java.io.InputStream; import java.lan ...