Bootstrap5.0 完美翻页方案 Spring boot + Thymeleaf 实现

废话不多说，上效果图：

最重要的哈，Show me the code

Controller代码主要是接收翻页参数，组织翻页数据，使用了Spring MVC和Spring Data提供的工具类。

代码如下：

@Controller
public class UserController {

    private static final int DEFAULT_CURRENT = 1;
    private static final int DEFAULT_PAGE_SIZE = 10;

    @GetMapping(value = {"/user/list"})
    public String pagination(@RequestParam Optional page,
                             @RequestParam Optional size,
                             Model model) {

        // 请求参数处理
        int currentPage = page.orElse(DEFAULT_CURRENT);
        int pageSize = size.orElse(DEFAULT_PAGE_SIZE);
        // 这里当前页码需要减去1，因为Pageable翻页从0开始
        Pageable pageable = PageRequest.of(currentPage-DEFAULT_CURRENT, pageSize, Sort.by("id").descending());



        // 返回数据，这里是样例，随便做了点数据
        List userList = new ArrayList<>();
        for (int i = 10 * (currentPage-1); i < 10 * currentPage; i++) {
            User user = new User();
            user.setId(new Long(i));
            user.setName("User " + i);
            userList.add(user);
        }

        // 返回的分页数据，此处总条数需要按照自己的数据量来设置
        Page pageList = new PageImpl<>(userList, pageable, 200);
        model.addAttribute("pageList", pageList);

        return "user/list";
    }
}

翻页的核心代码如下：

    

        

            首页
        

        

            上一页
        

        
            

                1
            
        

        
            

                1
            
            

                2
            
            

                ···
            
            

                1
            
            

                ···
            
            

                8
            
            

                9
            
        

        

            下一页
        
        

            末页
        
    

页面代码核心逻辑是计算下面几个值：

left 当前页面左侧有多少页

right 当前页面右侧有多少页

我们代码里左侧要求留3个，右侧要求留3个。中间是没有问题，可是在开头左侧几乎没有，那就要用右侧来补；结尾页码右侧几乎没有，那就要用左侧来补。所以引入了变量：

diff 用来计算左侧和右侧到底怎么补

start 开始循环的页码

end 结束循环的页码

另外针对省略号做了专门的优化。只有省略2页以上才出现 ···

此方案的优点：

1. 在很多页时也能完美翻页
2. 封装完善，完全不需要业务人员写代码，翻页组件到处可用

注意事项：

1. 服务器端使用的页码pageList.number是从0开始的，前端用户看到的页面都是从1开始的，这里比较绕，计算的时候要注意

运行步骤：

1. 在 IDEA 里导入 Gradle 项目，等待下载依赖，编译完成
2. 右击运行 DemoApplication
3. 访问 http://localhost:8080/user/list，也可以访问访问 http://localhost:8080/pagination查看变量调试信息

 完整代码请移步：java/Pagination at main · totemtec/java · GitHubhttps://github.com/totemtec/java/tree/main/Pagination