在做項目的過程中，在開發前端中，很多js代碼都是自己寫的，雖然jquery給我提供了很大的便利，但是依然無法提高代碼的效率。特別是前端列表這塊，相比較而言是比較複雜的，這段時間內，自己想網上面有沒有這方面插件。找了一下，發現不少，其中就有Datatables，他是基於jquery的。而且是純js和CSS的代碼，比較方便。看了datatables的官網，發現對PHP支持比較好，java的例子不多。我研究半天，加上借鑑別人的一些代碼和思路。自己先寫了一個簡單的Spring+Datatables分頁。比較簡單。主要我分這幾個部分。
1、主頁：datatable.jsp。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/jsp/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<title>Insert title here</title>
</head>
<body class="dt-example">
<div>
<input type="text" id="level1">
<input type="button" onclick="search1()" value="查詢">
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>名字</th>
<th>編號</th>
<th>小尾巴</th>
<th>操作</th>
</tr>
</thead>
</table>
</body>
<script type="text/javascript">
$(document).ready(function() {
table = $('#example').DataTable( {
"pagingType": "simple_numbers",//設置分頁控件的模式
searching: false,//屏蔽datatales的查詢框
aLengthMenu:[2],//設置一頁展示10條記錄
"bLengthChange": false,//屏蔽tables的一頁展示多少條記錄的下拉列表
"oLanguage": { //對錶格國際化，添加各種樣式
"sLengthMenu": "每頁顯示 _MENU_條",
"sZeroRecords": "沒有找到符合條件的數據",
"sProcessing": "正在玩命加載中。。。。。。",
"sInfo": "當前第 _START_ - _END_ 條 共計 _TOTAL_ 條",
"sInfoEmpty": "木有記錄",
"sInfoFiltered": "(從 _MAX_ 條記錄中過濾)",
"sSearch": "搜索：",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "前一頁",
"sNext": "下一頁",
"sLast": "尾頁"
}
},
"processing": true, //打開數據加載時的等待效果
"serverSide": true,//打開後臺分頁
"ajax": {
"url": "${ctx}/users/findByPage",
"dataSrc": "aaData",
"data": function ( d ) {
var level1 = $('#level1').val();
//添加額外的參數傳給服務器
d.extra_search = level1;
}
},
"columns": [
{ "data": "roleid" },
{ "data": "userid" },
{ "data": "password" },
],
"columnDefs" : [ {
// 定義操作列,######以下是重點########
"targets" : 3,//操作按鈕目標列
"data" : null,
"render" : function(data, type,row) {
var id = '"' + row.level + '"';
var html = "<a href='javascript:void(0);' class='delete btn btn-default btn-xs' ><i class='fa fa-times'></i> 查看</a>"
html += "<a href='javascript:void(0);' class='up btn btn-default btn-xs'><i class='fa fa-arrow-up'></i> 編輯</a>"
html += "<a href='javascript:void(0);' onclick='deleteThisRowPapser("+ id + ")' class='down btn btn-default btn-xs'><i class='fa fa-arrow-down'></i> 刪除</a>"
return html;
}
} ],
});
} );
function search1()
{
table.ajax.reload();
}
function deleteThisRowPapser(id){
alert("刪除==="+id)
}
</script>
</html>2、spring裏面的Controller層，Service層我就不貼，只是常規的sql。
package com.iuweb.demo.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import org.apache.log4j.Logger;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.iuweb.common.controller.BaseController;
import com.iuweb.common.model.Page;
import com.iuweb.common.model.Pagination;
import com.iuweb.demo.model.DataTableMode;
import com.iuweb.demo.model.DatatablesViewPage;
import com.iuweb.demo.model.Users;
import com.iuweb.demo.service.UsersService;
import com.iuweb.user.model.User;
@Controller
@RequestMapping(value = "/users")
@Scope("prototype")
public class UsersController extends BaseController{
private static final Logger logger = Logger.getLogger(UsersController.class);
@Resource
private UsersService usersService;
/**
* DataTable的分頁查詢Demo
*
* @author wangguan,
* @date 2017年10月13日 上午9:44:55,
* @version argType
*/
@RequestMapping(value = "/findByPage")
@ResponseBody
public DatatablesViewPage<Users> findByPage(HttpServletRequest request,
@RequestParam(value = "length", defaultValue = "3", required = false) int pageSize,
@RequestParam(value = "start", defaultValue = "0", required = false) int pagec) {
DatatablesViewPage<Users> view = new DatatablesViewPage<Users>();
Map params = super.inputParams(request);
/*// 獲取前臺額外傳遞過來的查詢條件
String extra_search = request.getParameter("extra_search");*/
int currentPage=(pagec/pageSize)+1;
Pagination pagination = new Pagination(pageSize, currentPage);
params.put("pagination", pagination);
List<Users> list = usersService.getAll(params);
/*Page page = new Page();
page.setCount(pagination.getCount());
page.setData(list);*/
/*// 隨便組織的查詢結果
List<DataTableMode> list = new ArrayList<DataTableMode>();
for (int i = 0; i < 22; i++) {
DataTableMode alarm = new DataTableMode();
alarm.setLevel(i);
alarm.setTotal(100L);
alarm.setLast_name("我的" + i + "號小尾巴");
list.add(alarm);
list.add(alarm);
}*/
view.setiTotalDisplayRecords(pagination.getCount());
view.setiTotalRecords(pagination.getCount());
view.setAaData(list);
return view;
}
}3、DatatablesViewPage.java
package com.iuweb.demo.model;
import java.util.List;
public class DatatablesViewPage<T> {
private List<T> aaData; //aaData 與datatales 加載的“dataSrc"對應
private int iTotalDisplayRecords;
private int iTotalRecords;
public DatatablesViewPage() {
}
public List<T> getAaData() {
return aaData;
}
public void setAaData(List<T> aaData) {
this.aaData = aaData;
}
public int getiTotalDisplayRecords() {
return iTotalDisplayRecords;
}
public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
this.iTotalDisplayRecords = iTotalDisplayRecords;
}
public int getiTotalRecords() {
return iTotalRecords;
}
public void setiTotalRecords(int iTotalRecords) {
this.iTotalRecords = iTotalRecords;
}
}4、BaseController.java
/**
* @(#)BaseAction.java Copyright 2016 Magingunion, Inc. All rights reserved.
*/
package com.iuweb.common.controller;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;
import java.util.Set;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.lang3.StringUtils;
public abstract class BaseController {
@SuppressWarnings({ "rawtypes", "unchecked" })
protected Map inputParams(HttpServletRequest request) {
Map params = new HashMap();
Map<String, String[]> map = request.getParameterMap();
Set<Entry<String, String[]>> set = map.entrySet();
Iterator<Entry<String, String[]>> it = set.iterator();
while (it.hasNext()) {
Entry<String, String[]> entry = it.next();
for (String i : entry.getValue()) {
if (StringUtils.isNotEmpty(i)) {
if (params.containsKey(entry.getKey())) {
i = i + ',' + params.get(entry.getKey());
params.put(entry.getKey(), i);
} else {
params.put(entry.getKey(), i);
}
}
}
}
return params;
}
}
5、Users.java
/**
* @(#)Users.java Copyright 2016 Magingunion, Inc. All rights reserved.
*/
package com.iuweb.demo.model;
import com.iuweb.common.model.BaseModel;
public class Users extends BaseModel {
private String userId;
private String password;
private String userName;
private String roleId;
public String getUserId() {
return userId;
}
public void setUserId(String userId) {
this.userId = userId;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getRoleId() {
return roleId;
}
public void setRoleId(String roleId) {
this.roleId = roleId;
}
}好了 ，基本的代碼就結束了，官網有更多的例子和說明。