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

这篇文章主要介绍springMVC+velocity如何实现Datatables局部刷新分页方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联成立与2013年，是专业互联网技术服务公司，拥有项目成都网站建设、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元顺义做网站,已为上家服务,为顺义各地企业和个人服务,联系电话:13518219792

因为项目中之前的模块用的分页插件是Datatables，很方便，但是新做的模块表格中的布局有变化，Datatables插件满足不了了。为了风格的统一，同时也不希望查询参数再传递回显在页面上，所以就采用局部刷新分页的实现方案。

实现方案是这样的，将表格部分提取出来，用来作为页面局部刷新的部分，文件名为list-data.vm

 
  
  
  userName 
  age 
  
  
  
 #foreach($data in $!{page.list}) 
  
  $!{data.userName} 
  $!{data.sex} 
  
 #end 
  
 
#pageNation($!{page})

其中的pageNation是定义的一个宏（macro），用来做底部的分页条和分页条的显示逻辑。page对象是ajax请求返回的分页数据。每一次ajax请求，查询出分页数据，将数据放入list-data.vm所对应的视图的ModelAndView对象，然后返回ModelAndView对象，将这一部分追加到主页面表格所在的部分。

macro部分如下：

#macro(pageNation $data) 
 #if(!$data.list.size() or $data.list.size() == 0) 
 
未查询到记录

#end #if($data.list.size() and $data.list.size() > 0) 显示第 $!{data.startRow} 至 $!{data.endRow} 项结果，共 $!{data.total}项

#set($prevPage = ${data.prePage}) #set($nextnPage = ${data.nextPage}) 首页上页 #set($temp = ${data.pageNum} - 1) #set($numbers = $!{pageUtil.numbers($temp, $data.pages)}) #foreach($foo in $numbers) #if($foo == -999) … #else $foo #end #end 下页末页到第页确认 #end

public class PageUtil { public static LinkedList range(Integer len,Integer start) { LinkedList out = new LinkedList<>(); Integer end; if (start == null ) { start = 0; end = len; } else { end = start; start = len; } for (int i=start ; i numbers (Integer page,Integer pages) { LinkedList 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 res = new ArrayList<>(); for (Integer integer : numbers) { res.add(integer+1); } return res; } }

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

我将页面的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; 
 
}

在主页面调用：

 
 
 
 
Insert title here 
#set($ctx = ${request.getContextPath()}) 
 
  
  
  
 
 
  
  
  
  
 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); 
 }

其中pageSuccess参数是用来在ajax返回数据成功后，需要做的一些操作。

以上是“springMVC+velocity如何实现Datatables局部刷新分页方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

新闻名称：springMVC+velocity如何实现Datatables局部刷新分页方法
本文路径：http://cqcxhl.cn/article/isjpes.html