Springmvc 结合 jquery插件Datatables的使用（基于java支持的服务器处理）

LingPF

2019-06-27

前言

觉得Datatables的中文文档写的太差劲了，开发手册和文档都是很不友好，demo也不够完善，不适合直接想使用的人来看，需要用过一段时间之后再来看可能才会有柳暗花明的发现，不然就有点不明所以的感觉。但是这个插件本身还是挺不错的，对于报表的支持比较好。

正文

我定义了一个User对象，现在需要在某个页面上展示一些数据，这个页面就是下面的html（不好意思作为java开发者，我还是使用了jsp），

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <link href="/resource/assets/DataTables-1.10.15/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css">
    <script src="/resource/assets/jquery/jquery-3.2.1.js" type="text/javascript" charset="UTF-8"></script>
    <link href="/resource/assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" charset="UTF-8">
    <script src="/resource/assets/DataTables-1.10.15/media/js/jquery.dataTables.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/resource/assets/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/resource/js/mian.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
</div>
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>id</th>
        <th>username</th>
        <th>password</th>
        <th>age</th>
        <th>name</th>
        <th>nickname</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    </tbody>
</table>

</body>
</html>

就是一个简单的六列的表格，不用过多的解释了，但是这里有个id=“table_id_example” 需要用的到，还有一点需要注意， datatables兼容bootstrap。

然后应该要看js了，我是这样写的：

$(function () {
    $('#table_id_example').DataTable({
        draw: 1,//标识可以避免因ajax的异步性而导致展示错误数据
        recordsFiltered: 10,//过滤后数据总条数
        recordsTotal: 10,//过滤前数据总条数
        scrollY: 300,//滚动条高度
        paging: true,//是否支持分页
        serverSide: true,//是否支持服务器处理
        'bStateSave': true,// 状态保存
        'processing': true, // 打开数据加载时的等待效果
        'sAjaxSource': '/user/getTableData',
        'fnServerData': function (sSource,aoData,fnCallback,oSettings) {
            oSettings.jqXHR = $.ajax({
                'dataType': 'json',
                'type': 'GET',
                'url': sSource,
                'data': aoData,
                'success': function (data) {
                    fnCallback(data);
                },
                'error': function (e) {
                    console.log(e.message);
                }
            });
        },
        columns: [
            { title: 'id',data: 'id' },
            { title: 'username',data: 'username' },
            { title: 'password',data: 'password' },
            { title: 'age',data: 'age' },
            { title: 'name',data: 'name' },
            { title: 'nickname',data: 'nickname' }
        ]
    });
});

这里可以重新制定列名，也要定义数据值，还要定义请求，参数在注释中写了。

下面应该写服务端了，这呢：

@RestController
@RequestMapping("/user")
public class UserController {

    /**
     * Method Description:
     * 〈随机获取表格数据〉
     *
     * @param:      null
     * @return:     表格数据以String格式返回， 返回json
     * @author:     Andy
     * @date:       3/30/2018 4:46 PM
     */
    @RequestMapping(value = "/getTableData", method = RequestMethod.GET)
    public String getTableData() {
        List<UserDO> users = new ArrayList<UserDO>();
        for (int i = 0; i < 10; i++) {
            int temp = (int) (Math.random() * 10);
            String strTemp = String.valueOf(temp);
            UserDO user = new UserDO(i + "", "wang" + temp, "123", temp, "wang" + temp, ("andy" + strTemp));
            users.add(user);
        }
        ResultData<UserDO> data = new ResultData<UserDO>();
        data.setData(users);
        data.setDraw(1);
        data.setRecordsTotal(Integer.valueOf(users.size()));
        data.setRecordsFiltered(Integer.valueOf(users.size()));
        System.out.println(users.toString());
        String listJsonString = JSON.toJSONString(data);
        return listJsonString;
    }
}

ResultData:

public class ResultData<T> {

    private Integer draw;
    private Integer recordsTotal;
    private Integer recordsFiltered;
    private List<T> data;

    public Integer getDraw() {
        return draw;
    }

    public void setDraw(Integer draw) {
        this.draw = draw;
    }

    public Integer getRecordsTotal(Integer integer) {
        return recordsTotal;
    }

    public void setRecordsTotal(Integer recordsTotal) {
        this.recordsTotal = recordsTotal;
    }

    public Integer getRecordsFiltered() {
        return recordsFiltered;
    }

    public void setRecordsFiltered(Integer recordsFiltered) {
        this.recordsFiltered = recordsFiltered;
    }

    public List<T> getData() {
        return data;
    }

    public void setData(List<T> data) {
        this.data = data;
    }
}

UserDO:

public class UserDO implements Comparable<UserDO> {
    /**
     * The id will use uuid
     */
    private String id;

    /**
     * This username should be applied with email
     */
    private String username;

    private String password;

    private int age;

    /**
     * True name
     */
    private String name;

    /**
     * Virtual name
     */
    private String nickname;

    public UserDO() {
    }

    public UserDO(String id, String username, String password, int age, String name, String nickname) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.age = age;
        this.name = name;
        this.nickname = nickname;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) {
            return true;
        }
        if (!(o instanceof UserDO)) {
            return false;
        }
        UserDO userDO = (UserDO) o;
        return id == userDO.id &&
                Objects.equals(username, userDO.username) &&
                Objects.equals(password, userDO.password) &&
                Objects.equals(age, userDO.age) &&
                Objects.equals(name, userDO.name) &&
                Objects.equals(nickname, userDO.nickname);
    }

    @Override
    public int hashCode() {
        return Objects.hash(id, username, password, age, name, nickname);
    }

    @Override
    public String toString() {
        return "UserDO{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", age='" + age + '\'' +
                ", name='" + name + '\'' +
                ", nickname='" + nickname + '\'' +
                '}';
    }

    @Override
    public int compareTo(UserDO o) {
        return 0;
    }
}

大概就是这样了。

datatables jquery charset