SpringBoot-分页(MyBatis-Plus版)

SpringBoot-分页(MyBatis-Plus版)

使用mybatisPlus进行简单的数据分页

1. 导入pom依赖

 <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.1</version>
        </dependency>

2. 配置插件（mybatisplus3.4以后版本的写法）
   MybatisPlusConfig

@Configuration
public class MybatisPlusConfig {
    // 最新版
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.H2));
        return interceptor;
    }
}

3. 准备html代码

     <div class="row-fluid">
                <div class="span6">
                    <div class="dataTables_info" id="dynamic-table_info">Showing 1 to 10 of 57 entries</div>
                </div>
                <div class="span6">
                    <div class="dataTables_paginate paging_bootstrap pagination">
                        <ul>
                            <li class="prev disabled"><a href="#">← Previous</a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li class="next"><a href="#">Next → </a></li>
                        </ul>
                    </div>
                </div>
            </div>

3. Controller编写逻辑代码

@GetMapping("/dynamic_table")
    public  String dynamic_table(@RequestParam(value = "pn",defaultValue = "1") Integer pn,Model model){
      
        //分页查询数据
        Page<User> userPage = new Page<>(pn, 2);
        //分页查询的结果
        IPage<User> page = userService.page(userPage, null);
        model.addAttribute("page",page);
        return "table/dynamic_table";
    }

4. 修改前端代码，变成动态填充

  <div class="row-fluid">
                                    <div class="span6">
                                        <div class="dataTables_info" id="dynamic-table_info">当前第 [[${page.current}]] 页
                                            总计 [[${page.pages}]] 页
                                            共 [[${page.total}]] 条记录

                                        </div>
                                    </div>
                                    <div class="span6">
                                        <div class="dataTables_paginate paging_bootstrap pagination">
                                            <ul>
                                                <li class="prev disabled"><a href="#">← Previous</a></li>
                                                <li th:class="${num == page.current?'active':''}"
                                                    th:each="num:${#numbers.sequence(1,page.pages)}">
                                                    <a th:href="@{/dynamic_table(pn=${num})}">[[${num}]]</a>
                                                </li>

                                                <li class="next"><a href="#">Next → </a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

5. 删除数据（删除后需要跳转当前页而不是第一页）

    @GetMapping("/user/delete/{id}")
    public  String deleteUser(@PathVariable("id") Long id,
                              @RequestParam(value = "pn",defaultValue = "1") Integer pn,
                              RedirectAttributes ra){
        userService.removeById(id);
        ra.addAttribute("pn",pn);
        return "redirect:/dynamic_table";

    }

删除事件传递id和当前页面

<td>
 <a th:href="@{/user/delete/{id}(id=${user.id},pn=${page.current})}" class="btn btn-danger btn-sm" type="button">删除</a>
</td>