Datatablesはjqueryフォームプラグインです。これは、高度なインタラクティブ機能を任意のHTMLテーブルに追加できる非常に柔軟なツールです。これは中国の公式ウェブサイトです：ここをクリックしてください
効果画像：
もちろん、関数の追加などの関数のアイコンはフォント素晴らしいプラグインです。詳細については、公式Webサイトをクリックしてください：
ここをクリックしてください
このデモはサーバー側に基づいており、検索およびページング機能もバックエンドデータに基づいています。ここではキーコードのみがリストされています。特定の状況はバックエンドコードに応じて調整する必要があります。
1.jspページ：テーブルのcssは引用するだけでよく、すべて組み込みです。
<body>
<table id="userTable" class="display" border="1px">
<thead>
<tr>
<th>user_id</th>
<th>user_name</th>
<th>user_gender</th>
<th>user_email</th>
<th>user_phone</th>
<th>user_address</th>
<th>user_birthday</th>
<th>role_name</th>
<th>department_name</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th colspan="9"><a id="addBtn" href="javascript:void(0)"
class="btn btn-mini" title="添加"><i class="fa fa-plus"></i></a> <a
id="editBtn" href="javascript:void(0)" class="btn btn-mini"
title="编辑"><i class="fa fa-edit"></i></a> <a id="deleteBtn"
href="javascript:void(0)" class="btn btn-mini" title="删除"><i
class="fa fa-trash"></i></a> <a id="refreshBtn"
href="javascript:void(0)" class="btn btn-mini" title="刷新"><i
class="fa fa-refresh"></i></a></th>
</tr>
</tfoot>
</table>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.コントローラーコアコード：
start：0から始まる現在のデータリストの開始位置を参照します。この例では、最初のページは0から始まり、2番目のページは3から始まります
。length：に表示されるデータ行を参照します。この例のように、現在のページ番号は3です
。DataTableSearch：それ自体でカプセル化されたデータは、値や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：現在の検索ボックスに入力された値です。
正規表現：正規表現を使用してクエリを実行できます。
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);
}
}特定のコードはデモに掲載されますが、DataTablesのサーバー側での使用に関するキーコードは掲載されています。