datatables+mybatis-pagehelper实现分页

我会带着你远行 2023-07-01 12:55 68阅读 0赞

## 效果: ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2_size_16_color_FFFFFF_t_70]  
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。  
它分为`客户端模式`和`服务端模式`,即数据的分页这些事情是由浏览器做还是服务器做好了返回过来。`客户端模式`太简单了，性能也不太好(最主要不符合我气质),所以我们主要是用`服务器模式`.

### 前端: ###

1.首先我们要引入jquery和datatables的js文件`jquery.dataTables.min.js`

2.前端需要显示的表头

<table width="100%" class="table table-border table-bordered table-hover table-bg table-sort">
                <thead>
                <tr class="text-c">
                    <th width="25"><input type="checkbox"></th>
                    <th width="50">ID</th>
                    <th width="100">用户名</th>
                    <th width="50">年龄</th>
                    <th width="50">性别</th>
                    <th width="150">邮箱</th>
                    <th width="200">手机号</th>
                    <th width="140">头像</th>
                    <th width="200">注册时间</th>
                    <th width="200">上次登录时间</th>
                    <th width="80">状态</th>
                    <th width="">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

3.datatables相关的js

4.操作那列有四个操作，如何给四个操作绑定事件并对获取每行数据?  
![在这里插入图片描述][20200122103426397.png]  
我们这里以删除用户按钮为例.

之前我们通过最后一个render函数里，渲染了删除按钮

`<a id='delete' title='删除' class='ml-5' style='text-decoration:none'><i class='Hui-iconfont'></i></a>`

删除用户相关js:

### 后端: ###

如果你也在用 MyBatis,建议尝试该分页插件,这一定是最方便使用的分页插件。分页插件支持任何复杂的单表、多表分页。

1.导入相关pom.xml

<dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>2.1.0</version>
            </dependency>
            <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper-spring-boot-starter</artifactId>
                <version>1.2.5</version>
            </dependency>

2.后端代码

//请求path: http://localhost:8080/api/admin/article?limit=10&page=1&name=selenium&sessionId=92414949D5665173EEBFAEADCC535F73&order=id asc
     @GetMapping(Api.USER)
     protected Result getAllUser(String name, String sessionId, String page, String limit, String order) { 
            int pageSize = 0;
            int pageNum = 0;
            try { 
                pageSize = Integer.valueOf(limit);
                pageNum = Integer.valueOf(page);
                order = StringUtil.humpToLine(order);
            } catch (Exception e) { 
                e.printStackTrace();
                return Result.failure(Constant.REQUEST_PARAM_FORMAT_ERROR_CODE, Constant.REQUEST_PARAM_FORMAT_ERROR);
            }
            //获取第pageNum页,pageSize条内容,通过order排序
            PageHelper.startPage(pageNum, pageSize, order);
            //startPage后面必须是查出所有的要展示的用户
            List<User> users = userService.getAllUser();
            //PageInfo对象封装查询结果，除了用户信息外还有分页的相关信息
            PageInfo<User> pageInfo = new PageInfo<User>(users);
            if (users == null) { 
                return Result.failure("暂时没有用户");
            }
            //将PageInfo对象返回
            return Result.success().add("pageInfo", pageInfo);
        }

**注意:**经过我多次尝试，服务器分页模式下的搜索框不生效，确实，我们每次没返回全部的数据，而是返回部分的数据，不生效也有道理。我的解决办法是自己获取输入框的值，传给后端进行搜索。

但返回搜索的结果，datatables渲染是会有弹框弹出警告，原因就是原来的dataTable对象的数据没有清除又渲染了新的数据。通过下面这行代码将原来数据清楚即可。

$(".table-sort").dataTable().fnDestroy();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200122101530532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDUzMjY2,size_16,color_FFFFFF,t_70
[20200122103426397.png]: https://img-blog.csdnimg.cn/20200122103426397.png