首页 > 其他 > 详细

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

时间:2020-05-23 17:51:36      阅读:77      评论:0      收藏:0      [点我收藏+]

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;
    }

 

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

原文:https://www.cnblogs.com/Alida/p/12942916.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!