Datatables学习之前端分页

来源：互联网发布：lambda python 编辑：程序博客网时间：2024/06/09 18:54

现在的项目用的是bootstrap，于是选择了datatables显示表格数据。
导入需要的js以及css文件，分别是jquery.js jquery.datatables.css jquery.datatables.js

html页面代码如下`

<table class="table table-striped table-bordered table-hover"                                        id="table_id">                                        <thead>                                            <th>ID</th>                                            <th>编码</th>                                            <th>名称</th>                                            <th>地址</th>                                            <th>描述</th>                                            <th>是否有效</th>                                            <th>接口状态</th>                                            <th>轮询间隔</th>                                            <th>创建时间</th>                                            <th>备注</th>                                            <th>是否删除</th>                                            <th>操作列</th>                                        </thead>                                        <tbody>                                        </tbody></table>`

其中和部分必须要有。
datatables初始化：

$(document).ready(function() {                    $('#table_id')                        .DataTable(                            {                                "paging": true,                                "iDisplayLength": 10, //默认每页数量                                //"bPaginate": true, //翻页功能                                "bLengthChange": true, //改变每页显示数据数量                                "bFilter": true, //过滤功能                                "bSort": true, //排序功能                                "bInfo": true, //页脚信息                                "bAutoWidth": true, //自动宽度                                "bRetrieve": true,                                "processing": true,                                //"serverSide" : true,//服务器端进行分页处理的意思                                "bPaginate": true,                               //"bProcessing": true                  "ajax": {                        url: "../serviceConfig/getServiceConfigByModel.do",                                    dataSrc: function(result) {                                        //这里result和上面jquery的ajax的代码类似，也是可以得到data.json的数据，但是这样的格式，Datatables不能直接使用，这时候需要在这里处理一下                                        //直接返回Datatables需要的那部分数据即可                                        return result.data.aaData;                                    }                                },                                columns : [                                                        {                                                            data : "id"                                                        },                                                        {                                                            data : "code"                                                        },                                                        {                                                            data : "srvName"                                                        },                                                        {                                                            data : "url"                                                        },                                                        {                                                            data : "description"                                                        },                                                        {                                                            data : "isAllow"                                                        },                                                        {                                                            data : "state"                                                        },                                                        {                                                            data : "frequency"                                                        },                                                        {                                                            data : "createTime"                                                        },                                                        {                                                            data : "remark"                                                        },                                                        {                                                            data : "isDelete",                                                            render : function(                                                                    data, type,                                                                    row) {                                                                if (data == 0) {                                                                    return "未删除";                                                                } else {                                                                    return "删除";                                                                }                                }                        } ],                "columnDefs" : [ {                                // 定义操作列,######以下是重点########                        "targets" : 11,//操作按钮目标列                        "data" : null,                        "render" : function(data,type, row) {                                        var id = '"' + row.id+ '"';                                        //<a href='javascript:void(0);'  class='delete btn btn-default btn-xs'  ><i class='fa fa-times'></i> 查看</a>                                        var html = "<button class='btn btn-xs btn-success' onclick='add()'><i class='icon-ok'></i> </button>"                                        html += "<button class='btn btn-xs btn-warning' onclick='edit("                                                                + id                                                                + ")'><i class='icon-pencil'></i> </button>"                                                        html += "<button class='btn btn-xs btn-danger' onclick='del("                                                                + id                                                                + ")'><i class='icon-remove'></i> </button>"                                                        return html;                                                    }                                                } ]                                            });                        });

  json返回的数据格式可以为自己定义的格式  不过某个部分必须满足打他tables规定的格式  即上文中的dataSrc属性 请求参数没有特殊要求 返回参数必须

        returnMap.put("aaData", serviceConfigModels);        returnMap.put("sEcho", "1");        Long iTotalRecords = serviceConfigMapper.selectAllCount();        returnMap.put("iTotalRecords", iTotalRecords);        returnMap.put("iTotalDisplayRecords", iTotalRecords);    如上代码所示，至此datatables前端分页完成

0 0