springMVC+velocity实现仿Datatables局部刷新分页方法

<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}) 

#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 

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;  } } 

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;  }; 

/**  *  */ //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>