Datatables学习之前端分页

现在的项目用的是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前端分页完成