现在的位置: 首页 > 综合 > 正文

分页标签库Pager

2014年09月29日 ⁄ 综合 ⁄ 共 4076字 ⁄ 字号 评论关闭

分页标签库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”。

抱歉!评论已关闭.