Skip to content

feilongDisplay pager template

Jump to bottom
feilong edited this page May 22, 2020 · 1 revision

本节,我们介绍下 内置的 velocity模版, 以及如果需要修改模板的时候,可以使用哪些变量或者属性

1. 内置的feilong-default-pager.vm

feilong pager 默认使用的 feilong-taglib jar 里面的 velocity/feilong-default-pager.vm

内容如下:

	#**
	    这是个示例或者默认的模板,通过这个模板,可以看到哪些变量可以使用
	    每个商城可以使用这个模板,也可以自定义模板来使用
		
		该VM 可以取到两个变量:
		
	    	pagerVMParam	:	包含各种显示数字/链接 参数
	    	i18nMap			:	包含国际化信息
	*#
	<div class="div_feilongPager ${pagerVMParam.skin}">
		##总数
		<span class="span_pagerInfo">${i18nMap.get('feilong-pager.text.totalCount')}${pagerVMParam.totalCount}</span>
		##当前第${pagerVMParam.currentPageNo}页/共${pagerVMParam.allPageNo}页
		<span class="span_pagerInfo" title="${i18nMap.get('feilong-pager.text.current')}${pagerVMParam.currentPageNo}${i18nMap.get('feilong-pager.text.pager')}/${i18nMap.get('feilong-pager.text.total')}${pagerVMParam.allPageNo}${i18nMap.get('feilong-pager.text.pager')}">${pagerVMParam.currentPageNo}/${pagerVMParam.allPageNo}</span>
	
	##第一页不显示首页和上一页
	#if(1 != ${pagerVMParam.currentPageNo})
		<a pageNoValue="${pagerVMParam.prePageNo}" title="${i18nMap.get('feilong-pager.text.goto.pre')}" href="${pagerVMParam.preUrl}">${i18nMap.get('feilong-pager.text.prev')}</a>
	    ##// 如果导航编号里面没有首页 则添加首页
		##// 导航里面 是否有第一页, 如果从开始1索引 则已经包含的首页包含
		
		#if (${pagerVMParam.startIteratorIndex} != 1)
			<a pageNoValue="1" title="${i18nMap.get('feilong-pager.text.goto.first')}" href="${pagerVMParam.firstUrl}">1</a>
		#end
	#end
	
	##开始迭代索引不等于1,并且开始迭代索引不等于2,显示3点
	#if (${pagerVMParam.startIteratorIndex} != 1 && ${pagerVMParam.startIteratorIndex} != 2)
		<span class="color_666">...</span>
	#end
	
	##循环所有的页码 显示导航编号
	#foreach( ${entry} in ${pagerVMParam.iteratorIndexMap.entrySet()} )
		##当前 直接是数字编号
	    #if(${entry.key}==${pagerVMParam.currentPageNo})
			<span class="current">${entry.key}</span>
	    #else
			##不是当前页面
			<a pageNoValue="${entry.key}" title="${i18nMap.get('feilong-pager.text.goto')}${entry.key}${i18nMap.get('feilong-pager.text.pager')}" href="${entry.value}">${entry.key}</a>
	    #end
	#end
	
	##如果最后一个迭代索引不等于总页数,且最后一个迭代索引不等于总也是-1,那么 显示3点
	#set($allPageNoTo1=${pagerVMParam.allPageNo} - 1)
	#if (${pagerVMParam.endIteratorIndex} != ${pagerVMParam.allPageNo} && ${pagerVMParam.endIteratorIndex} != $allPageNoTo1)
		<span class="color_666">...</span>
	#end
	
	##最后一页不显示下一页和末页
	#if(${pagerVMParam.allPageNo}!=${pagerVMParam.currentPageNo})
		## 如果导航编号里面没有尾页 则添加尾页
		##导航里面是否有最后一页, 如果结束的位置是allPageNo 则已经包含的尾页
		#if(${pagerVMParam.endIteratorIndex} != ${pagerVMParam.allPageNo})
			##跳转到最后一页
			<a pageNoValue="$!{pagerVMParam.allPageNo}" title="${i18nMap.get('feilong-pager.text.goto.last')}" href="${pagerVMParam.lastUrl}">$!{pagerVMParam.allPageNo}</a>
		#end
	
		##跳转到下一页
		<a pageNoValue="${pagerVMParam.nextPageNo}" title="${i18nMap.get('feilong-pager.text.goto.next')}" href="${pagerVMParam.nextUrl}">${i18nMap.get('feilong-pager.text.next')}</a>
	#end
	
		<input type="text" value="${pagerVMParam.currentPageNo}" class="feilongGotoInput" pagerUrlTemplateHref="${pagerVMParam.pagerUrlTemplate.href}" templateValue="${pagerVMParam.pagerUrlTemplate.templateValue}" pageParamName="${pagerVMParam.pageParamName}"/>/${pagerVMParam.allPageNo}<button class="pagerButton" value="go">Go</button>
	</div>
	
	<script type="text/javascript">
	    $(function() {
			##快速跳转文本框的回车事件
			$(".feilongGotoInput").keydown( function() { 
				if (event.keyCode == 13) { 
					pagerJump($(this));
				}
			});
			
			##快速跳转按钮的点击事件
			$(".pagerButton").click(function(){
				pagerJump($(".feilongGotoInput"));
			});
	    });
	    
	    function pagerJump(feilongGotoInputJquery){
			var pageNoValue=feilongGotoInputJquery.val();
			console.log(pageNoValue);
			if(""!=pageNoValue&&pageNoValue>0){
				var templateValue=feilongGotoInputJquery.attr("templateValue");
				var pageParamName=feilongGotoInputJquery.attr("pageParamName");
				var pagerUrlTemplateHref=feilongGotoInputJquery.attr("pagerUrlTemplateHref");
				location.href=pagerUrlTemplateHref.replace(pageParamName+"="+templateValue,pageParamName+"="+pageNoValue);
			}
	    }
	</script>

2. 自定义 velocity pager分页模板

有些时候,需要我们定制模板,我们可以在Pager vm模板中使用以下参数:

2.1 PagerVMParam 对象

对象类型 : com.feilong.taglib.display.pager.command.PagerVMParam

变量名称 说明 类型 since 示例数据
totalCount 数据总数 int 1.0 1024
skin 设定的皮肤 String 1.0 digg
currentPageNo 当前页码 int 1.0 12
allPageNo 总页数 int 1.0 103
prePageNo 上一页页码 int 1.4.0 11
nextPageNo 下一页页码 int 1.4.0 13
pagerType 分页类型 PagerType 1.4.0 REDIRECT
preUrl 上一页链接 String 1.0 /pager?page=7&name=%E9%A3%9E%E5%A4%A9%E5%A5%94%E6%9C%88
nextUrl 下一页链接 String 1.0 /pager?page=9&name=%E9%A3%9E%E5%A4%A9%E5%A5%94%E6%9C%88
firstUrl 第一页的链接 String 1.0 /pager?page=1&name=%E9%A3%9E%E5%A4%A9%E5%A5%94%E6%9C%88
lastUrl 最后一页的链接 String 1.0 /pager?page=1000&name=%E9%A3%9E%E5%A4%A9%E5%A5%94%E6%9C%88
hrefUrlTemplate 链接的模板,以便前端js替换 1.0 /pager?page=-8888888&name=%E9%A3%9E%E5%A4%A9%E5%A5%94%E6%9C%88
startIteratorIndex 开始迭代索引编号 int 1.0 7
endIteratorIndex 结束迭代索引编号 int 1.0 9
iteratorIndexMap 循环 迭代索引map key是编号,value 是页面链接 LinkedHashMap<Integer, String> 1.0 "7": "/pager?page=7&name=%E9%A3%9E%E5%A4%A9%E5%A5%94%E6%9C%88",
"8": "/pager?page=8&name=%E9%A3%9E%E5%A4%A9%E5%A5%94%E6%9C%88",
"9": "/pager?page=9&name=%E9%A3%9E%E5%A4%A9%E5%A5%94%E6%9C%88"
pageParamName 分页参数名称 String 1.0.6 pageNo
pagerUrlTemplate 分页链接模板 PagerUrlTemplate 1.0.6 "pagerUrlTemplate": {
"href": "/pager?page=-88888888&name=%E9%A3%9E%E5%A4%A9%E5%A5%94%E6%9C%88",
"templateValue": -88888888
},

2.2 i18nMap对象 (国际化使用的文案)

将 messages/feilong-pager.properties 配置文件的key和value转成了i18nMap对象,可以在vm模板中直接使用配置文件中的参数

示例参见 messages/feilong-pager.properties

3. messages/feilong-pager.properties

i18n

feilong 版权所有

🌀 feilong 即时交流

QQ 群 243306798

🐼 About

如果您对本项目有任何建议和批评,可以使用下面的联系方式：

core

Clone this wiki locally