因為項目中之前的模塊用的分頁插件是Datatables，很方便，但是新做的模塊表格中的布局有變化，Datatables插件滿足不了了。為了風格的統一，同時也不希望查詢參數再傳遞回顯在頁面上，所以就采用局部刷新分頁的實現方案。
實現方案是這樣的，將表格部分提取出來，用來作為頁面局部刷新的部分，文件名為list-data.vm
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<table class="table text-center table_acolor"> <thead> <tr> <th width="16%">userName</th> <th width="24%">age</th> </tr> </thead> <tbody> #foreach($data in $!{page.list}) <tr> <td width="16%">$!{data.userName}</td> <td width="24%">$!{data.sex}</td> </tr> #end </tbody> </table> #pageNation($!{page}) |
其中的pageNation是定義的一個宏（macro），用來做底部的分頁條和分頁條的顯示邏輯。page對象是ajax請求返回的分頁數據。每一次ajax請求，查詢出分頁數據，將數據放入list-data.vm所對應的視圖的ModelAndView對象，然后返回ModelAndView對象，將這一部分追加到主頁面表格所在的部分。
macro部分如下：
|
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
|
#macro(pageNation $data) #if(!$data.list.size() or $data.list.size() == 0) <div class="row DTTTFooter no-padding" style="height:40px; line-height:40px; text-align:center; font-size:14px;"> 未查詢到記錄 </div> #end #if($data.list.size() and $data.list.size() > 0) <div id="activityTable_info" class="dataTables_info" role="status" aria-live="polite">顯示第 $!{data.startRow} 至 $!{data.endRow} 項結果，共 $!{data.total}項</div> <div id="pagination" class="dataTables_paginate paging_full_numbers"> #set($prevPage = ${data.prePage}) #set($nextnPage = ${data.nextPage}) <a #if($data.pageNum ==1) class="paginate_button disabled" disabled="disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" #else class="paginate_button" pageNum="1" href="javascript:goPage(1)" rel="external nofollow" #end style="margin-left: 2px;" >首頁</a> <a #if($data.pageNum ==1) class="paginate_button disabled" disabled="disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" #else class="paginate_button" pageNum="$prevPage" href="javascript:goPage($prevPage)" rel="external nofollow" #end style="margin-left: 2px;" > 上頁 </a> #set($temp = ${data.pageNum} - 1) #set($numbers = $!{pageUtil.numbers($temp, $data.pages)}) #foreach($foo in $numbers) #if($foo == -999) <span>…</span> #else <a class="paginate_button #if($foo==${data.pageNum}) current #end" pageNum="$foo" #if($foo!=${data.pageNum}) href="javascript:goPage($foo)" rel="external nofollow" #end style="margin-left: 2px;" > $foo </a> #end #end <a #if($data.pageNum == $data.pages) class="paginate_button disabled" disabled="disabled" #else class="paginate_button" pageNum="$nextnPage" href="javascript:goPage($nextnPage)" rel="external nofollow" #end style="margin-left: 2px;" > 下頁 <a #if($data.pageNum == $data.pages) class="paginate_button disabled" disabled="disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" #else class="paginate_button" pageNum="$data.pages" href="javascript:goPage($data.pages)" rel="external nofollow" #end >末頁</a> 到第 <input id="changePage" class="margin text-center" type="text" maxpage="10" style="height:28px;line-height:28px;width:40px;"> 頁 <a id="dataTable-btn" class="btn btn-default shiny" href="javascript:jumpPage($data.pages);" rel="external nofollow" style="margin-bottom:5px">確認</a> #end </div> <div p_sortinfo="$!{data.orderBy}" p_isFirst=$!{data.isFirst} p_isLast=$!{data.isLast} p_currentpagenum="$!{data.pageNum}" p_totalsize="$!{data.total}" p_endrow="$!{data.endRow}" p_totalpagesnum="$!{data.pages}" p_pagesize="$!{data.pageSize}" p_startrow="$!{data.startRow}" style="display:none" class="paginator"></div> #end |
pageUtil是寫的velocity toolbox的一個工具類，用來仿Datatables分頁條的分頁頁碼顯示的邏輯：
|
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
|
public class PageUtil { public static LinkedList<Integer> range(Integer len,Integer start) { LinkedList<Integer> out = new LinkedList<>(); Integer end; if (start == null ) { start = 0; end = len; } else { end = start; start = len; } for (int i=start ; i<end ; i++ ) { out.add(i); } return out; } public static List<Integer> numbers (Integer page,Integer pages) { LinkedList<Integer> numbers = new LinkedList<>(); Integer buttons = 7; Integer half = buttons / 2; if (pages <= buttons ) { numbers = range( 0, pages ); } else if ( page <= half ) { numbers = range( 0, buttons-2 ); numbers.add(-1000); numbers.add( pages-1 ); } else if ( page >= pages - 1 - half ) { numbers = range( pages-(buttons-2), pages ); numbers.addFirst(-1000 ); //向頭放 numbers.addFirst(0 ); } else { numbers = range( page-1, page+2 ); numbers.add( -1000 ); numbers.add( pages-1 ); numbers.addFirst(-1000 ); numbers.addFirst(0 ); } List<Integer> res = new ArrayList<>(); for (Integer integer : numbers) { res.add(integer+1); } return res; } } |
而這段邏輯是從Datatables的js源碼中找到的，我將其轉化為java代碼。Datatables源碼的該部分代碼如下
|
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
|
function _numbers ( page, pages ) { var numbers = [], buttons = extPagination.numbers_length, half = Math.floor( buttons / 2 ), i = 1; if ( pages <= buttons ) { numbers = _range( 0, pages ); } else if ( page <= half ) { numbers = _range( 0, buttons-2 ); numbers.push( 'ellipsis' ); numbers.push( pages-1 ); } else if ( page >= pages - 1 - half ) { numbers = _range( pages-(buttons-2), pages ); numbers.splice( 0, 0, 'ellipsis' ); // no unshift in ie6 numbers.splice( 0, 0, 0 ); } else { numbers = _range( page-1, page+2 ); numbers.push( 'ellipsis' ); numbers.push( pages-1 ); numbers.splice( 0, 0, 'ellipsis' ); numbers.splice( 0, 0, 0 ); } numbers.DT_el = 'span'; return numbers; } |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
var _range = function ( len, start ) { var out = []; var end; if ( start === undefined ) { start = 0; end = len; } else { end = start; start = len; } for ( var i=start ; i<end ; i++ ) { out.push( i ); } return out; }; |
我將頁面的ajax請求分頁的數據做了封裝：
|
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
/** * */ //macro分頁跳頁調用方法，調用的頁面需要提供goPage(redirectpage)方法 function jumpPage(totalPage) { var redirectpage = $("#changePage").val(); if(redirectpage == ""){ $("#changePage").focus(); }else{ var rex = /^\d+$/; if(!rex.test(redirectpage)){ alert("頁碼輸入有誤，只能輸入不大于總頁數的正整數"); }else{ var pageNo = parseInt(redirectpage); if(pageNo <= 0 || pageNo > totalPage){ alert("頁碼輸入有誤，只能輸入不大于總頁數的正整數"); }else{ goPage(redirectpage) } } } } $.fn.pagenation = function(options) { //默認參數 var defaults={ url:"", data:{},//參數 pageNo:1,//頁碼 pageSize:10,//頁面大小 pageSuccess:{}//分頁數據成功返回的回調函數 } var _self = $(this); options = $.extend(defaults,options); var ajaxData = { "pageNo":options.pageNo, "pageSize":options.pageSize }; this.fnDraw = function(pageNo) { if (typeof (options.data) == 'function') { ajaxData = options.data(ajaxData); } else { ajaxData = $.extend(ajaxData,options.data); } if (pageNo != undefined) { ajaxData['pageNo'] = pageNo; } $.ajax({ url: options.url, async: false, type:"post", data: ajaxData, success: function(result,code,dd) { _self.html(result); if (typeof options.pageSuccess == 'function') { options.pageSuccess(); } }, error:function(){ alert("操作失敗"); } }); }; this.init = function() { this.fnDraw(1); return this; } return this; } |
在主頁面調用：
|
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
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> #set($ctx = ${request.getContextPath()}) <link rel="stylesheet" type="text/css" href="$ctx/assets/js/dataTables/jquery.dataTables.min.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="$ctx/assets/js/dataTables/css/jquery.dataTables_theme.css" rel="external nofollow" /> <script type="text/javascript" src="$ctx/assets/js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="$ctx/assets/js/macro.pagination.js"></script> </head> <body> <div class="dataTables_wrapper" id="pageDiv"> </div> <script type="text/javascript"> var pagenation = $("#pageDiv").pagenation({ url:"${ctx}/listData.do", pageSize:20, data:function (data) { $("#searchForm [name]").each(function(i, n){ data[$(n).attr('name')] = n.value; }); return data; }, pageSuccess:function(){ } }).init(); function goPage(pageNo) { pagenation.fnDraw(pageNo); } </script> </body> </html> |
其中pageSuccess參數是用來在ajax返回數據成功后，需要做的一些操作。
這里說的也不太明白，附上碼云的git地址：http://git.oschina.net/ivwpw/pagenation
其中并沒有做從數據庫插數據的部分，只是在Controller中模擬了頁面需要的數據。
以上這篇springMVC+velocity實現仿Datatables局部刷新分頁方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：http://blog.csdn.net/kusedexingfu/article/details/67641080
