Springmvc 結(jié)合 jquery插件Datatables的使用（基于java支持的服務(wù)器處理）

覺得Datatables的中文文檔寫的太差勁了，開發(fā)手冊和文檔都是很不友好，demo也不夠完善，不適合直接想使用的人來看， 需要用過一段時(shí)間之后再來看可能才會有柳暗花明的發(fā)現(xiàn)，不然就有點(diǎn)不明所以的感覺。但是這個(gè)插件本身還是挺不錯(cuò)的，對于報(bào)表的支持比較好。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    
    
    
    
    

就是一個(gè)簡單的六列的表格， 不用過多的解釋了， 但是這里有個(gè)id=“table_id_example” 需要用的到， 還有一點(diǎn)需要注意， datatables兼容bootstrap。

然后應(yīng)該要看js了， 我是這樣寫的：

$(function () {
    $("#table_id_example").DataTable({
        draw: 1,//標(biāo)識可以避免因ajax的異步性而導(dǎo)致展示錯(cuò)誤數(shù)據(jù)
        recordsFiltered: 10,//過濾后數(shù)據(jù)總條數(shù)
        recordsTotal: 10,//過濾前數(shù)據(jù)總條數(shù)
        scrollY: 300,//滾動條高度
        paging: true,//是否支持分頁
        serverSide: true,//是否支持服務(wù)器處理
        "bStateSave": true,// 狀態(tài)保存
        "processing": true, // 打開數(shù)據(jù)加載時(shí)的等待效果
        "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" }
        ]
    });
});

這里可以重新制定列名，也要定義數(shù)據(jù)值， 還要定義請求， 參數(shù)在注釋中寫了。

下面應(yīng)該寫服務(wù)端了，這呢：

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

    /**
     * Method Description:
     * 〈隨機(jī)獲取表格數(shù)據(jù)〉
     *
     * @param:      null
     * @return:     表格數(shù)據(jù)以String格式返回， 返回json
     * @author:     Andy
     * @date:       3/30/2018 4:46 PM
     */
    @RequestMapping(value = "/getTableData", method = RequestMethod.GET)
    public String getTableData() {
        List users = new ArrayList();
        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 data = new ResultData();
        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 {

    private Integer draw;
    private Integer recordsTotal;
    private Integer recordsFiltered;
    private List 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 getData() {
        return data;
    }

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

UserDO:

public class UserDO implements Comparable {
    /**
     * 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;
    }
}

大概就是這樣了。