首页 > 代码库 > 分页静态化处理
分页静态化处理
第一次接触静态化处理页面，碰到关于分页的静态化纠结了很长时间。
查过好多资料，有说前几页可以做出静态页的，后面的则还是需要查数据库。
经过各种资料用了两种方式做分页静态化处理的
方法一：根据模板一次性加载所有的数据到静态页面中
后台代码：HtmlNewsServiceImpl.java
ExecuteResult<Boolean> result = new ExecuteResult<Boolean>();
WebsiteNewsDTO websiteNewsDTO = new WebsiteNewsDTO();
//仅显示未删除的
websiteNewsDTO.setDelFlag(EcmCommonEnums.DeleteEnum.NOT_DELETED.getFlag());
// 查询所有未删除的新闻
ExecuteResult<DataGrid<WebsiteNewsDTO>> executeResult
= websiteNewsService.queryWebsiteNewList(websiteNewsDTO, null);
if ( !executeResult.isSuccess() ) {
LOG.error("获取新闻列表失败");
result.addErrorMessage("获取新闻列表失败");
return result;
}
List<WebsiteNewsDTO> dtoList = executeResult.getResult().getRows();
if(CollectionUtils.isEmpty(dtoList) || dtoList.size() == 0){
LOG.error("获取新闻列表无数据");
result.addErrorMessage("获取新闻列表无数据");
return result;
}
int pageSize = 10;
int totalNumber = dtoList.size();
//总页数
int page = (totalNumber%pageSize == 0) ? (totalNumber/pageSize) : (totalNumber/pageSize + 1);
HtmlEntity htmlEntity = new HtmlEntity();
Map<String, Object> dynamicParameters = new HashMap<String, Object>();
htmlEntity.setHtmlFilePath(HTML_NEWS_LIST); /** 新闻中心html绝对路径*/
htmlEntity.setTemplateName(TEMPLATE_NEWS_LIST);/** 新闻中心模板文件名 */
dynamicParameters.put(KEY_NEWS_PAGE_TOTAL, page);
dynamicParameters.put(KEY_NEWS_DATA_LIST, dtoList);
try {
htmlBaseService.toHtml(htmlEntity , dynamicParameters );
} catch (Exception e) {
LOG.error("新闻中心静态化失败", e);
result.addErrorMessage("新闻中心静态化失败");
}
return result;
}
模板：news.ftl
<body>
<!--header start-->
<#include "./common/header.ftl">
<!--header end-->
<!--container start-->
<div class="container mar_t20">
<div class="cont_w">
<div class="part_tit">新闻中心</div>
<ul class="part_news cl">
<#if newsList?? && newsList?size gt 0>
<#list newsList as entity>
<li class="parts_text">
<a href="http://www.mamicode.com/新闻详情页.html">
<img src="http://www.mamicode.com/pic/news_1.jpg">
<div class="news_botm_text">
<h2>${entity.title}</h2>
<div>${entity.brief}...</div>
</div>
</a>
</li>
</#list>
</#if>
</ul>
<!--分页 start-->
<div class="mar_t10 cl">
<div id="data">
</div>
<div class="search_box fr">
共<span></span>页
</div>
<div class="pagination" id="page">
</div>
</div>
<!--分页 end-->
</div>
</div>
<!--container end-->
<!--footer start-->
<#include "./common/footer.ftl">
<!--footer end-->
<script type="text/javascript">
$(function(){
//初始化分页插件
var initPagination = function() {
//获取总页数
var num_entries = ‘${newsPageTotal}‘;
// 创建分页
$("#page").pagination(num_entries, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
callback: GetDataList,
first_text: false, //是否显示首页按钮，默认为true；
last_text: false, //是否显示尾页按钮，默认为true；
items_per_page: 1, //每页显示1项
toPage: false //是否显示跳转到第几页，默认是true；
});
$(‘.search_box span‘).text(num_entries);
}();
//回调函数 AJAX异步从后台获取数据 page_index:当前pageIndex
function GetDataList(page_index, jq) {
$(".part_news").children(‘li‘).hide();
$(".part_news").children(‘li‘).each(function(index,item){
if(index >= page_index*15 && index <= page_index*15+15){
$(item).show();
}
});
}
})
方法二：根据两个模板（一个用户展示模板，一个用户分页列表）生产一个用户展示静态页面和多个分页列表页面
后台代码：HtmlPageServiceImpl.java
public ExecuteResult<Boolean> newsList() {
ExecuteResult<Boolean> result = new ExecuteResult<Boolean>();
WebsiteNewsDTO websiteNewsDTO = new WebsiteNewsDTO();
//仅显示未删除的
websiteNewsDTO.setDelFlag(EcmCommonEnums.DeleteEnum.NOT_DELETED.getFlag());
// 查询所有未删除的新闻
ExecuteResult<DataGrid<WebsiteNewsDTO>> executeResult
= websiteNewsService.queryWebsiteNewList(websiteNewsDTO, null);
if ( !executeResult.isSuccess() ) {
LOG.error("获取新闻列表失败");
result.addErrorMessage("获取新闻列表失败");
return result;
}
List<WebsiteNewsDTO> dtoList = executeResult.getResult().getRows();
if(CollectionUtils.isEmpty(dtoList) || dtoList.size() == 0){
LOG.error("获取新闻列表无数据");
result.addErrorMessage("获取新闻列表无数据");
return result;
}
int pageSize = 12;
int totalNumber = dtoList.size();
//总页数
int page = (totalNumber%pageSize == 0) ? (totalNumber/pageSize) : (totalNumber/pageSize + 1);
int start = 0;
int end = start + pageSize;
for(int i=0;i < page;i++){
start = i*pageSize;
end = start + pageSize;
HtmlEntity htmlEntity = new HtmlEntity();
Map<String, Object> dynamicParameters = new HashMap<String, Object>();
htmlEntity.setHtmlFilePath(HTML_NEWS_LIST_DIR+"/"+(i+1)+".html");
htmlEntity.setTemplateName(TEMPLATE_NEWS_LIST);
dynamicParameters.put(KEY_NEWS_PAGE_TOTAL, page);
if(totalNumber < end){
end = totalNumber;
}
dynamicParameters.put(KEY_NEWS_DATA_LIST, dtoList.subList(start, end));
try {
htmlBaseService.toHtml(htmlEntity , dynamicParameters );
} catch (Exception e) {
LOG.error("新闻中心静态化失败", e);
result.addErrorMessage("新闻中心静态化失败");
}
}
if(result.isSuccess()){
HtmlEntity htmlEntity = new HtmlEntity();
Map<String, Object> dynamicParameters = new HashMap<String, Object>();
htmlEntity.setHtmlFilePath(HTML_NEWS_LIST_HOME);//主页面模板
htmlEntity.setTemplateName(TEMPLATE_NEWS_LIST_HOME);//主页面静态页
dynamicParameters.put(KEY_NEWS_PAGE_TOTAL, page);
htmlBaseService.toHtml(htmlEntity , dynamicParameters );
}
return result;
}
模板1：pageHome.ftl
<!--header start-->
<#include "./common/header.ftl">
<!--header end-->
<!--container start-->
<div class="container mar_t20">
<div class="cont_w">
<div class="part_tit">新闻中心</div>
<ul id="pageList" class="part_news cl">
</ul>
<!--分页 start-->
<div class="mar_t10 cl">
<div id="data">
</div>
<div class="search_box fr">
共<span></span>页
</div>
<div class="pagination" id="page">
</div>
</div>
<!--分页 end-->
</div>
</div>
<!--container end-->
<!--footer start-->
<#include "./common/footer.ftl">
<!--footer end-->
<script type="text/javascript">
$(function(){
//初始化分页插件
var initPagination = function() {
//获取总页数
var num_entries = ‘${newsPageTotal}‘;
// 创建分页
$("#page").pagination(num_entries, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
callback: GetDataList,
first_text: false, //是否显示首页按钮，默认为true；
last_text: false, //是否显示尾页按钮，默认为true；
items_per_page: 1, //每页显示1项
toPage: false //是否显示跳转到第几页，默认是true；
});
$(‘.search_box span‘).text(num_entries);
}();
//回调函数 AJAX异步从后台获取数据 page_index:当前pageIndex
function GetDataList(page_index, jq) {
$.post((page_index+1)+‘.html‘, {}, function (data, textStatus) {
$("#pageList").html(data);
});
}
})
模板2：page.ftl 用户创建多个页面列表的静态页面
<#if newsList?? && newsList?size gt 0>
<#list newsList as entity>
<li class="parts_text">
<a href="http://www.mamicode.com/新闻详情页.html">
<img src="http://www.mamicode.com/pic/news_1.jpg">
<div class="news_botm_text">
<h2>${entity.title}</h2>
<div>${entity.brief}...</div>
</div>
</a>
</li>
</#list>
</#if>
分页静态化处理