Freemaker
1.添加freemaker.jar包
2.servlet中
Configuration conf = new Configuration();
conf.setServletContextForTemplateLoading(this.getServletContext(),
"web");
conf.setDefaultEncoding("UTF-8");
Template tpl = conf.getTemplate("list.htm");
Map<String, Object> map = new HashMap<String, Object>(0);
map.put("userList", list);
map.put("count", count);
map.put("page", p);
map.put("pagesize", s);
tpl.process(map, response.getWriter());
3.list.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div>
<form method="post" action="user" name='myform'>
<input type="text" name="name"/>
<select name='state'>
<option value="">请选择
<option value="0">禁用
<option value="2">启用
</select>
<input type="submit" value="SEARCH"/>
</form>
<table class="grid">
<tr>
<th>
code
</th>
<th>
name
</th>
<th>
pwd
</th>
<th>
操作
</th>
</tr>
<#list userList as user>
<tr>
<td width=50 align="center">
${user.code}
</td>
<td>
${user.name}
</td>
<td>
${user.pwd}
</td>
<td width=120 align="center">
<span><a href=''>查看</a> </span>
<span><a href=''>修改</a> </span>
<span><a href="javascript:if(confirm('确定要删除吗?')){alert(${user.code});}">删除</a> </span>
</td>
</tr>
</#list>
</table>
<#include "pagebar.htm"/>
</div>
</body>
</html>
4.pagebar.htm
<#assign pagecount = 1>
<#if count%pagesize == 0>
<#assign pagecount = (count/pagesize)?int>
<#else>
<#assign pagecount = ((count/pagesize)+1)?int>
</#if>
<div class="pagediv">
<form method="post" action="user" name="queryForm" style="margin:0;">
<input type="hidden" name="page" value="${page}"/>
<input type="hidden" name="pagesize" value="${pagesize}"/>
<#list queryparams?keys as key>
<input type="hidden" name="${key}" value="${queryparams[key]}"/>
</#list>
</form>
<div class="pagebar">
<#if count>0>
总共${count}条记录
共${pagecount}页
<#if pagecount>1>
当前第${page}页
<a href='javascript:toPage(1)'>首页</a>
<a href='javascript:toPage(${page-1})'>上一页</a>
<a href='javascript:toPage(${page+1})'>下一页</a>
<a href='javascript:toPage(${pagecount})'>尾页</a>
</#if>
<#else>
没有数据
</#if>
</div>
</div>
<script type="text/javascript">
function init(){
var myform = document.getElementById('myform');
<#list queryparams?keys as key>
myform['${key}'].value = '${queryparams[key]}';
</#list>
var table = document.getElementsByTagName('table')[0];
var rows = table.rows;
var len = rows.length;
for(var k in rows){
if(k%2==0){
rows[k].style.backgroundColor='#eee';
}
}
}
init();
function toPage(p){
var queryform = document.getElementById('queryform');
if(p>${pagecount}){
p = ${pagecount};
}
if(p<1){
p = 1;
}
queryform.page.value = p;
queryform.submit();
}
</script>
5.css文件
table.grid {
font-size: 12px;
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
}
table.grid th {
font-size: 12px;
border: 1px solid #ccc;
height: 28px;
background-color: #999;
color: #fff;
padding: 2px;
}
table.grid td {
font-size: 12px;
border: 1px solid #ccc;
height: 28px;
padding: 2px;
}
table.grid a,table.grid a:link,table.grid a:visited {
color:blue;
text-decoration: none;
}
table.grid a:hover,.pagebar a:active {
text-decoration: none;
color: red;
}
.pagediv {
font-size: 12px;
}
.pagebar {
font-size: 12px;
border: 1px solid #ccc;
text-align: right;
padding: 3px 50px 3px 0;
}
.pagebar a,.pagebar a:link,.pagebar a:visited {
text-decoration: none;
}
.pagebar a:hover,.pagebar a:active {
text-decoration: none;
background-color: red;
color: #fff;
}
