本文為原創(chuàng),歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明出處BlogJava。
本次分頁組件著重于頁面(Freemarker部分)、及Action部分。
至于Service及持久層處理,只是做了一個模擬的實現(xiàn),實際開發(fā)中,我是應(yīng)用了iBatis,封裝了分頁調(diào)用。
由于用法有所不同,所以就不放在源碼范圍內(nèi),也不在這里介紹了。
這里的分頁功能只提供了 上一頁、下一頁、指定頁 的分頁,但在分頁Java代碼中包含了 首頁、末頁的實現(xiàn)。有需要的可自行添加。
分頁的效果如圖:
分頁實現(xiàn)代碼介紹:
1.pagination.ftl 分頁組件 頁面部分。
2.PageSupport.java 分頁Action部分。
3.WebPager.java 計算分頁動作。
4.Pager.java 保存分頁信息,由Action傳遞到Service,根據(jù)Pager對象取得數(shù)據(jù)。
5.MockDataBase.java 模擬Dao,實現(xiàn)分頁處理。
使用該組件的方法如下:
第一步:引入分頁組件
<#include "/ftl/ecs/pagination.ftl" />
分頁組件使用了Freemarker的宏。
第二步:在ftl文件中使用分頁組件
分頁組件需要輸入4個參數(shù),分別為id、method、btnCssClass、cssClass,其中id、method必須輸入;btnCssClass、cssClass可選。以下是參數(shù)詳細說明:
1.id : 分頁組件的唯一標識。
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詳細說明:
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;

// 當總記錄數(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
}
);
};
// 刷新當前頁面

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>
請
點擊下載源碼。
非maven化工程,自己找包吧。
lib包如圖: