快捷導航

springMVC+velocity實現(xiàn)仿Datatables局部刷新分頁方法

更新時間：2018年02月10日 10:14:21 作者：kusedexingfu

下面小編就為大家分享一篇springMVC+velocity實現(xiàn)仿Datatables局部刷新分頁方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

因為項目中之前的模塊用的分頁插件是Datatables，很方便，但是新做的模塊表格中的布局有變化，Datatables插件滿足不了了。為了風格的統(tǒng)一，同時也不希望查詢參數(shù)再傳遞回顯在頁面上，所以就采用局部刷新分頁的實現(xiàn)方案。

實現(xiàn)方案是這樣的，將表格部分提取出來，用來作為頁面局部刷新的部分，文件名為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是定義的一個宏（macro），用來做底部的分頁條和分頁條的顯示邏輯。page對象是ajax請求返回的分頁數(shù)據(jù)。每一次ajax請求，查詢出分頁數(shù)據(jù)，將數(shù)據(jù)放入list-data.vm所對應(yīng)的視圖的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} 項結(jié)果，共 $!{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分頁條的分頁頁碼顯示的邏輯：

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源碼中找到的，我將其轉(zhuǎn)化為java代碼。Datatables源碼的該部分代碼如下

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請求分頁的數(shù)據(jù)做了封裝：

/** 
 * 
 */ 
//macro分頁跳頁調(diào)用方法，調(diào)用的頁面需要提供goPage(redirectpage)方法 
function jumpPage(totalPage) { 
 var redirectpage = $("#changePage").val(); 
 if(redirectpage == ""){ 
 $("#changePage").focus(); 
 }else{ 
 var rex = /^\d+$/; 
 if(!rex.test(redirectpage)){ 
  alert("頁碼輸入有誤，只能輸入不大于總頁數(shù)的正整數(shù)"); 
 }else{ 
  var pageNo = parseInt(redirectpage); 
  if(pageNo <= 0 || pageNo > totalPage){ 
  alert("頁碼輸入有誤，只能輸入不大于總頁數(shù)的正整數(shù)"); 
  }else{ 
  goPage(redirectpage) 
  } 
 } 
 } 
} 
 
$.fn.pagenation = function(options) { 
 
 //默認參數(shù) 
 var defaults={ 
  url:"", 
  data:{},//參數(shù) 
  pageNo:1,//頁碼 
  pageSize:10,//頁面大小 
  pageSuccess:{}//分頁數(shù)據(jù)成功返回的回調(diào)函數(shù) 
 } 
 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; 
 
}

在主頁面調(diào)用：

<!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參數(shù)是用來在ajax返回數(shù)據(jù)成功后，需要做的一些操作。

這里說的也不太明白，附上碼云的git地址：http://git.oschina.net/ivwpw/pagenation

其中并沒有做從數(shù)據(jù)庫插數(shù)據(jù)的部分，只是在Controller中模擬了頁面需要的數(shù)據(jù)。

以上這篇springMVC+velocity實現(xiàn)仿Datatables局部刷新分頁方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: