datatables学习笔记1

首先介绍一个学习datatables个人认为一个比较好的中文网站吧：http://datatables.club/

一：基本使用

1.添加js文件：table的修饰采用bootstrap

<link rel="stylesheet" href="../../../resources/gui/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../../../resources/gui/plugins/datatables/dataTables.bootstrap.css" >
    

<script type="text/javascript" src="../../../resources/gui/scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="../../../resources/gui/bootstrap/js/bootstrap.js"></script>
    
<script type="text/javascript" src="../../../resources/gui/plugins/datatables/jquery.dataTables.js"></script>
<script type="text/javascript" src="../../../resources/gui/plugins/datatables/dataTables.bootstrap.min.js"></script>

2.在页面中添加如下内容：这里采用接收服务端返回的数据

<table id="user-table" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>name</th>
                                    <th>userName</th>
                                    <th>phone</th>
                                    <th>email</th>
                                    <th>roles</th>
                                    <th>isActive</th>
                                    <th>action</th>
                                </tr>
                                </thead>
                            </table>

3.在js文件中添加：

$('#user-table').DataTable({
        "ajax": {
            "url":'/user/loadAjax',
            "dataSrc":function(result) {
                return result;
            }
        },
        "columnDefs": [ {
            "targets": -1,
            render: function(data, type, row, meta) {
                return "<button οnclick=\"editUser("+row.id+")\" class=\"btn btn-success btn-sm\">"+
                            "<i class=\"fa fa-edit\"></i>"+
                        "</button>"+
                        "<button οnclick=\"deleteUser("+row.id+")\" class=\"btn btn-danger btn-sm\">"+
                            "<i class=\"fa fa-remove\"></i>"+
                        "</button>";
            }
        } ],
        "columns":[
            {"data":"name"},
            {"data":"username"},
            {"data":"phone"},
            {"data":"email"},
            {
                "render": function(data,type,row,meta) {
                    var str = "";
                    for(var i=0;i<row.commRoles.length;i++) {
                        str+=(row.commRoles)[i].name+" ";
                    }
                    return str;
                },
                "orderable":false
            },
            {
                "data":"activeInd",
                "orderable":false
            },
            {
                "data":null,
                "orderable":false
            }
        ],
        "orderMulti":true
    });
    

4.后台采用springmvc处理(jackson传输数据)：

    @RequestMapping(value = {"/loadAjax"}, method = RequestMethod.GET)
    @ResponseBody
    public String loadUserByDataTable() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        Set<CommRole> commRolesList = new HashSet<CommRole>();
        CommRole commRole = null;
        for(int i=1;i<4;i++) {
            commRole = new CommRole();
            commRole.setId(Long.valueOf(i));
            commRole.setName("Name+"+(i+1));
            commRolesIdList.add(commRole);
        }
        List<CommUser> commUserList = new ArrayList<CommUser>();
        CommUser commUser = null;
        for (int i = 0; i < 100; i++) {
            commUser = new CommUser();
            commUser.setName("name" +i);
            commUser.setCommRoles(commRolesList);
            commUser.setEmail( "1.@126.com");
            commUser.setPassword("123456");
            commUser.setUsername("username");
            commUser.setPhone("123456789");
            commUser.setId(Long.valueOf(i+1));
            commUserList.add(commUser);
       }

        String testData = "{'aaData':[{ \"name\": \"Tiger Nixon\", \"username\": \"System Architect\", \"phone\": \"$3,120\", \"email\": \"2011/04/25\", \"id\": \"Edinburgh\" }]}";
        String commListJson = mapper.writeValueAsString(<pre name="code" class="html">testData 

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

二：配置介绍

datatable初始化：

var table = $('#example').DataTable({
    "deferLoading": null,
    "destroy": false,
    "displayStart": 0,
    "dom": "lfrtip",
    "lengthMenu": [10, 25, 50, 100],
    "order": [[0, 'asc']],
    "orderCellsTop": false,
    "orderClasses": true,
    "orderFixed": [0, 'asc'],
    "orderMulti": true,
    "pageLength": 10,
    "pagingType": "simple_numbers",
    "renderer": "bootstrap",
    "retrieve": false,
    "rowId": "DT_RowId",
    "scrollCollapse": false,
    "search": {
        "caseInsensitive": true,
        "regex": false,
        "search": "Fred",
        "smart": true
    },
    "searchCols": [
        null, {
        "search": "My filter"
        },
        null,
        {
            "search": "^[0-9]",
            "escapeRegex": false
        }
    ],
    "searchDelay": null,
    "stateDuration": 7200,
    "stripeClasses": ['odd', 'even'],
    "tabIndex": 0
});

columns列配置：

var table = $('#example').DataTable({
    "columns": [{
        "cellType": "td",
        "className": "my_class",
        "contentPadding": "mmm",
        "createdCell": function(td, cellData, rowData, row, col) {
            if (cellData < 1) {
                $(td).css('color', 'red')
            }
        },
        "data": "engine",
        "defaultContent": "<i>Not set</i>",
        "name": "engine",
        "orderable": true,
        "orderData": [0, 1],
        "orderDataType": "dom-text",
        "orderSequence": ["asc"],
        "<span style="color:#ff0000;">render</span>": function(data, type, full, meta) {
            return '<a href="' + data + '">Download</a>';
        },
        "searchable": true,
        "title": "My column title",
        "type": "html",
        "visible": true,
        "width": "20%",
    }]
});

var table = $('#example').DataTable({
    "columnDefs": [{
        "targets": 0,
        "cellType": "td",
        "className": "my_class",
        "contentPadding": "mmm",
        "createdCell": function(td, cellData, rowData, row, col) {
            if (cellData < 1) {
                $(td).css('color', 'red')
            }
        },
        "data": "engine",
        "defaultContent": "<i>Not set</i>",
        "name": "engine",
        "orderable": true,
        "orderData": [0, 1],
        "orderDataType": "dom-text",
        "orderSequence": ["asc"],
        "<span style="color:#ff0000;">render</span>": function(data, type, full, meta) {
            return '<a href="' + data + '">Download</a>';
        },
        "searchable": true,
        "title": "My column title",
        "type": "html",
        "visible": true,
        "width": "20%",
    }]
});