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>

        至此，beetl的配置完成，在项目里面的html页面就可以添加beetl语法了。

        下面进行控件数据绑定， 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