datatable插件采用异步方式获取数据

1. 引入datatable js和css

 

 

 2. 在html body中添加table

<table id="example" class="cell-border" style="width:100%">
        <thead>
        <tr>
            <th><input type="checkbox"></th>
            <th>序号</th>
            <th>账号</th>
            <th>密码</th>
            <th>名字</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>

3. 在<script>中写js代码

<script>

　　　　　// 初始化加载该页面时
        $(document).ready(function () {
            $('#example').dataTable({

                "processing": true,      //翻页或者搜索的时候，前端是否给出“正在搜索”等提示信息
                "serverSide": false,     // true表示使用后台分页
                "lengthMenu": [3,5,7,9], // 下拉里面的数量
                "ajax": {
                    "url": "/user/getAllUser",  // 异步传输的后端接口url
                    "type": "get"      // 请求方式
                },
　　　　　　　　　　// 产生递增的序号
                "fnDrawCallback"    : function(){
                    this.api().column(1).nodes().each(function(cell, i) {
                        cell.innerHTML =  i + 1;
                    });
                },
　　　　　　　　　　// 第一个放 checkbox，第二个序号，第三个用户账号，第四个用户密码，第五个用户姓名
                "columns": [
                    {"defaultContent": ""},
                    {"defaultContent": ""},
                    { "data": "userId" },
                    { "data": "password" },
                    { "data": "name" },
                    {"defaultContent": ""},
                ],
　　　　　　　　　　// targets[0]表示对第一列即 checkbox
                "columnDefs": [
                    {
                        "targets" : [ 0 ],
                        "sWidth" : "50px",
                        "className" : "center",
                        "data" : "userId",
                        "render" : function(data, type, full) {
                            return '<label><input type="checkbox" name="checkbox" value="'
                                + data
                                + '"></label>';
                        }
                    },
　　　　　　　　　　　　// targets[5] 表示第五列，产生3个a标签
                    {
                        "targets" : [ 5 ],
                        "sWidth" : "180px",
                        "className" : "center",
                        "data" : "userId",
                        "render" : function(data, type, full) {
                            return '<a href="javascript:void(0);"  title="查看" onclick="view(this,\''
                                + data
                                + '\')" >查看</a> <a href="javascript:void(0);" title="修改" onclick="update(this,\''
                                + data
                                + '\')" >修改</a>'
                                + '<a href="javascript:void(0);" title="删除" onclick="del(this,\''
                                + data
                                + '\')" >删除</a>';

                        }
                    },
　　　　　　　　　　　　// visible属性可以隐藏选择的列
                    /*
                    {
                        // 隐藏了  第3列和第4列

                        "targets" : [2,3 ],
                        "visible":false,
                        "render":function(data){
                            return data ;
                        }

                    }
                    */
                ],
                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": ": 以降序排列此列"
                    }
                },
                "processing" : false,//等待加载效果
                "ordering" : true,//排序功能
                "aaSorting" : [],
                "width" : "100%",
                "bLengthChange" : true,
                "iDisplayLength" : 3, // 每页显示多少
                "searching" : true,
                "autoWidth" : false,

            })
        })


        function view(obj,data) {
            console.log(data);
        }

        function update(obj,data) {
            alert(data);
        }

        function del(obj,data) {
            console.log(data);
        }
    </script>

3. 后台控制器（返回json数据，因此在该方法上添加@ResponseBody注解）

@GetMapping("/getAllUser")
    @ResponseBody
    public JSONObject getAllUser(){
        JSONObject jsonObject = new JSONObject();
        List<User> userList = userService.getAllUser();

        if(userList==null){
            jsonObject.put("total",0);
            jsonObject.put("data",new ArrayList());
        }else{
            jsonObject.put("total",userList.size());
            jsonObject.put("data",userList);

        }
        System.out.println(jsonObject);
        return jsonObject;
    }