前言
觉得Datatables的中文文档写的太差劲了,开发手册和文档都是很不友好,demo也不够完善,不适合直接想使用的人来看, 需要用过一段时间之后再来看可能才会有柳暗花明的发现,不然就有点不明所以的感觉。但是这个插件本身还是挺不错的,对于报表的支持比较好。
正文
我定义了一个User对象,现在需要在某个页面上展示一些数据,这个页面就是下面的html(不好意思作为java开发者, 我还是使用了jsp),
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
首页
id
username
password
age
name
nickname
Row 1 Data 1
Row 1 Data 2
Row 1 Data 1
Row 1 Data 2
Row 1 Data 1
Row 1 Data 2
就是一个简单的六列的表格, 不用过多的解释了, 但是这里有个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 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;
}
}
大概就是这样了。