微客导航 » 文章资讯 » springMVC+velocity实现仿Datatables局部刷新分页方法

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

2023-09-16 12:27:07 181

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

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




userName
age



#foreach($datain$!{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($fooin$numbers) #if($foo==-999) … #else $foo #end #end 下页末页到第页确认 #end

#end

pageUtil是写的velocitytoolbox的一个工具类，用来仿Datatables分页条的分页页码显示的逻辑：

publicclassPageUtil{

publicstaticLinkedListrange(Integerlen,Integerstart){
LinkedListout=newLinkedList<>();
Integerend;

if(start==null){
start=0;
end=len;
}

else{
end=start;
start=len;
}

for(inti=start;inumbers(Integerpage,Integerpages){
LinkedListnumbers=newLinkedList<>();
Integerbuttons=7;
Integerhalf=buttons/2;

if(pages<=buttons){
numbers=range(0,pages);
}
elseif(page<=half){
numbers=range(0,buttons-2);
numbers.add(-1000);
numbers.add(pages-1);
}
elseif(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);
}
Listres=newArrayList<>();
for(Integerinteger:numbers){
res.add(integer+1);
}
returnres;
}
}

而这段逻辑是从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);
}
elseif(page<=half){
numbers=_range(0,buttons-2);
numbers.push('ellipsis');
numbers.push(pages-1);
}
elseif(page>=pages-1-half){
numbers=_range(pages-(buttons-2),pages);
numbers.splice(0,0,'ellipsis');//nounshiftinie6
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';
returnnumbers;
}

var_range=function(len,start)
{
varout=[];
varend;

if(start===undefined){
start=0;
end=len;
}
else{
end=start;
start=len;
}

for(vari=start;i
我将页面的ajax请求分页的数据做了封装：
/**
*
*/
//macro分页跳页调用方法，调用的页面需要提供goPage(redirectpage)方法
functionjumpPage(totalPage){
varredirectpage=$("#changePage").val();
if(redirectpage==""){
$("#changePage").focus();
}else{
varrex=/^\d+$/;
if(!rex.test(redirectpage)){
alert("页码输入有误，只能输入不大于总页数的正整数");
}else{
varpageNo=parseInt(redirectpage);
if(pageNo<=0||pageNo>totalPage){
alert("页码输入有误，只能输入不大于总页数的正整数");
}else{
goPage(redirectpage)
}
}
}
}

$.fn.pagenation=function(options){

//默认参数
vardefaults={
url:"",
data:{},//参数
pageNo:1,//页码
pageSize:10,//页面大小
pageSuccess:{}//分页数据成功返回的回调函数
}
var_self=$(this);
options=$.extend(defaults,options);
varajaxData={
"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(typeofoptions.pageSuccess=='function'){
options.pageSuccess();
}
},
error:function(){
alert("操作失败");
}
});
};

this.init=function(){
this.fnDraw(1);
returnthis;
}

returnthis;

}
在主页面调用：




Inserttitlehere
#set($ctx=${request.getContextPath()})

varpagenation=$("#pageDiv").pagenation({ url:"${ctx}/listData.do", pageSize:20, data:function(data){ $("#searchForm[name]").each(function(i,n){ data[$(n).attr('name')]=n.value; }); returndata; }, pageSuccess:function(){ } }).init(); functiongoPage(pageNo){ pagenation.fnDraw(pageNo); }

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

这里说的也不太明白，附上码云的git地址：http://git.oschina.net/ivwpw/pagenation

其中并没有做从数据库插数据的部分，只是在Controller中模拟了页面需要的数据。

以上这篇springMVC+velocity实现仿Datatables局部刷新分页方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐