beetl渲染Bootstrap Paginator实现过程

? ? ? ?上篇文章简要介绍了一下beetl的基本信息，本篇文章从beetl的简要渲染过程结合BootStrap的分页控件Paginator的数据绑定过程进行讲解。

? ? ?? 我们以maven项目为例，首先看一下beetl在spring mvc框架的集成：

? ? ? ?1.?在maven项目中引入jar包：

	<dependency>
		<groupId>com.ibeetl</groupId>
		<artifactId>beetl</artifactId>
	</dependency>

? ? ? ??2. 添加beetl的配置文件，这个配置文件可以在beetl官网找到。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

3. 在springmvc.xml文件中配置beetl解析器：

	 <!-- Beetl视图解析器 -->
	   	<bean name="beetlConfig" class="org.beetl.ext.spring.BeetlGroupUtilConfiguration"
			init-method="init">
			<property name="configFileResource" value="classpath:config/beetl.properties" />
			
		</bean>
	
		<!-- Beetl视图解析器1 -->
		<bean name="beetlViewResolver" class="org.beetl.ext.spring.BeetlSpringViewResolver">
			
			<!-- 多GroupTemplate，需要指定使用的bean -->
			<property name="config" ref="beetlConfig" />
			<property name="prefix" value="/views/" />
			<property name="suffix" value=".html" />
		</bean>

? ? ? ? 下面进行控件数据绑定， Bootstrap Paginator控件的实现效果图如下：

? ? ? a. 首先在页面中添加js文件：jquery.js,bootstrap.js,bootstrap-paginator.js

b. 使用beetl渲染得到数据总行数：

? ? ? ? ? ? ? ?

? ? ?? c. 页面隐藏控件获得数据列表总条数：<input id="count" hidden="true" value="${pageCount}">

? ? ? ? d.配置参数控件参数：

					var pageCount=$("#pageCount").text()==""?Math.ceil(parseInt($("#count").val())/parseInt($("#pageNum").attr("pageSize"))):parseInt($("#pageCount").text());
			       var options = {
					        bootstrapMajorVersion:3,alignment:'center',currentPage:1,totalPages:pageCount,onPageClicked: function (event,originalEvent,type,page){ 
								originalEvent.preventDefault();
								originalEvent.stopPropagation();
								loadPageData(page);
							}
					};

? ? ? 加载数据拼接过程：

		function loadPageData(page){
			   $.ajax({
				    data:{"start":page,"pageSize": $("#pageNum").attr("pageSize")},url:$("#root").val()+"/companyPartner/listCompanyPartnerPageData.html",type:"POST",dataType:"json",success: function(data){
			        	var ul="";
						if(data.pageData!=null && data.pageData.result.length>0){
							for(var i=0;i<data.pageData.result.length;i++){
								var liquidationPreference="暂未设置";
								if(parseInt(data.pageData.result[i].maxPayDays)>0){
									liquidationPreference="确定清算后"+data.pageData.result[i].maxPayDays+"个工作日内支付";
								}
								ul+='<ul class="accounts-mainh accounts-mainm">'
								   +	'<li>'+(i+(page-1)*2+1)+'</li>'
								   +	'<li>'+data.pageData.result[i].partner+'</li>'
								   +	'<li>'+liquidationPreference+'</li>'
								   +	'<li>'+data.pageData.result[i].name+'</li>'
								   +	'<li>'+data.pageData.result[i].createTime+'</li>'
								   +'</ul>'
							}
							$("#companyPartnerList").html(ul);
							$("#pageCount").html(data.pageData.total);
						}
			        },error: function(error){
			            alert("error");
			        }
			   });
		}

? ? ?? e. 绑定数据：
$("#pageNum").bootstrapPaginator(options);?

? ? ? ? ? ? ? 结束！！

参考文章：https://github.com/lyonlai/bootstrap-paginator

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?http://blog.csdn.net/lvlvforever/article/details/46625399 ? ? ? ? ?