對於web系統來說，分頁器就好像是一個器官，是無論如何都必須要具備的一項功能，而分頁器呢，是既通用又無怪乎那麼幾種樣子，所以我們這裡就利用添加了freemarker框架的一個系統來做自己的分頁器。先看下結果樣子：

具體的展示樣式是可以自己隨意調整的，這裡我採取的是每一頁展示10個數字頁號，然後提供首頁、末頁、前一頁、後一頁的功能，最後在後面顯示一個共有的頁數。這樣的佈局的好處是清晰，明瞭。這個跟個人喜好有關~

看看我們的實現程式碼：

<#-- 分頁控制元件--> <#-- <author= quzishen date=2010-08-03> --> <#macro pageShow _totalPageNum _currentPageNo _pageName _pageSize=15 _maxShowNums=10 _defaultPageParameter="p" _styleClassName="digg"> <#-- 本段預設起始頁 --> <#local _pageStartNo = 1/> <#-- 本段預設結束頁 --> <#local _pageEndNo = _maxShowNums/> <#-- 分頁的第一頁 --> <#local _firstPageNo = 1 /> <#-- 分頁的最後一頁 --> <#local _lastPageNo = _totalPageNum> <#-- 前一頁號碼 --> <#local _prePageNo = _currentPageNo - 1 /> <#-- 後一頁號碼 --> <#local _nextPageNo = _currentPageNo + 1 /> <#if _currentPageNo == _pageStartNo> <#local _prePageNo = _pageStartNo /> </#if> <#if _currentPageNo == _lastPageNo> <#local _nextPageNo = _lastPageNo /> </#if> <#if _currentPageNo gt _maxShowNums> <#local _thisPageSegment = (_currentPageNo / _maxShowNums)?int + 1/> <#assign _thisPageStartNo = _pageStartNo + (_thisPageSegment-1) * _maxShowNums/> <#assign _thisPageEndNo = _pageEndNo + (_thisPageSegment-1) * _maxShowNums/> <#if _thisPageEndNo gt _totalPageNum> <#assign _thisPageEndNo = _totalPageNum> </#if> <#else> <#assign _thisPageStartNo = _pageStartNo /> <#assign _thisPageEndNo = _pageEndNo /> </#if> <#local _pages=[] /> <#if _totalPageNum != 0> <#list _thisPageStartNo .. _thisPageEndNo as _index> <#if _currentPageNo == _index > <#local _pages = _pages + [{"pageNum" : _index ,"url" : _pageName+"?"+_defaultPageParameter+"="+_index , "current" : true}] /> <#else> <#local _pages = _pages + [{"pageNum" : _index ,"url" : _pageName+"?"+_defaultPageParameter+"="+_index , "current" : false}] /> </#if> </#list> </#if> <#local _htmlNoLinkLine> <a href = "${_pageName}?${_defaultPageParameter}=${_firstPageNo}" target = "_self">首頁</a> <#if _currentPageNo != _pageStartNo> <a href = "${_pageName}?${_defaultPageParameter}=${_prePageNo}" target = "_self">上一頁</a> </#if> <#list _pages as page> <#if page.current?default(false)> <span class="current" >${page.pageNum}</span> <#else> <a href="${page.url}" mce_href="${page.url}" target="_self">${page.pageNum}</a> </#if> </#list> <a href = "${_pageName}?${_defaultPageParameter}=${_nextPageNo}" target = "_self">下一頁</a> <a href = "${_pageName}?${_defaultPageParameter}=${_lastPageNo}" target = "_self">末頁</a> <span>共${_totalPageNum?default(0)}頁</span> </#local> <div class="${_styleClassName}"> ${_htmlNoLinkLine} </div> <mce:style type="text/css"><!-- /*CSS Digg style pagination*/ DIV.digg { FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center } DIV.digg A { BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none } DIV.digg A:hover { BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid } DIV.digg A:active { BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid } DIV.digg SPAN.current { BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099 } DIV.digg SPAN.disabled { BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid } --></mce:style><style type="text/css" mce_bogus="1"> /*CSS Digg style pagination*/ DIV.digg { FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center } DIV.digg A { BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none } DIV.digg A:hover { BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid } DIV.digg A:active { BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid } DIV.digg SPAN.current { BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099 } DIV.digg SPAN.disabled { BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid } </style> </#macro>

我們請求外部傳入三個必須的引數：總頁數、當前頁號、分頁頁面的url

總頁數和當前頁號適用於計算當前應該展示的數字串的起始數字和結束數字，同時控制樣式。

分頁頁面的url是用於生成每個分頁資料的url

我們在或許在頁面會放置一些控制元件，如查詢條件的選擇和輸入控制元件，抑或是隱藏控制元件，內部儲存了查詢的條件語句，總是我們這裡不使用get方式的傳遞，用於防止當引數太長帶來的問題。

呼叫的程式碼會很簡單：

<@pageBody> <@pageShow 33,14,"index.htm"/> </@>

很簡單的一個小控制元件，可以根據自己的喜好，展示不同的樣式