datatables+mybatis-pagehelper实现分页

效果:

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

function paperSetting() {
    $('.table-sort').dataTable({  //创建dataTable对象
        "aaSorting": [[1, "desc"]],//默认第几个排序
        "bStateSave": false,//状态保存
        stripeClasses: ["odd", "even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合
        "aoColumnDefs": [
            //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
            {"orderable": false, "aTargets": [0, 4, 5, 6, 7, 11]}// 制定列不参与排序
        ],
        serverSide: true,//启用服务器端分页
        ajax: function (data, callback, settings) {  //可以把这里的data打印出来你就知道了
            $.ajax({  //发送ajax向后端请求数据
                url: URL + '/api/admin/user',
                type: 'GET',
                data: {
                    name: '' + name,
                    sessionId: '' + sessionId,
                    limit: data.length,
                    page: ((data.start / data.length) + 1),
                    order: data.columns[data.order[0].column].data + " " + data.order[0].dir,
                },
                xhrFields: {
                    withCredentials: true
                },
                success: function (result) {
                    var pageInfo = result.data.pageInfo;  //拿到后端返回的数据
                    var returnData = {};
                    $("#totalCount").empty().append(pageInfo.total);
                    //这个值不能相同，不然会导致点击前一页、后一页有问题(特别注意)
                    returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                    returnData.recordsTotal = pageInfo.total;//返回数据全部记录
                    returnData.recordsFiltered = pageInfo.total;//后台不实现过滤功能，每次查询均视作全部结果
                    returnData.data = pageInfo.list;//返回的数据列表
                    //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                    //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                    callback(returnData);
                }
            });
        },
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {//每行回调函数
            //动态设置class属性
            $(nRow).attr("class", "text-c")
        },
        columns: [     //对返回的数据无特殊处理，直接{"data":"字段名"},如有特殊处理，通过render函数处理
            {
                render: function (data, type, row, meta) {
                    if(row.id!=null){//排除全选的checkBox
                    var content = "<input type='checkbox' value="+row.id+">";
                    }
                    return content;
                }
            },
            {"data": "id"},
            {"data": "username"},
            {"data": "age"},
            {
                "data": "gender",
                render: function (data, type, row, meta) {
                    var content = "";
                    if (data == 0) {
                        content = "<td>男</td>"
                    } else if (data == 1) {
                        content = "<td>女</td>"
                    } else {
                        content = "<td>未知</td>"
                    }
                    return content;
                }
            },
            {"data": "email"},
            {"data": "phone"},
            {
                "data": "headPicture",
                render: function (data, type, row, meta) {
                    var content = "";
                    content = '<img id="pix" style="width:50px;height:50px;border-radius:50%" src="' + this.URL + data + '"/>';
                    return content;
                }

            },
            {"data": "registerTime"},
            {"data": "lastLoginTime"},
            {
                "data": "status",
                render: function (data, type, row, meta) {
                    var content = "";
                    if (data == 0) {
                        content = "<td><span class=\"label label-success radius\">有效</span></td>"
                    } else {
                        content = "<td><span class=\"label label-danger radius\">禁用</span></td>"
                    }
                    return content;
                }

            },
            {
                render: function (data, type, row, meta) {
                    var content = "<td><a id='unuse' style='text-decoration:none' title='修改状态'><i  class='Hui-iconfont'>&#xe631;</i></a> <a title='编辑' id='edit'  class='ml-5' style='text-decoration:none'><i class='Hui-iconfont'>&#xe6df;</i></a> <a id='change-password' style='text-decoration:none' class='ml-5'  title='修改密码'><i class='Hui-iconfont'>&#xe63f;</i></a> <a id='delete' title='删除'  class='ml-5' style='text-decoration:none'><i class='Hui-iconfont'>&#xe6e2;</i></a></td>";
                    return content;
                }
            }
        ]
    });
}

4.操作那列有四个操作，如何给四个操作绑定事件并对获取每行数据?

我们这里以删除用户按钮为例.

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

<a id='delete' title='删除' class='ml-5' style='text-decoration:none'><i class='Hui-iconfont'>&#xe6e2;</i></a>

删除用户相关js:

    var table = $('.table-sort').DataTable(); //拿到DataTable对象
    //删除用户
    $('.table-sort').on('click', 'a#delete', function () { //每行的删除按钮设置绑定事件
        var data = table.row($(this).parents('tr')).data(); //获取这行的数据，可打印出来查看一下
        layer.alert("确定删除用户 " + data.username + "?", {icon: 3, title: '提示'}, function (index) {
            $.ajax({ //发送ajax请求删除用户
                url: URL + '/api/admin/user/' + data.id,
                type: 'DELETE',
                data: {
                    name: '' + name,
                    sessionId: '' + sessionId,
                },
                xhrFields: {
                    withCredentials: true
                },
                success: function (result) {
                    location.replace(location.href);
                }
            });
            layer.close(index);
        })
    });

后端:

如果你也在用 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();