feilongDisplay pager select

1.下拉框式分页

参考 reebok global网站

http://global.reebok.com/Classics-Shoes?prefn1=gender&prefv1=Women&sz=12&start=0

2.实现

2.1 新增内置 feilong-example-pager-select.vm

	#**
	    这是个示例或者默认的模板,通过这个模板,可以看到哪些变量可以使用
	    每个商城可以使用这个模板,也可以自定义模板来使用
		
		该VM 可以取到两个变量:
		
	    	pagerVMParam	:	包含各种显示数字/链接 参数
	    	i18nMap			:	包含国际化信息
	*#
	
	Page 
	
	<select class="pagerSelect">
		#foreach($i in [1..${pagerVMParam.allPageNo}])
			<option value="$i" #if($i == ${pagerVMParam.currentPageNo}) selected="selected" #end>$i</option>
		#end
	<select>
	
	of ${pagerVMParam.allPageNo} <a pageNoValue="${pagerVMParam.prePageNo}" title="${i18nMap.get('feilong-pager.text.goto.pre')}" href="${pagerVMParam.preUrl}"><</a> <a pageNoValue="${pagerVMParam.nextPageNo}" title="${i18nMap.get('feilong-pager.text.goto.next')}" href="${pagerVMParam.nextUrl}">></a>
	
	
	<script type="text/javascript">
	
		var pagerUrlTemplateHref="${pagerVMParam.pagerUrlTemplate.href}";
		var templateValue="${pagerVMParam.pagerUrlTemplate.templateValue}"; 
		var pageParamName="${pagerVMParam.pageParamName}";
		
	    $(function() {
			##选择下拉框
			$(".pagerSelect").change(function(){
				pagerJump(this.options[this.selectedIndex].value);
			});
	    });
	    
	    function pagerJump(pageNoValue){
			console.log(pageNoValue);
			if(""!=pageNoValue&&pageNoValue>0){
				location.href=pagerUrlTemplateHref.replace(pageParamName+"="+templateValue,pageParamName+"="+pageNoValue);
			}
	    }
	</script>

你可以基于他,参考进行二次开发

2.2 jsp 使用

**注意:**下面仅是示例,需要自行控制 12 24 48 等每页数量的显示逻辑 (聪明的你这里肯定难不倒你)

<%@ taglib prefix="feilongDisplay" uri="http://java.feilong.com/tags-display"%>
....
	View: <a href="?pageSize=12">12</a> <a href="?pageSize=24">24</a> <a href="?pageSize=36">36</a> <a href="?pageSize=48">48</a> <a href="?pageSize=320">All</a>
		<feilongDisplay:pager count="320" pageSize="${param.pageSize}" vmPath="velocity/feilong-example-pager-select.vm" />
	

2.3 效果