Datatables 基於Java的伺服器模式
阿新 • • 發佈：2019-02-15
Datatables是一款jquery表格外掛。它是一個高度靈活的工具，可以將任何HTML表格新增高階的互動功能。這是中文官網：點選這裡
效果圖：
當然比如新增功能等功能的圖示是用的font-awesome外掛,詳情請戳官網：
點選這裡
這個demo是基於伺服器端的，搜尋和分頁功能也是基於後臺返回資料，這裡只列出關鍵程式碼，具體情況需要根據你的後臺程式碼再調整。
1.jsp頁面：表格的css只需要引用就可以了，都是自帶的。
<body>
<table id="userTable" class="display" border="1px">
<thead 2.表格js程式碼：
render：在列上處理資料的函式，可以再次自定義顯示內容。這裡將渲染時間，將後臺的毫秒數轉換成相應日期;根據id對映相應的角色名，部門名。
$(document).ready(function() {
loadUserData();
});
function loadUserData() {
$("#userTable").DataTable({
ajax : {
url : "getUserList.do",
type : "get"
},
columns : [
{"data":"user_id"},
{"data":"user_name"},
{"data":"user_gender"},
{"data":"user_email"},
{"data":"user_phone"},
{"data":"user_address"},
{"data":"user_birthday",
render:function(data,type,full,meta){
return toIsoDateTime(data);
}
},
{"data":"role_id",
render:function(data,type,full,meta){
return toRoleName(data);
} },
{"data":"department_id",
render:function(data,type,full,meta){
return toDepartmentName(data);
} },
],
language:{
"url":"js/zh-CN.txt"
},
ordering:true,
orderMulti:false,
pageLength:3,
pagingType:"full_numbers",
processing:true,
searching:true,
serverSide:true,
order:[[0,"asc"]]
});
}
3.國際化指令碼：由於預設語言英語，所以需要轉化成漢語
{
"lengthMenu":"每頁顯示_MENU_條記錄",
"info":"當前顯示第_START_至_END_條記錄(總記錄數_TOTAL_條)",
"infoFiltered":"",
"infoEmpty":"總記錄數 0",
"search":"搜尋",
"processing":"載入中...",
"emptyTable":"無資料",
"paginate":{
"first":"第一頁",
"previous":"上一頁",
"next":"下一頁",
"last":"最後一頁"
}
}4.common.js：用來轉換資料，方便前端展示
var toIsoDateTime=function(timeMills){
if(timeMills==0){
return "-";
}
var newDate=new Date(timeMills);
return newDate.toLocaleDateString();
};
var toRoleName = function(data) {
var roleName = new Array("總經理","副總經理","組長","普通員工");
switch(data) {
case 1:return roleName[0];
case 2:return roleName[1];
case 3:return roleName[2];
case 4:return roleName[3];
default:return "";
}
};
var toDepartmentName = function(data) {
var departmentName = new Array("研發部","IT部","HR","銷售");
switch(data) {
case 1:return departmentName[0];
case 2:return departmentName[1];
case 3:return departmentName[2];
case 4:return departmentName[3];
default:return "";
}
};
5.controller核心程式碼：
start:是指資料的當前列表的起始位置，從0開始，本例第一頁開始是0，第二頁開始是3.
length:是指當前一頁展示的資料行數，如本例就是3.
DataTableSearch ：自己封裝的用來封裝查詢的資料，包含value和regex。
這裡的分頁使用pageHelper外掛實現，稍後會貼出該外掛的使用方法。
pageHelper github地址：點選這裡
@RequestMapping(value="/getUserList.do")
@ResponseBody
public HttpEntity<?> getUserList(Integer start, Integer length, DataTableSearch search) {
//得到分頁物件
PageInfo<User> users = userService.getAllUserRoleDep(start/length+1, length);
//從分頁物件獲得所有user list
List<User> userList = users.getList();
//根據使用者名稱模糊查詢得到查詢後的user list
List<User> usersSearch = userService.getAllUserRoleDepByName(search.getSearch().getValue());
//包裝entity物件為DTO物件
List<UserDTO> userDTOs = CommonUtil.UserToDTO(userList);
List<UserDTO> userSearchDTOs = CommonUtil.UserToDTO(usersSearch);
JSONObject jsonObject = new JSONObject();
//搜尋時
if ("" != search.getSearch().getValue()) {
jsonObject = CommonUtil.putDataToJson(userSearchDTOs,userSearchDTOs.size(),userSearchDTOs.size());
} else {
jsonObject = CommonUtil.putDataToJson(userDTOs,users.getTotal(),users.getTotal());
}
return new ResponseEntity<Object>(jsonObject.toString(), HttpStatus.OK);
}
6.DataTableSearch查詢類：
value：是當前搜尋框輸入的值。
REGEX ：可以使用正則表示式來查詢。
public class DataTableSearchMap extends HashMap<String, String> {
private static final long serialVersionUID = -3060397928148553737L;
private static final String VALUE = "value";
private static final String REGEX = "regex";
public DataTableSearchMap() {
put(VALUE, "");
put(REGEX, "");
}
public String getValue() {
return get(VALUE);
}
public String getRegex() {
return get(REGEX);
}
}具體程式碼會在demo中貼出來，但是DataTables的服務端用法的關鍵程式碼已經貼出來了。