jQuery Datatable 实用简单实例
88324358 2018-05-05
来自：http://sgyyz.blog.51cto.com/5069360/1408251
目标：
使用jQueryDatatable构造数据列表，并且增加或者隐藏相应的列，已达到数据显示要求。同时，jQueryDatatable强大的功能支持：排序，分页，搜索等。
QueryDatatable能良好支持数据完全加载到本地后构建数据列表，排序、分页、搜索等功能就会自带，不需要我们去关心，在此主要说明通过后台动态的加载数据，已达到在大数据面前提高效率的效果。
1.通过后台进行分页
2.通过后台进行排序
3.通过后台进行搜索
具体使用方法：
1.首先构建我们需要的数据列表，以及页面显示表格。
1
2
3
4
5
6
7
8
9
10
<tableid="datatable"width="100%"border="1">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>Operation</th>
</tr>
<thead>
</table>
表格建立很简单，只需用将表格定义好id，以及表头定义好。
2.我们可以到jQueryDatatable官网上去下载一份jQuery和jQueryDatatable的js库。https://datatables.net/examples/server_side/simple.html。
wKiom1Nq7d3BrrQmAACVHW5gAbY810.jpg
3.然后将这两个文件引入到页面文件中，注意jQuery的库一定要在最前面，因为页面加载的有顺序，保证后面的扩展库能使用到jQuery。同时，请下载最新的jQueryDatatable版本，因为它的写法以及参数更加简洁，功能更加多。【注：参数区别会在附录写明】
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"<ahref='/update?id="+data+"'>Update</a>";
}
}
]
});
});
targets：表示具体需要操作的目标列，下标从0开始
data:表示我们需要的某一列数据对应的属性名
render:返回需要显示的内容。在此我们可以修改列中样式，增加具体内容
属性列表：data，之前属性定义中对应的属性值
type，未知
full,全部数据值可以通过属性列名获取
具体效果图如下：
wKiom1Nq712jvx_1AADkJifD5bc689.jpg
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
===============RequestParamerters================
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
===============RequestParamerters================
其中有用的数据就是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
/**
*Thismethodincludesthesearch,sort,pagination
*@parampageSize
*@paramstartRecord
*@paramsortColumn
*@paramsortDir
*@paramsearchValue
*@return
*/
publicList<Data>loadDataList(intpageSize,intstartRecord,StringsortColumn,StringsortDir,StringsearchValue){
List<Data>results=newArrayList<Data>();
StringBuffersql=newStringBuffer("select*fromdata");
//forsearch
String[]columnsName={"id","firstName","lastName"};
booleansearchAble=false;
if(searchValue!=null&&!"".equals(searchValue)){
sql.append("where");
searchAble=true;
}
if(searchAble){
StringBuffertemp=newStringBuffer();
for(Stringcolumn:columnsName){
temp.append(column+"like'%"+searchValue+"%'or");
}
sql.append(temp.substring(0,temp.length()-3));
}
//fororder
sql.append("orderby"+sortColumn+""+sortDir+"");
//forpagination
sql.append("limit?,?");
System.out.println(sql.toString());
try{
stmt=conn.prepareStatement(sql.toString());
stmt.setInt(1,startRecord);
stmt.setInt(2,startRecord+pageSize);
ResultSetrs=stmt.executeQuery();
while(rs.next()){
Datadata=newData();
data.setId(rs.getInt(1));
data.setFirstName(rs.getString(2));
data.setLastName(rs.getString(3));
results.add(data);
}
}catch(SQLExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
returnresults;
}
DAO层中，统计代码类似，只用把分页和排序的SQL拼接去掉即可。
我们需要将我们的数据转换成JSON返回给前端，并且还要显示总记录数，过滤后总记录数。因此我们需要一个统一的类来将这些数据进行封装。由于在一个系统中不只一个对象需要展示到前端，因此统一的做一个为datatable封装类。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
packagecom.web.vo;
importjava.util.List;
/**
*ThisVOusedtogeneratetheJSONdatafordatatable,sopleaseensurethattheattributenameiscorrect.
*Ifyouwanttodefinethefieldsnamebyyourself,pleasevisit:https://datatables.net
*@authortroyyang
*
*@param<T>
*/
publicclassDataVO<T>{
privateintdraw;//Clientrequesttimes
privateintrecordsTotal;//Totalrecordsnumberwithoutconditions
privateintrecordsFiltered;//Totalrecordsnumberwithconditions
privateList<T>data;//Thedataweshoulddisplayonthepage
//getterandsettermethod
}
万事具备，只欠前后交互代码。此处使用最简单的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
//Forpagination
intpageSize=10;
intstartRecord=0;
Stringsize=request.getParameter("length");
if(!"".equals(size)&&size!=null){
pageSize=Integer.parseInt(size);
}
StringcurrentRecord=request.getParameter("start");
if(!"".equals(currentRecord)&¤tRecord!=null){
startRecord=Integer.parseInt(currentRecord);
}
//Forsortable
StringsortOrder=request.getParameter("order[0][column]");
StringsortDir=request.getParameter("order[0][dir]");
System.out.println("sortOrder:"+sortOrder);
System.out.println("sortDir:"+sortDir);
//Forsearch
StringsearchValue=request.getParameter("search[value]");
intcount=0;
List<Data>results=newArrayList<Data>();
count=dao.count();
results=dao.loadDataList(pageSize,startRecord,columnsName[Integer.parseInt(sortOrder)],sortDir,searchValue);
DataVO<Data>result=newDataVO<Data>();
result.setDraw(Integer.parseInt(request.getParameter("draw")==null?"0"
:request.getParameter("draw"))+1);
result.setData(results);
result.setRecordsTotal(count);
result.setRecordsFiltered(count);
Gsongson=newGson();
Stringoutput=gson.toJson(result);
System.out.println("OutputJSON:\n"+output);
PrintWriterout=response.getWriter();
out.write(output);
out.flush();
out.close();
附录：
使用jQueryDatatable1.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
===============RequestParamerters================
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
===============RequestParamerters================
更过特性，持续更新......
