原文出處:http://sgyyz.blog.51cto.com/5069360/1408251
目標：
使用jQuery Datatable構造數據列表，並且增加或者隱藏相應的列，已達到數據顯示要求。同時，jQuery Datatable強大的功能支持：排序，分頁，搜索等。
Query Datatable能良好支持數據完全加載到本地后構建數據列表，排序、分頁、搜索等功能就會自帶，不需要我們去關心，在此主要說明通過后台動態的加載數據，已達到在大數據面前提高效率的效果。
1. 通過后台進行分頁
2. 通過后台進行排序
3. 通過后台進行搜索
具體使用方法：
1. 首先構建我們需要的數據列表，以及頁面顯示表格。
|
1
2
3
4
5
6
7
8
9
10
|
<
table
id
=
"datatable"
width
=
"100%"
border
=
"1"
>
<
thead
>
<
tr
>
<
th
>ID</
th
>
<
th
>First Name</
th
>
<
th
>Last Name</
th
>
<
th
>Operation</
th
>
</
tr
>
<
thead
>
</
table
>
|
表格建立很簡單，只需用將表格定義好id，以及表頭定義好。
2. 我們可以到jQuery Datatable官網上去下載一份jQuery和jQuery Datatable的js庫。https://datatables.net/examples/server_side/simple.html。
3. 然后將這兩個文件引入到頁面文件中，注意jQuery的庫一定要在最前面，因為頁面加載的有順序，保證后面的擴展庫能使用到jQuery。同時，請下載最新的jQuery Datatable版本，因為它的寫法以及參數更加簡潔，功能更加多。【注：參數區別會在附錄寫明】
4. 編寫前端代碼。我們是要使用Ajax對后台進行請求，因此在配置datatable時，加上{"serverSide":true}，已保證頁面在加載時就請求后台，以及每次對datatable進行操作時也是請求后台。【附：如果想加上一點加載效果，可以增加{"processing": true}】。
配置請求后台URL：{"ajax": "load"}
5. 配置數據返回對應具體的列。在Datatable中，屬性columns用來配置具體列的屬性，包括對應的數據列名，是否支持搜索，是否顯示，是否支持排序等。根據上述頁面配置我們具體的列。如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$(document).ready(
function
() {
$(
"#datatable"
).dataTable({
"processing"
:
true
,
"serverSide"
:
true
,
"ajax"
:
"load"
,
"columns"
: [
{
"data"
:
"id"
,
"bSortable"
:
false
},
{
"data"
:
"firstName"
},
{
"data"
:
"lastName"
}
]
});
});
|
第一列ID，設置為不允許排序。也可以增加不顯示：{"visible": false}
6. 此時對於后台而言，返回的數據一定要按照一定規范。如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
{
"draw"
: 2,
"recordsTotal"
: 11,
"recordsFiltered"
: 11,
"data"
: [
{
"id"
: 1,
"firstName"
:
"Troy"
,
"lastName"
:
"Young"
},
{
"id"
: 2,
"firstName"
:
"Alice"
,
"lastName"
:
"LL"
},
{
"id"
: 3,
"firstName"
:
"Larry"
,
"lastName"
:
"Bird"
}
// ......
]
}
|
參數解釋：
draw:表示請求次數
recordsTotal:總記錄數
recordsFiltered:過濾后的總記錄數
data:具體的數據對象數組
7. 最后一列Operation，我們沒有任何數據，用來放我們的通用操作列，如修改鏈接。 Datatable提供了自定義列columnDefs屬性，他的值為數組對象，具體代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(document).ready(
function
() {
$(
"#datatable"
).dataTable({
"processing"
:
true
,
"serverSide"
:
true
,
"ajax"
:
"load"
,
"columns"
: [
{
"data"
:
"id"
,
"bSortable"
:
false
},
{
"data"
:
"firstName"
},
{
"data"
:
"lastName"
}
],
"columnDefs"
: [
{
"targets"
: [3],
"data"
:
"id"
,
"render"
:
function
(data, type, full) {
return
"<a href='/update?id="
+ data +
"'>Update</a>"
;
}
}
]
});
});
|
targets：表示具體需要操作的目標列，下標從0開始
data: 表示我們需要的某一列數據對應的屬性名
render:返回需要顯示的內容。在此我們可以修改列中樣式，增加具體內容
屬性列表：data， 之前屬性定義中對應的屬性值
type， 未知
full, 全部數據值可以通過屬性列名獲取
具體效果圖如下：
8. 我們再來看具體如何進行搜索、排序、分頁。由於只是為了做demo，因此使用最簡單的JDBC+Servlet的方式來實現。
首先我們來看，datatable給我們在做請求是傳遞過來的參數：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
=============== Request Paramerters ================
draw:
1
columns[
0
][data]: id
columns[
0
][name]:
columns[
0
][searchable]:
true
columns[
0
][orderable]:
true
columns[
0
][search][value]:
columns[
0
][search][regex]:
false
columns[
1
][data]: firstName
columns[
1
][name]:
columns[
1
][searchable]:
true
columns[
1
][orderable]:
true
columns[
1
][search][value]:
columns[
1
][search][regex]:
false
columns[
2
][data]: lastName
columns[
2
][name]:
columns[
2
][searchable]:
true
columns[
2
][orderable]:
true
columns[
2
][search][value]:
columns[
2
][search][regex]:
false
order[
0
][column]:
0
order[
0
][dir]: asc
start:
0
length:
10
search[value]:
search[regex]:
false
_:
1399345292266
=============== Request Paramerters ================
|
其中有用的數據就是start, length, order[0][column], order[0][dir], search[value]。具體參數意思：
start: 其實記錄位置
length:頁面顯示數量
order[0][column]: 因為是二維的表格，因此只有一維需要排序，所以order的下標未0. 該屬性表示第幾列需要排序。
order[0][dir]: 排序方式ASC | DESC
search[value]: search輸入框中的值
9. 這幾個屬性對后台進行排序、搜索、分頁很有用。【注：因為是二維表，並且只是對一列進行操作，自然就是一維的，所以order下標始終為1。以后操作二維表有待研究。】
首先來看包含這幾個功能的DAO層代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
/**
* This method includes the search, sort, pagination
* @param pageSize
* @param startRecord
* @param sortColumn
* @param sortDir
* @param searchValue
* @return
*/
public
List<Data> loadDataList(
int
pageSize,
int
startRecord, String sortColumn, String sortDir, String searchValue) {
List<Data> results =
new
ArrayList<Data>();
StringBuffer sql =
new
StringBuffer(
"select * from data "
);
// for search
String[] columnsName = {
"id"
,
"firstName"
,
"lastName"
};
boolean
searchAble =
false
;
if
(searchValue !=
null
&& !
""
.equals(searchValue)) {
sql.append(
"where "
);
searchAble =
true
;
}
if
(searchAble) {
StringBuffer temp =
new
StringBuffer();
for
(String column : columnsName) {
temp.append( column+
" like '%"
+ searchValue +
"%' or "
);
}
sql.append(temp.substring(
0
, temp.length() -
3
));
}
// for order
sql.append(
" order by "
+ sortColumn +
" "
+ sortDir +
" "
);
// for pagination
sql.append(
" limit ?,? "
);
System.out.println(sql.toString());
try
{
stmt = conn.prepareStatement(sql.toString());
stmt.setInt(
1
, startRecord);
stmt.setInt(
2
, startRecord + pageSize);
ResultSet rs = stmt.executeQuery();
while
(rs.next()) {
Data data =
new
Data();
data.setId(rs.getInt(
1
));
data.setFirstName(rs.getString(
2
));
data.setLastName(rs.getString(
3
));
results.add(data);
}
}
catch
(SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return
results;
}
|
DAO層中，統計代碼類似，只用把分頁和排序的SQL拼接去掉即可。
我們需要將我們的數據轉換成JSON返回給前端，並且還要顯示總記錄數，過濾后總記錄數。因此我們需要一個統一的類來將這些數據進行封裝。由於在一個系統中不只一個對象需要展示到前端，因此統一的做一個為datatable封裝類。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
package
com.web.vo;
import
java.util.List;
/**
* This VO used to generate the JSON data for data table, so please ensure that the attribute name is correct.
* If you want to define the fields name by yourself, please visit: https://datatables.net
* @author troyyang
*
* @param <T>
*/
public
class
DataVO<T> {
private
int
draw;
// Client request times
private
int
recordsTotal;
// Total records number without conditions
private
int
recordsFiltered;
// Total records number with conditions
private
List<T> data;
// The data we should display on the page
// getter and setter method
}
|
萬事具備，只欠前后交互代碼。此處使用最簡單的servlet。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
// For pagination
int
pageSize =
10
;
int
startRecord =
0
;
String size = request.getParameter(
"length"
);
if
(!
""
.equals(size) && size !=
null
) {
pageSize = Integer.parseInt(size);
}
String currentRecord = request.getParameter(
"start"
);
if
(!
""
.equals(currentRecord) && currentRecord !=
null
) {
startRecord = Integer.parseInt(currentRecord);
}
// For sortable
String sortOrder = request.getParameter(
"order[0][column]"
);
String sortDir = request.getParameter(
"order[0][dir]"
);
System.out.println(
"sortOrder: "
+ sortOrder);
System.out.println(
"sortDir: "
+ sortDir);
// For search
String searchValue = request.getParameter(
"search[value]"
);
int
count =
0
;
List<Data> results =
new
ArrayList<Data>();
count = dao.count();
results = dao.loadDataList(pageSize, startRecord, columnsName[Integer.parseInt(sortOrder)], sortDir, searchValue);
DataVO<Data> result =
new
DataVO<Data>();
result.setDraw(Integer.parseInt(request.getParameter(
"draw"
) ==
null
?
"0"
: request.getParameter(
"draw"
)) +
1
);
result.setData(results);
result.setRecordsTotal(count);
result.setRecordsFiltered(count);
Gson gson =
new
Gson();
String output = gson.toJson(result);
System.out.println(
"Output JSON: \n"
+ output);
PrintWriter out = response.getWriter();
out.write(output);
out.flush();
out.close();
|
附錄：
使用jQuery Datatable1.10之前的版本，必須使用sAjaxSource進行請求，但是請求數據和現在版本的請求數據不同，如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
=============== Request Paramerters ================
sEcho:
1
iColumns:
4
sColumns: ,,,
iDisplayStart:
0
iDisplayLength:
10
mDataProp_0: id
sSearch_0:
bRegex_0:
false
bSearchable_0:
true
bSortable_0:
false
mDataProp_1: firstName
sSearch_1:
bRegex_1:
false
bSearchable_1:
true
bSortable_1:
true
mDataProp_2: lastName
sSearch_2:
bRegex_2:
false
bSearchable_2:
true
bSortable_2:
true
mDataProp_3: id
sSearch_3:
bRegex_3:
false
bSearchable_3:
true
bSortable_3:
true
sSearch:
bRegex:
false
iSortCol_0:
0
sSortDir_0: asc
iSortingCols:
1
_:
1399515247114
=============== Request Paramerters ================
|