JQuery DataTables的使用与综合实例

偏执的太偏执、 2021-09-01 08:13 793阅读 0赞

JQuery Datatables是一款JQuery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。功能包含：分页，即时搜索和排序、几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理、支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation、丰富多样的option和强大的API、支持国际化等。

# 1、JQuery DataTables示例代码 #

$(document).ready(function()
    {
        //DataTable对象
        var tableModel = $("#table").DataTable({
            "processing": true, //显示“处理中...”
            "serverSide": true, //开启服务器模式
            "paging": true, //是否允许翻页
            "rowId": "userId", //指定用于行ID的属性名 默认是：DT_RowId
            "lengthMenu": [5, 10, 25, 50, 75, 100], // 数量选择下拉框内容
            "pageLength": 5, // 每页的初期件数
            "searching" : false, //是否显示搜索框
            "bSort": false,  //禁止排序
            "ajax": {
                "url": "/user/searchUserPage",
                "type": "GET",
                "data": function (searchParams) {
                    searchParams.userName = $("#userName").val();
                    searchParams.sex = $("#sex").val();
                    searchParams.departmentName = $("#departmentName").val();
                    searchParams.orderBy = "user_id ASC";
                    return searchParams;
                }
            },
            "columns": [
                {
                    "data": "userId", "title":"<input type='checkbox' id='checkAll' />全选",
                    "render": function (data, type, row, meta)
                    {
                        return "<input type='checkbox' name='checkItem' value=" + data + " />";
                    }
                },
                {
                    "title":"序号",
                    "render" : function (data, type, row, meta)
                    {
                        return meta.row + 1 + meta.settings._iDisplayStart;
                    }
                },
                { "data": "userName","title":"用户名称" },
                {
                    "data": "sex","title":"性别",
                    "render" : function ( data, type, row, meta ) {
                        var conent = data == 1 ? "男" : "女";
                        return conent;
                    }
                },
                { "data": "departmentName","title":"部门名称" },
                { "data": "blogRemark","title":"博客信息" },
                {
                    "title":"操作",
                    "render" : function ( data, type, row, meta )
                    {
                        var conent = "<a href='javascript:updateData(" + row.userId + ")'>编辑</a>\n";
                        conent += "<a href='javascript:deleteData(" + row.userId + ")'>删除</a>";
                        return conent;
                    }
                }
            ],
            "language": {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });
    });

> **官方网站：**[JQuery DataTable 的中文官方网站][JQuery DataTable]

# 2、**创建项目** #

**【实例】**创建 SpringBoot、MyBatis 整合的项目，使用 JQuery DataTables 插件分页显示用户列表信息。执行结果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70][]

## 2.1 创建数据表 ##

在MySQL数据库中创建用户信息表（tb\_user），并添加数据。

-- 判断数据表是否存在，存在则删除
    DROP TABLE IF EXISTS tb_user;
    
    -- 创建“用户信息”数据表
    CREATE TABLE IF NOT EXISTS tb_user
    ( 
    	user_id INT AUTO_INCREMENT PRIMARY KEY COMMENT '用户编号',
    	user_name VARCHAR(50) NOT NULL COMMENT '用户名称',
    	sex CHAR(2) DEFAULT '1' COMMENT '性别（1：男；2：女；）',
    	department_name VARCHAR(50) NOT NULL COMMENT '部门名称',
    	blog_remark VARCHAR(50) COMMENT '博客信息'
    ) COMMENT = '用户信息表';
    
    -- 创建数据
    INSERT INTO tb_user(user_name,sex,department_name,blog_remark) VALUES
    ('pan_junbiao的博客',1,'研发部','您好，欢迎访问 pan_junbiao的博客'),('pan_junbiao的博客',1,'财务部','https://blog.csdn.net/pan_junbiao'),
    ('pan_junbiao的博客',2,'人事部','您好，欢迎访问 pan_junbiao的博客'),('pan_junbiao的博客',1,'研发部','https://blog.csdn.net/pan_junbiao'),
    ('pan_junbiao的博客',2,'财务部','您好，欢迎访问 pan_junbiao的博客'),('pan_junbiao的博客',1,'人事部','https://blog.csdn.net/pan_junbiao'),
    ('pan_junbiao的博客',2,'人事部','您好，欢迎访问 pan_junbiao的博客'),('pan_junbiao的博客',1,'研发部','https://blog.csdn.net/pan_junbiao'),
    ('pan_junbiao的博客',1,'研发部','您好，欢迎访问 pan_junbiao的博客'),('pan_junbiao的博客',1,'财务部','https://blog.csdn.net/pan_junbiao'),
    ('pan_junbiao的博客',2,'研发部','您好，欢迎访问 pan_junbiao的博客'),('pan_junbiao的博客',1,'财务部','https://blog.csdn.net/pan_junbiao'),
    ('pan_junbiao的博客',1,'研发部','您好，欢迎访问 pan_junbiao的博客'),('pan_junbiao的博客',1,'财务部','https://blog.csdn.net/pan_junbiao'),
    ('pan_junbiao的博客',1,'研发部','您好，欢迎访问 pan_junbiao的博客'),('pan_junbiao的博客',2,'财务部','https://blog.csdn.net/pan_junbiao'),
    ('pan_junbiao的博客',1,'人事部','您好，欢迎访问 pan_junbiao的博客'),('pan_junbiao的博客',2,'财务部','https://blog.csdn.net/pan_junbiao'),
    ('pan_junbiao的博客',1,'研发部','您好，欢迎访问 pan_junbiao的博客'),('pan_junbiao的博客',2,'人事部','https://blog.csdn.net/pan_junbiao');

## 2.2 创建项目  ##

**（1）创建SpringBoot项目，项目结构如下图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 1][]

**（2）创建实体类（Entity层）**

在com.pjb.entity包中，创建UserInfo类（用户信息实体类）。

package com.pjb.entity;
    
    /**
     * 用户信息的持久化类
     * @author pan_junbiao
     **/
    public class UserInfo
    {
        private int userId; //用户编号
        private String userName; //用户名称
        private int sex; //性别（1：男；2：女；）
        private String departmentName; //部门名称
        private String blogRemark; //博客信息
    
        //省略getter与setter方法...
    }

**（3）数据库映射层（Mapper层）**

在com.pjb.mapper包中，创建UserMapper接口（用户信息Mapper动态代理接口）。

package com.pjb.mapper;
    
    import com.pjb.entity.UserInfo;
    import com.pjb.model.UserParam;
    import org.apache.ibatis.annotations.Mapper;
    import org.apache.ibatis.annotations.SelectProvider;
    import org.springframework.stereotype.Repository;
    
    import java.util.List;
    
    /**
     * 用户信息Mapper动态代理接口
     * @author pan_junbiao
     **/
    @Mapper
    @Repository
    public interface UserMapper
    {
        /**
         * 分页查询员工列表
         */
        @SelectProvider(type = UserSqlBuilder.class, method = "searchUserList")
        public List<UserInfo> searchUserList(UserParam userParam);
    
        /**
         * 查询员工列表总数
         */
        @SelectProvider(type = UserSqlBuilder.class, method = "searchUserCount")
        public int searchUserCount(UserParam param);
    
        //建议将SQL Builder以映射器接口内部类的形式进行定义
        public class UserSqlBuilder
        {
            /**
             * 分页查询员工列表
             */
            public String searchUserList(UserParam param)
            {
                StringBuffer sql = new StringBuffer("SELECT * FROM tb_user WHERE 1=1");
    
                //用户名称
                if(param.getUserName()!=null && param.getUserName().length()>0)
                {
                    sql.append(" AND user_name LIKE '%${userName}%'");
                }
    
                //性别（1：男；2：女；）
                if(param.getSex()>0)
                {
                    sql.append(" AND sex = #{sex}");
                }
    
                //部门名称
                if(param.getDepartmentName()!=null && param.getDepartmentName().length()>0)
                {
                    sql.append(" AND department_name = #{departmentName}");
                }
    
                //排序信息
                if(param.getOrderBy()!=null && param.getOrderBy().length()>0)
                {
                    sql.append(" ORDER BY #{orderBy}");
                }
    
                //分页信息
                sql.append(" LIMIT #{start}, #{length}");
    
                return sql.toString();
            }
    
            /**
             * 查询员工列表总数
             */
            public String searchUserCount(UserParam param)
            {
                StringBuffer sql = new StringBuffer("SELECT COUNT(1) FROM tb_user WHERE 1=1");
    
                //用户名称
                if(param.getUserName()!=null && param.getUserName().length()>0)
                {
                    sql.append(" AND user_name LIKE '%${userName}%'");
                }
    
                //性别（1：男；2：女；）
                if(param.getSex()>0)
                {
                    sql.append(" AND sex = #{sex}");
                }
    
                //部门名称
                if(param.getDepartmentName()!=null && param.getDepartmentName().length()>0)
                {
                    sql.append(" AND department_name = #{departmentName}");
                }
    
                return sql.toString();
            }
        }
    }

# 3、JQuery DataTables的使用 #

**（1）模型类（Model层）**

在com.pjb.model.DataTable包中，创建DtSentParam类（DataTables请求的参数类）。

package com.pjb.model.DataTable;
    
    /**
     * DataTables请求的参数类
     * @author pan_junbiao
     **/
    public class DtSentParam
    {
        /**
         * 绘制计数器。这个是用来确保Ajax从服务器返回的是对应的（Ajax是异步的，因此返回的顺序是不确定的）。
         * 要求在服务器接收到此参数后再返回
         */
        private int draw;
    
        /**
         * 第一条数据的起始位置，比如0代表第一条数据
         */
        private int start;
    
        /**
         * 告诉服务器每页显示的条数，这个数字会等于返回的 data集合的记录数，可能会大于因为服务器可能没有那么多数据。
         * 这个也可能是-1，代表需要返回全部数据(尽管这个和服务器处理的理念有点违背)
         */
        private int length;
    
        /**
         * 搜索值
         * key包含：value和regex
         */
        private Map<String, String> search = new HashMap<String, String>();
    
        //省略getter与setter方法...
    }

在com.pjb.model.DataTable包中，创建DtReturnData类（DataTables接收服务器返回的数据类）。

package com.pjb.model.DataTable;
    
    import java.util.List;
    
    /**
     * DataTables接收服务器返回的数据类
     * @author pan_junbiao
     **/
    public class DtReturnData<T>
    {
        /**
         * 必要。上面提到了，Datatables发送的draw是多少那么服务器就返回多少。
         * 这里注意，出于安全的考虑，强烈要求把这个转换为整形，即数字后再返回，而不是纯粹的接受然后返回，
         * 这是 为了防止跨站脚本（XSS）攻击。
         */
        private int draw;
    
        /**
         * 必要。即没有过滤的记录数（数据库里总共记录数）
         */
        private int recordsTotal;
    
        /**
         * 必要。过滤后的记录数（如果有接收到前台的过滤条件，则返回的是过滤后的记录数）
         */
        private int recordsFiltered;
    
        /**
         * 必要。表中中需要显示的数据。
         */
        private List<T> data;
    
        //省略getter与setter方法...
    }

> **更多参数：**[服务器处理(Server-side processing)][Server-side processing]

在com.pjb.model包中，创建UserParam类（用户信息参数类），并继承DtSentParam类。

package com.pjb.model;
    
    import com.pjb.model.DataTable.DtSentParam;
    
    /**
     * 用户信息参数类
     * @author pan_junbiao
     **/
    public class UserParam extends DtSentParam
    {
        private String userName; //用户名称
        private int sex; //性别（1：男；2：女；）
        private String departmentName; //部门名称
        private String orderBy; //排序
    
        //省略getter与setter方法...
    }

**（2）控制器方法（Controller层）**

在com.pjb.controller包中，创建UserController类（用户信息控制器）。

package com.pjb.controller;
    
    import com.pjb.entity.UserInfo;
    import com.pjb.mapper.UserMapper;
    import com.pjb.model.DataTable.DtReturnData;
    import com.pjb.model.UserParam;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.List;
    
    /**
     * 用户信息控制器
     * @author pan_junbiao
     **/
    @Controller
    @RequestMapping("user")
    public class UserController
    {
        @Autowired
        private UserMapper userMapper;
    
        /**
         * 分页查询员工列表
         */
        @ResponseBody
        @RequestMapping("/searchUserPage")
        public DtReturnData<UserInfo> searchUserPage(UserParam param)
        {
            DtReturnData<UserInfo> dtReturnData = new DtReturnData<UserInfo>();
    
            //分页查询员工列表
            List<UserInfo> userList = userMapper.searchUserList(param);
    
            //查询员工列表总数
            int total = userMapper.searchUserCount(param);
    
            //封装成DataTable所需的数据类型
            dtReturnData.setDraw(param.getDraw());
            dtReturnData.setData(userList);
            dtReturnData.setRecordsTotal(total);
            dtReturnData.setRecordsFiltered(total);
    
            //返回结果
            return dtReturnData;
        }
    
        /**
         * 用户列表页面
         */
        @RequestMapping("/toUserList")
        public String toUserList()
        {
            return "user-list.html";
        }
    }

**（2）显示页面（View层）**

在resources/templates目录下，创建 user-list.html 用户列表显示页面。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户列表</title>
        <meta name="author" content="pan_junbiao的博客">
        <link rel="stylesheet" href="/css/base.css">
    
        
        <link rel="stylesheet" type="text/css" href="/DataTables-1.10.21/css/jquery.dataTables.css">
    
        
        <script type="text/javascript" charset="utf8" src="/DataTables-1.10.21/js/jquery.js"></script>
    
        
        <script type="text/javascript" charset="utf8" src="/DataTables-1.10.21/js/jquery.dataTables.js"></script>
    
    </head>
    <body>
        
        <form class="searchBox">
            用户名称：<input class="s_text" id="userName"/>
            性别：
            <select class="s_select" id="sex">
                <option value="0">请选择</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
            部门：
            <select class="s_select" id="departmentName">
                <option value="">请选择</option>
                <option value="研发部">研发部</option>
                <option value="财务部">财务部</option>
                <option value="人事部">人事部</option>
            </select>
            <input class="b_button" type="button" value="搜索" onclick="searchList()"/>
            <input class="b_button" type="reset" value="重置" />
            <input class="b_button" type="button" value="批量删除" onclick="batchDelete()" />
        </form>
    
        
        <table id="table" class="cell-border" ></table>
    </body>
    <script>
        $(document).ready(function()
        {
            //DataTable对象
            var tableModel = $("#table").DataTable({
                "processing": true, //显示“处理中...”
                "serverSide": true, //开启服务器模式
                "paging": true, //是否允许翻页
                "rowId": "userId", //指定用于行ID的属性名 默认是：DT_RowId
                "lengthMenu": [5, 10, 25, 50, 75, 100], // 数量选择下拉框内容
                "pageLength": 5, // 每页的初期件数
                "searching" : false, //是否显示搜索框
                "bSort": false,  //禁止排序
                "ajax": {
                    "url": "/user/searchUserPage",
                    "type": "GET",
                    "data": function (searchParams) {
                        searchParams.userName = $("#userName").val();
                        searchParams.sex = $("#sex").val();
                        searchParams.departmentName = $("#departmentName").val();
                        searchParams.orderBy = "user_id ASC";
                        return searchParams;
                    }
                },
                "columns": [
                    {
                        "data": "userId", "title":"<input type='checkbox' id='checkAll' />全选",
                        "render": function (data, type, row, meta)
                        {
                            return "<input type='checkbox' name='checkItem' value=" + data + " />";
                        }
                    },
                    {
                        "title":"序号",
                        "render" : function (data, type, row, meta)
                        {
                            return meta.row + 1 + meta.settings._iDisplayStart;
                        }
                    },
                    { "data": "userName","title":"用户名称" },
                    {
                        "data": "sex","title":"性别",
                        "render" : function ( data, type, row, meta ) {
                            var conent = data == 1 ? "男" : "女";
                            return conent;
                        }
                    },
                    { "data": "departmentName","title":"部门名称" },
                    { "data": "blogRemark","title":"博客信息" },
                    {
                        "title":"操作",
                        "render" : function ( data, type, row, meta )
                        {
                            var conent = "<a href='javascript:updateData(" + row.userId + ")'>编辑</a>\n";
                            conent += "<a href='javascript:deleteData(" + row.userId + ")'>删除</a>";
                            return conent;
                        }
                    }
                ],
                "language": {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                }
            });
    
            // init：初始化和数据都加载完成，和 initComplete配置等价
            tableModel.on("draw", function ()
            {
                //全选
                $("#checkAll").click(function(){
                    $("[name=checkItem]:checkbox").prop("checked",this.checked);
                });
    
                //复选框组的联动效果
                $("[name=checkItem]:checkbox").click(function(){
                    var flag = true;
                    $("[name=checkItem]:checkbox").each(function(index){
                        if(!this.checked)
                        {
                            flag = false;
                        }
                    });
                    $("#checkAll").prop("checked",flag);
                });
            });
        });
    
        //查询列表
        function searchList()
        {
            //重新加载DataTable列表
            $("#table").DataTable().ajax.reload();
        }
    
        //编辑用户
        function updateData(userId)
        {
            if (userId <= 0) {
                alert("参数错误！");
                return;
            }
    
            //执行您的编辑操作
            alert("编辑用户的编号：" + userId);
    
            //编辑操作完成后，重新加载DataTable列表
            $("#table").DataTable().ajax.reload();
        }
    
        //删除用户
        function deleteData(userId)
        {
            if (!confirm("确定删除该记录吗？")) {
                return;
            }
    
            if (userId <= 0) {
                alert("参数错误！");
                return;
            }
    
            //执行您的删除操作
            alert("删除用户的编号：" + userId);
    
            //删除操作完成后，重新加载DataTable列表
            $("#table").DataTable().ajax.reload();
        }
    
        //批量删除
        function batchDelete()
        {
            var idArray = new Array(); //批量删除的用户ID数组
            $("[name=checkItem]:checkbox:checked").each(function(index){
                idArray.push($(this).val());
            });
    
            if(idArray.length==0)
            {
                alert("请选择要删除的员工！");
                return;
            }
    
            if (!confirm("确定删除记录吗？")) {
                return;
            }
    
            //执行您的删除操作
            alert("删除用户的编号：" + idArray);
    
            //删除操作完成后，重新加载DataTable列表
            $("#table").DataTable().ajax.reload();
        }
    </script>
    </html>

**（3）运行测试**

代码完成后，就可以运行测试了，启动项目，执行结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 2][]

当在搜索框中输入相关参数，如用户名称：pan\_junbiao的博客；性别：男；部门：研发部；点击“搜索”按钮，执行结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 3][]

当点击“全选”复选框后，选中需要批量删除的用户信息，然后点击“批量删除”按钮，将输出被删除用户的编号列表，执行结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 4][]

# 4、JQuery DataTables去掉搜索框和底部文字 #

$(function(){
        $('#table').dataTable({
            "searching" : false, //去掉搜索框方法一
            "bFilter": false, //去掉搜索框方法二
            "bSort": false, //禁止排序
            "paging": false, //禁止分页
            "info": false //去掉底部文字
        });
    });

# 5、JQuery DataTables设置服务器返回的数据 #

Datatables 额外提供了 **dataSrc 属性**来改变从服务器返回的数据给 Datatables，或者是操作数据从一种形式转换成另一种形式（比如xml、json、yaml等）。 这么做是因为 ajax 的 success 选项不能被改变 Datatables 内部自己加载数据完成时使用。

**dataSrc属性的用法：**

"ajax": {
        "url": "/user/getUserList",
        "type": "GET",
        //设置服务器返回的数据
        //"dataSrc":"userInfoList"
        // 或者：
        "dataSrc": function(result)
        {
            //设置服务器返回的数据
            return result.userInfoList;
        }
    }

**【实例】**使用 dataSrc 属性绑定从服务器返回的数据给Datatables，并且隐藏分页信息、底部信息。

**（1）模型类（Model层）**

创建 UserModel类（用户信息模型类），在该类中包含一个用户列表属性。

package com.pjb.model;
    import com.pjb.entity.UserInfo;
    import java.util.List;
    
    /**
     * 用户信息模型类
     * @author pan_junbiao
     **/
    public class UserModel
    {
        private int total; //数据总数
        private List<UserInfo> userInfoList; //用户列表
    
        public int getTotal()
        {
            return total;
        }
    
        public void setTotal(int total)
        {
            this.total = total;
        }
    
        public List<UserInfo> getUserInfoList()
        {
            return userInfoList;
        }
    
        public void setUserInfoList(List<UserInfo> userInfoList)
        {
            this.userInfoList = userInfoList;
        }
    }

**（2）控制器方法（Controller层）**

在控制器中，编写获取用户信息方法。

/**
     * 获取用户列表
     * @author pan_junbiao
     */
    @ResponseBody
    @RequestMapping("/getUserList")
    public UserModel getUserList()
    {
        UserModel userModel = new UserModel();
    
        //创建参数类
        UserParam param = new UserParam();
        param.setStart(1);
        param.setLength(5);
    
        //分页查询员工列表
        List<UserInfo> userList = userMapper.searchUserList(param);
    
        //查询员工列表总数
        int total = userMapper.searchUserCount(param);
    
        userModel.setUserInfoList(userList);
        userModel.setTotal(total);
    
        //返回结果
        return userModel;
    }

**（3）显示页面（View层）**

在resources/templates目录下，创建 user-dataSrc.html 用户列表显示页面。

**（3）运行测试**

启动项目，执行结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 5][]

> **源代码下载：**[https://github.com/kevinpanjunbiao/DataTableDemo][https_github.com_kevinpanjunbiao_DataTableDemo]
> 
> **原文地址：**[https://blog.csdn.net/pan\_junbiao/article/details/107766140][https_blog.csdn.net_pan_junbiao_article_details_107766140]

[JQuery DataTable]: http://datatables.club/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70]: /images/20210724/1b89a73d1d3e4dce8ab8bd8f62a54fa6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 1]: /images/20210724/c6063ee7762a409c8ceb636245c444e8.png
[Server-side processing]: http://datatables.club/manual/server-side.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 2]: /images/20210724/e3af355df9c648f2be956e7d293ee161.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 3]: /images/20210724/de73ff5787f14fa98679d3e87873c809.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 4]: /images/20210724/18323707305c4c6b93f80209e8fea83a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 5]: /images/20210724/9a7b97fc83084831a033d749356d0e1a.png
[https_github.com_kevinpanjunbiao_DataTableDemo]: https://github.com/kevinpanjunbiao/DataTableDemo
[https_blog.csdn.net_pan_junbiao_article_details_107766140]: https://blog.csdn.net/pan_junbiao/article/details/107766140