大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍springMVC+velocity如何实现Datatables局部刷新分页方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联成立与2013年,是专业互联网技术服务公司,拥有项目成都网站建设、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元顺义做网站,已为上家服务,为顺义各地企业和个人服务,联系电话:13518219792
因为项目中之前的模块用的分页插件是Datatables,很方便,但是新做的模块表格中的布局有变化,Datatables插件满足不了了。为了风格的统一,同时也不希望查询参数再传递回显在页面上,所以就采用局部刷新分页的实现方案。
实现方案是这样的,将表格部分提取出来,用来作为页面局部刷新的部分,文件名为list-data.vm
userName | age |
---|---|
$!{data.userName} | $!{data.sex} |
其中的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}项#end
pageUtil是写的velocity toolbox的一个工具类,用来仿Datatables分页条的分页页码显示的逻辑:
public class PageUtil { public static LinkedListrange(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; } }
而这段逻辑是从Datatables的js源码中找到的,我将其转化为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我将页面的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()})其中pageSuccess参数是用来在ajax返回数据成功后,需要做的一些操作。
以上是“springMVC+velocity如何实现Datatables局部刷新分页方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享标题:springMVC+velocity如何实现Datatables局部刷新分页方法
标题路径:http://dzwzjz.com/article/isjpes.html