本文為原創(chuàng)，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明出處BlogJava。
本次分頁組件著重于頁面（Freemarker部分）、及Action部分。
至于Service及持久層處理，只是做了一個模擬的實(shí)現(xiàn)，實(shí)際開發(fā)中，我是應(yīng)用了iBatis，封裝了分頁調(diào)用。
由于用法有所不同，所以就不放在源碼范圍內(nèi)，也不在這里介紹了。
這里的分頁功能只提供了 上一頁、下一頁、指定頁 的分頁，但在分頁Java代碼中包含了 首頁、末頁的實(shí)現(xiàn)。有需要的可自行添加。
分頁的效果如圖：
分頁實(shí)現(xiàn)代碼介紹：
1.pagination.ftl 分頁組件 頁面部分。
2.PageSupport.java 分頁Action部分。
3.WebPager.java 計(jì)算分頁動作。
4.Pager.java 保存分頁信息，由Action傳遞到Service，根據(jù)Pager對象取得數(shù)據(jù)。
5.MockDataBase.java 模擬Dao，實(shí)現(xiàn)分頁處理。
使用該組件的方法如下：
第一步：引入分頁組件
<#include "/ftl/ecs/pagination.ftl" />
分頁組件使用了Freemarker的宏。
第二步：在ftl文件中使用分頁組件
分頁組件需要輸入4個參數(shù)，分別為id、method、btnCssClass、cssClass，其中id、method必須輸入；btnCssClass、cssClass可選。以下是參數(shù)詳細(xì)說明：
1.id : 分頁組件的唯一標(biāo)識。
2.method : 分頁用的Action。例如：定義了Action為Pagination，則method輸入 Pagination.action；若為動態(tài)方法調(diào)用，可輸入Pagination!query.action
3.cssClass : 分頁組件的class屬性。例如cssClass="center"。
4.btnCssClass : 分頁組件按鈕的class屬性。例如btnCssClass="btn_history"。
<@pagination id="***" btnCssClass="***" cssClass="***" method="***.action">
<table>
<tr>
<td></td>
...
</tr>
</table>
</pagination>
[編輯]第三步：繼承分頁類PageSupport
PageSupport.java繼承自ActionSupport.java，在要分頁的方法中使用PageSupport.java提供的List pageCall(String module, String target, Map dataMap)分頁調(diào)用。
通過setPageSize(int pageSize)方法設(shè)定每頁顯示的記錄數(shù)。
API詳細(xì)說明：
1.pageCall
參數(shù)說明：
1) String module : 調(diào)用service的通道，例如：upf、esf。
2) String target : 要調(diào)用的service的方法，例如：com.ailk.ecs.service.TdupfPageService.selectAllUser。
3) Map dataMap : 輸入?yún)?shù)。
返回值說明：
List : 頁面顯示的數(shù)據(jù)記錄。
2.setPageSize
參數(shù)說明：
1) int pageSize : 每頁顯示記錄數(shù)。
[編輯]
第四步：Service代碼中使用
在service封裝分頁Dao或者分頁方法。
pagination.ftl代碼:
<#macro pagination id method cssClass="" btnCssClass="" pageSize='10'>
<div id='${id}'>
<#nested> <#-- 要刷新的區(qū)域 -->
<div class="${cssClass}">
<input type="button" onclick="Pagination${id}.gotoPage('prev', '${webPager.pageInfo.currentPage}', '${totalSize}');" value="上一頁" class="${btnCssClass}" />
共 ${totalPages} 頁 第 ${webPager.pageInfo.currentPage} 頁 轉(zhuǎn)到
<input type="text" id='${id}_inputPageNo' name='${id}_inputPageNo' size="6"/>頁
<input type="text" style="display:none"/>
<input type="button" onclick="Pagination${id}.gotoPage('input', '${webPager.pageInfo.currentPage}', '${totalSize}');" value="確定" class="${btnCssClass}" />
<input type="button" onclick="Pagination${id}.gotoPage('next', '${webPager.pageInfo.currentPage}', '${totalSize}');" value="下一頁" class="${btnCssClass}" />
</div>
<script>
if (!this.Pagination${id} ) {
this.Pagination${id} = {}
// 分頁處理方法
Pagination${id}.gotoPage = function(action, c, t) {
var cmd = action;
// 當(dāng)總記錄數(shù)量小于等于每頁記錄數(shù)量時，分頁動作無效
if (t <= ${webPager.pageInfo.pageSize}) {
return;
}
// 確定按鈕處理
if(action == 'input') {
var inValue = $("#${id}_inputPageNo").val();
if(inValue.match(/^[0-9]+$/) && parseInt(inValue) > 0) {
cmd = inValue;
}
else {
// TODO 提示錯誤信息
return ;
}
}
$('#${id}').load(
'${method} #${id}',
{action : cmd,
totalSize : t,
currentPage : c
}
);
};
// 刷新當(dāng)前頁面
Pagination${id}.refreshPage = function() {
//Pagination${id}.gotoPage('refresh');
//scrollPage${id}('refresh', "${method}");
};
// 頁碼輸入框keyup事件
//Pagination${id}.keyup = function(inputElem, currentPage, totalSize) {
//if (inputElem.value.match(/^[0-9]+$/) && parseInt(inputElem.value) > 0) {
//Pagination${id}.gotoPage(inputElem.value, currentPage, totalSize);
//}
//};
//$("#${id}_inputPageNo").keyup(function(event){
//if(event.keyCode == 13) {
//Pagination${id}.keyup(this, '${webPager.pageInfo.currentPage}', '${totalSize}');
//}
//});
}
</script>
</div>
</#macro>
請
點(diǎn)擊下載源碼。
非maven化工程，自己找包吧。
lib包如圖：
