springMVC+velocityはDatablesの局部をまねることを実現して改ページの方法を更新します。
プロジェクトの中で前のモジュール用の改ページプラグインはDatablesなので、便利ですが、新しく作ったモジュールテーブルのレイアウトが変わって、Datablesプラグインが満足できなくなりました。スタイルの統一のために、パラメータを調べてからページに戻りたくないので、部分的にページを刷新する実現案を採用します。
インプリメンテーションは、フォーム部分を抽出し、ページ部分のリフレッシュ部分として使用し、ファイル名をlist-data.vmとする。
macroの部分は以下の通りです
ここで話してもよく分かりません。コード雲付きのgit住所:http://git.oschina.net/ivwpw/pagenation
データベースからデータを挿入する部分は作られていませんが、Controllerでページに必要なデータをシミュレーションしました。
以上のこのスプリングMVC+velocityはDatatablesの局部をまねて改ページする方法を実現します。つまり、小編集はみんなに共有する内容です。参考にしてもらいたいです。どうぞよろしくお願いします。
インプリメンテーションは、フォーム部分を抽出し、ページ部分のリフレッシュ部分として使用し、ファイル名をlist-data.vmとする。
<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は、ベースの改ページバーと改ページバーの表示ロジックを行うために定義されたマクロです。pageオブジェクトは、ajaxが返しを要求する改ページデータである。ajax要求ごとに、改ページデータを検索し、list-data.vm対応するビューのModelAndViewオブジェクトにデータを入れて、ModelAndViewオブジェクトに戻り、この部分をホームページの表のある部分に追加します。macroの部分は以下の通りです
#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のツール類で、Datablesのページ番号の表示を真似するための論理です。
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;
}
}
このロジックはDatablesのjsソースから見つけました。それをjavaコードに変えます。Datablesソースの部分コードは以下の通りです。
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;
}
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要求の改ページデータをパッケージ化しました。
/**
*
*/
//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;
}
ホームページで呼び出す:
<!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でページに必要なデータをシミュレーションしました。
以上のこのスプリングMVC+velocityはDatatablesの局部をまねて改ページする方法を実現します。つまり、小編集はみんなに共有する内容です。参考にしてもらいたいです。どうぞよろしくお願いします。