template-table

php foreach  foreach($a as $key=>$value) || foreach($a as $value)
js  forEach for array.forEach(function(item){...})
jq	each $().each(function(i,v){}) [jqObj] || $.each([obj array],function(i,v){}) 
<table class="table table-striped table-bordered table-hover">
	<thead>
		<tr>
			<% column.forEach(function(item){ %>
				<% if(item['type']=='check'){ %>
					<th><input type="checkbox"></th>
				<%}else if(item['type']='hidden'){%>
					<th class="hidden"><%=item['name']%></th>
				}else{%>
					<th><%=item['name']%></th>
			<%}%>
			<%})%>
		</tr>
	</thead>
	<tbody>
		<% data.forEach(function(v){%>
		<tr>
			<% cloumn.forEach(function(item){%>
				<% if(item['type']=='check'){%>
				<td><input type="checkbox"></td>>
				<%}else if(item['type']=='option'){%>
				<td>
					<% v['aAction'].forEach(function(obj){%>
						<!-- link -->
						<%if(obj['type']=='link'){%>
							<span><a href="javascript:void(0)" data-type="<%=obj['type']%>" data-url="<%=obj['url']%>"><%=obj['name']%></a></span>
						<%}else{%>
							<span><a href="javascript:void(0)" data-type="<%=obj['type']%>" data-action="<%=obj['url']%>"><%=obj['name']%></a></span>
						<%}%>
					<%})%>
				</td>
				<%}else if(item['type']=='hidden'){%>
					<td class="hidden" data-key="<%item['key']%>"><%=v[item['key']]%></td>
				<%}else{%>
					<td><%=v[item['key']]%></td>
				<%}%>
			<%})%>
		</tr>
		<%})%>
	</tbody>
</table>
<div class="row">
	<div class="col-sm-5"></div>
	<div class="col-sm-7">
		<ul class="pagination" id="pagination">
			<% if(page['total']>1){%>
			<li class="previous <%=page['cur']==1 ? 'disabled' : ''%>"><a href="javascript:;" data-i="<%=page['cur']-1%>" title="上一页"><i class="fa fa-angle-left"></i></a></li>
				<% if(page['total']>10){
					var start=page['cur']-5;
					var end=page['cur']+4;
					if(start<=0){start=1;end=10;}
					if(end>page['total']){start=page['total']-9;end=page['total']}
					if(start!=1){ %>
						<li style="float:left;padding:0 5px">...</li>
					<%}
					for(var i=start;i<=end;i++){%>
						<li class="<%=i==page['cur'] ? 'active' : ''%>">
							<a href="javascript:void(0)" data-i="<%=i%>"><%=i%></a>
						</li>
					<%}
					if(end!=page['total']){%>
						<li style="float:left;padding:0 5px">...</li>
					<%}

				}else{
					for(var i =1;i<=page['total'];i++){%>
						<li class="<%= i==page['cur'] ? 'active' : ''%>">
							<a href="javascript:;" data-i="<%=i%>"><%=i%></a>
						</li>
					<%}%>
			<%}%>
			<li class="next <%= page['cur']<page['total'] ? '' : 'disabled'%>">
				<a href="javascript:;" data-i=<%=page['cur']+1%> title="下一页">
					<i class="fa fa-angle-right"></i>
				</a>
			</li>
		<%}%>
		</ul>
	</div>
</div>

 

转载于:https://my.oschina.net/u/3318803/blog/873888