分頁標籤庫Pager

N.1 簡介

使用Pagers標籤庫能夠實現分頁功能。

N.2 用法

JSP中動態生成表格的代碼通常以下所示：

<table>
<%
    for(int i = 0; i < 行數; i++)
    {
%>
    <tr>
        <td>內容</td>
    </tr>
<%
    }
%>
</table>

在本章中我使用pg做爲Pager標籤庫的前綴。

若是要使用Pager標籤庫進行分頁處理的話，須要使用<pg:pager>標籤將<table>包括在內，而後在內部使用一系列的Pager標籤表示上一頁、下一頁等控制按鈕。經常使用的控制標籤以下表所示：

標籤 說明

pager 主標籤，包括整個動態表格

first         第一頁

skip         頁面跳轉

prev         上一頁

pages 頁碼

next         下一頁

last         最後一頁

下面是一個例子，源代碼以下所示：

<%
    Vector<String[]> v = (Vector<String[]>)request.getAttribute("table_list");
    int maxPageItems = 25;
    String url = "/INtools/Db/ListTable.action";
    int item_count = v.size();
    int page_count = item_count % maxPageItems == 0 ? item_count / maxPageItems : item_count / maxPageItems + 1;
%>
<form id="form1" name="form1" method="post" action="">
<pg:pager
    items="<%= item_count %>"
    url="<%= url %>"
    index="center"
    maxPageItems="<%= maxPageItems %>"
    maxIndexPages="10"
    isOffset="true"
    export="offset,currentPageNumber=pageNumber"
    scope="request">
<table border="1" cellspacing="0" cellpadding="3" bordercolordark="#ffffff"
                            bordercolorlight="#000066" width='100%' bgcolor="#76a6c7">
    <tr class="table_desc">
        <td colspan="3">後臺表集合</td>
    </tr>
    <tr class="table_title">
        <td width="33%">表名</td>
        <td width="33%">所屬模塊</td>
        <td width="34%">操做</td>
    </tr>
<%
    for(int iRow = offset.intValue(), l = Math.min(iRow + maxPageItems, v.size()); iRow < l; iRow++)
    {
        String[] row_data = v.get(iRow);
        String table_name = row_data[0];
        String module_name = row_data[1];
        String table_id = row_data[2];
        String bgcolor = iRow % 2 == 0 ? "#f4fbff" : "#FFFFDD";
%>                                        
    <pg:item>
    <tr bgcolor="<%=bgcolor%>" class="table_data">
        <td align="left"><%=table_name%></td>
        <td align="left"><%=module_name%></td>
        <td align="center">
            <input type="button" value="修改" />&nbsp;
            <input type="button" value="刪除" />
        </td>
    </tr>
    </pg:item>
<%
    }
%>                                        
    <tr class="table_page_break">
        <td colspan="3">
            記錄數: <%= item_count %>&nbsp;
            頁數：<%= page_count %>&nbsp;
            <pg:first export="firstPageUrl=pageUrl" unless="current">
                <a href="<%= firstPageUrl %>">|&lt;</a>
            </pg:first>
            <pg:skip export="skipBackPageUrl=pageUrl" pages="<%= -10 %>">
                <a href="<%= skipBackPageUrl %>">&lt;&lt;&lt;</a>
            </pg:skip>
            <pg:prev export="prevPageUrl=pageUrl">
                <a href="<%= prevPageUrl %>">&lt;&lt;</a>
            </pg:prev>
            <pg:pages><%
              if (pageNumber == currentPageNumber) {
                %> <b><%= pageNumber %></b> <%
              } else {
                %> <a href="<%= pageUrl %>"><%= pageNumber %></a> <%
              }
            %></pg:pages>
            <pg:next export="nextPageUrl=pageUrl">
                <a href="<%= nextPageUrl %>">&gt;&gt;</a>
            </pg:next>
            <pg:skip export="skipForwardPageUrl=pageUrl" pages="<%= 10 %>">
                <a href="<%= skipForwardPageUrl %>">&gt;&gt;&gt;</a>
            </pg:skip>
            <pg:last export="lastPageUrl=pageUrl" unless="current">
                <a href="<%= lastPageUrl %>">&gt;|</a>
            </pg:last>
            <input type="text" size="4" name="page_no" id="page_no" />
            <input type="button" value="go" onclick="goto_page_no()" />
        </td>
    </tr>
    <tr class="table_button_row">
        <td colspan="3">
            <input type="button" value="肯定" class="form_button" />
        </td>
    </tr>
</table>
</pg:pager>
</form>
<script type="text/javascript">
function goto_page_no()
{
    var em_page_no = document.all["page_no"];    
    var page_no = parseInt(em_page_no.value);
    var offset = <%= maxPageItems %> * (page_no - 1);
    document.location.href = "<%= url %>?pager.offset=" + offset;
}
</script>

分頁效果以下圖所示：

獲取數據

該段代碼用於獲取顯示的頁面數據，在此作了以下設定，取得的顯示數據的格式爲Vector<String[]>，每頁顯示25行記錄，獲取頁數據時須要從新執行查詢，其處理操做爲/INtools/Db/ListTable.action，這裏我使用了struts框架，這表示一個servlet處理類，也能夠是一個JSP文件。並進行了頁數計算。

pager標籤

items：表示記錄數

url：表示獲取數據時的處理程序

index：頁碼的顯示方式，能夠爲center、forward、half-full

maxPageItems：每頁顯示的記錄數

maxIndexPages：顯示的頁碼數

isOffset；

export：將pager標籤支持的變量導出，

N.3 技巧

若是要實現以下功能：

指定跳轉到某頁

生成分頁內容時須要參數TableName

可寫入以下代碼：

<form id="form1" name="form1" method="get" action="...">
...
    <pg:param name="TableName" value="<%= search_table_name %>" />
    <input type="hidden" name="TableName" id="TableName" value="<%= search_table_name %>" />
    <input type="hidden" name="pager.offset" />
    <input type="button" value="go" onclick="goto_page_no()" />
...
</form>

<script type="text/javascript">
function goto_page_no()
{
    var offset = 記錄偏移值;
    var frm = document.form1;
    frm.elements["pager.offset"].value = offset;
    frm.submit();
}
</script>

其中<pg:param>是用於點擊頁碼翻頁時提供查詢參數，若是打開生成後的源代碼，會發現全部的翻頁標記(<a>)都加了一個參數TableName，而<input type="hidden" name="TableName" />則用於指定跳轉頁時提供查詢參數，<input type="hidden" name="pager.offset" />則用於提供指定跳轉頁時的記錄偏移量，其名稱格式爲「[pager].[pg:pager標籤的export屬性中的offset表示法]」。

值得注意的是，此處的<form>須要使用「get」方式，若是使用「post」方式，使用跳轉按鈕提交的「TableName」參數會翻倍，例如，第一次爲「a」，第二次則爲「a,a」。