Skip to content

feilongDisplay pager

feilong edited this page May 22, 2020 · 1 revision

1. 文档说明

1.1 概述

分页是商城乃至整个互联网应用最常用的功能之一,好的分页标签及方案可以降低开发的复杂度和维护量,缩短工程师的开发时间.

1.2 阅读对象

面向具有一定的网站开发能力,了解 JAVA、JSP 等开发语言的网站开发、维护人员

1.3 专业术语

术语			|解释
:---- 		|:---------
taglib		|自定义标签
pager		|分页
velocity	|是apache基金会的一个java模板引擎(`template engine`),参见 https://velocity.apache.org/
Jsp			|全名为`Java Server Pages`,是由Sun 倡导、许多公司参与建立的一种动态网页技术标准,参见 https://www.oracle.com/technetwork/java/javaee/jsp/index.html
properties	|properties文件是java中的一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值"的格式
I18n		|来自英文单词 `internationalization` 的首末字符i和n,18为中间的字符数,是 `国际化` 的简称.
Ajax		|即 `Asynchronous Javascript And XML`(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术

2. 特性介绍

  1. 支持 国际化

  2. 支持 Ajax 分页,参见 Ajax 分页使用步骤

  3. 当前页码永远居中

    center

  4. 内置页码输入文本框,支持快速跳转

    如可实现以下功能: goto

  5. 支持类似于淘宝最大分页码 100 这样的控制

    如可实现以下功能:

    maxsize

    见参数 maxShowPageNo

  6. 分页页码支持根据页码数字动态显示页码个数

    比如当当前页码是1001页显示6个页码,当当前页码是101,显示8个页码,见参数 dynamicNavigationPageNumberConfig

  7. 自动识别是否是forwoad 连接

  8. 支持自定义velocity分页模版

    见参数 vmPath

  9. 支持皮肤切换

    内置26种皮肤 (需要引入feilong-pager.css), 如果您的网站有自己特殊的样式,可以重新修改vm模板结构或者按照皮肤结构自定义css特殊的皮肤(建议选择后者) 内置皮肤样式参见附录部分

  10. 经过大型项目检验,通用严格的安全扫描测试

    Esprit,Nike,Underarmour,blanja,speedo 等大型项目都有使用该标签,并通过严格的安全扫描测试

3. 演示

3.1 演示

示例: 当前页面路径

	https://127.0.0.1:8088/pager?page=8&name=%E9%A3%9E%E5%A4%A9%E5%A5%94%E6%9C%88 

带皮肤的页面效果:

result

4. 跳转分页使用步骤

跳转分页顾名思义,点击分页页码,浏览器地址栏地址变更,显示新的页面

4.1 步骤1.JSP引用自定义标签

	<%@ taglib prefix="feilongDisplay" uri="https://java.feilong.com/tags-display"%>

4.2 步骤2.JSP使用自定义标签

4.2.1 精简参数写法

	<feilongDisplay:pager count="${pagination.count}"/>

仅需要总数参数 count 即可,其余参数缺省,均使用默认值

4.2.2 完整参数写法

	<feilongDisplay:pager 
		count="${pagination.count}" 

		charsetType="utf-8" 
		dynamicNavigationPageNumberConfig="1000=6&100=8&1=10"
		locale="zh_CN" 
		maxShowPageNo="-1"
		pageParamName="page" 
		pageSize="10"
		pagerHtmlAttributeName="feilongPagerHtml1" 
		skin="scott"
		vmPath="velocity/feilong-default-pager.vm" 
	/>

每个参数的含义,请参见下面 参数表格部分

5. 标签参数概览

5.1 Required Parameters(必需参数):

参数 说明 类型 Since 默认值
count 数据总数 Integer 1.0 -

5.2 Optional Parameters(可选参数):

参数 说明 类型 Since 默认值
pageSize 每一页显示多少个数据 Integer 1.0 20
pageParamName url分页页码参数 String 1.0 pageNo
pagerHtmlAttributeName vm被解析出来的文本,会被存在该变量中 String 1.0.5 "feilongPagerHtml"
locale 国际化语言,
支持 java.util.Locale 或 String 类型的实例
Locale 1.0.5 request.getLocale()
charsetType url编码 String 1.0.5 UTF-8
maxShowPageNo 显示最大的页码数,
(-1或者不设置,显示所有页数)
类似淘宝不管结果多少,最多显示100页
Integer 1.0.5 -1
vmPath 基于classpath 下面的velocity模版文件路径 String 1.0 "velocity/feilong-default-pager.vm"
skin 皮肤,内置24种常用皮肤
需要引入feilong-pager.css
String 1.0 "digg"
dynamicNavigationPageNumberConfig 动态显示导航页码数量 String 1.9.2 1000=6&100=8&1=10

6.标签参数详细说明

6.1 count 数据总数 (必需参数)

我现在有 10000 条数据, 怎么做个简单的分页?

分页标签中,count 是数据总数,是必须参数

<feilongDisplay:pager count="10000" />

显示效果:

6.2 pageSize 每一页显示多少个数据,默认 20

我现在有 10000 条数据, 每页48条数据,怎么做?

你可以设置 pageSize 属性

<feilongDisplay:pager count="10000" pageSize="48" />

显示效果:

6.3 maxShowPageNo 显示最大的页码数

我在淘宝,不管搜索东西多少,最多显示100页 ,怎么做呢? maxsize

你可以使用 maxShowPageNo 参数,显示最大的页码数,(-1或者不设置,默认 -1 显示所有页数).

<feilongDisplay:pager count="10000" pageSize="48" maxShowPageNo="100" />

显示效果:

说明:

目前很多网站都有最多分页数,这是一种折中的处理方式,空间换时间.
数据查询越往后翻,对服务器的压力越大,速度越低,而且从业务上来讲商品质量也越差,所以就没有必要给太多了.
新浪微博的时间轴也只给出了10页,同样的折中处理. 

6.3 locale 参数 国际化语言,支持 java.util.Locale 或 String 类型的实例

默认分页显示的提示以及文字都是中文的,我现在有英文网站,需要显示英文,怎么办?

你可以使用 locale 参数,值可以是字符串,比如 en_US,也可以是 java.util.Locale对象

6.3.1 String 类型的示例:

注:since 1.7.2

<feilongDisplay:pager count="10000" locale="en_US" />

显示效果:

显示的文案,可以通过修改资源文件来修改 ,参见 feilong-pager.properties

6.3.2 java.util.Locale 对象 ,spring-mvc 中使用的问题

6.3.2.1 背景:

假设服务器是英文语言,某网站是简体中文繁体中文两种语言,

如果是使用spring-mvc,不能直接使用 ${requestScope['org.springframework.web.servlet.i18n.CookieLocaleResolver.LOCALE']},

该属性如果用户不切换网站语言,那么值是null,那么分页标签会使用默认值 request.getLocale() ,显示英文的分页标签,但是该网站其实没有英文的站点,那么就不符合站点要求

6.3.2.2 临时方案:

在每个标签上方,使用 spel 表达式(参见 https://docs.spring.io/spring/docs/current/spring-framework-reference/html/expressions.html ),获得当前的网站语言

示例:

	<%@ taglib prefix="spring" uri="https://www.springframework.org/tags"%>
	<spring:eval var="locale" expression="T(org.springframework.web.servlet.support.RequestContextUtils).getLocale(pageContext.request)"></spring:eval>
	
	<feilongDisplay:pager 
		...
		locale="${locale}" 
		.../>
6.3.2.3 建议方案:

使用 feilong spring el

注:since 1.7.2

示例:

	<%@ taglib prefix="flsp" uri="https://java.feilong.com/el-spring"%>

	<feilongDisplay:pager 
		...
		locale="${flsp:getLocale()}" 
		.../>

6.4 pageParamName

url分页页码参数,默认 pageNo

即用来控制url里面的分页页码参数名字,如下图,通常不需要修改

6.5 pagerHtmlAttributeName

vm被解析出来的文本,会被存在在这个变量中,作用域为 pageContext,以便重复使用, 默认值 feilongPagerHtml

如果一个页面有两块地方需要显示相同的分页, 并且是一模一样的结果, 那么第二块地方你不需要再次使用<feilongDisplay:pager ...> 标签,可以直接使用上面的标签的结果(存储在 pageContext 作用域)

示例:

	<dt>&lt;feilongDisplay:pager count="10000" charsetType="utf-8" maxShowPageNo="100" pageParamName="page" pageSize="10" locale="${locale}"
		vmPath="velocity/feilong-default-pager.vm" pagerHtmlAttributeName="feilongPagerHtml1" dynamicNavigationPageNumberConfig="1000=6&100=8&1=10" skin="meneame" /></dt>
	<dd>
		<feilongDisplay:pager count="10000" charsetType="utf-8" maxShowPageNo="100" pageParamName="page" pageSize="10" locale="${locale}"
			vmPath="velocity/feilong-default-pager.vm" pagerHtmlAttributeName="feilongPagerHtml1" dynamicNavigationPageNumberConfig="1000=6&100=8&1=10" skin="meneame" />
	</dd>

	<dt>\${feilongPagerHtml1}</dt>
	<dd>${feilongPagerHtml1 }</dd>

	<dt>&lt;%=feilongPagerHtml1%></dt>
	<dd><%=feilongPagerHtml1%></dd>

显示效果:

6.6 charsetType

url编码(默认是 utf-8),主要是处理 url 参数编码

6.8 vmPath

基于classpath 下面的velocity模版文件路径,默认的velocity\feilong-default-pager.vm ,虽然已经包含了大部分需求功能,但是可能实际项目中可能有特殊的需求,因此可以使用自定义pager vm 模板

参见 feilongDisplay-pager-template

6.9 dynamicNavigationPageNumberConfig

动态显示导航页码数量(默认是 1000=6&100=8&1=10).

  • 背景: 一般的分页标签是固定的分页页码数量,一般是10个,如果当前页码页码大于1000的时候,还是10条页码的显示(如1001,1002,1003,1004,1005,1006,1007,1008,1009,1010),那么页面分页会很长 ,可能打乱页面布局.因此使用动态显示导航页码数量

  • 规则: 示例:1000=6&100=8&1=10

    1. 含义:当当前页码>=1000的时候,显示6个页码;当当前页码>=100的时候显示8个页码;当当前页码>=1的时候,显示10个页码
    2. 设置规则类似于url的参数规则
    3. 分隔之后,key是当前页码参考值,value是显示页码数量,如果当前页码大于等于key的时候,那么页码的数量会显示值的数量,
      比如上例中,如果当前页码是1001,那么分页页码会显示成6个, 而如果当前页码是5,那么会显示10个页码
    4. 顺序不限制,不需要值大的写前面,程序会自动排序,比如你可以写成 1=10&100=8&1000=6
    5. 如果参数里面有相同名字的key,那么转换的时候取第一个值,比如1000=6&1000 =7&100=8&1=10,有效数据为1000=6&100=8&1=10
    6. 默认是 1000=6&100=8&1=10,如果设置为empty或者blank, 那么表示不使用动态显示的功能,永远显示10个页码
    7. 当然如果你需要不管什么时候都显示10个,除了将此值设置为empty或者blank外,你还可以设置为 1000=10&100=10&1=10,值设置为相同

示例: 当页码大于 1000的时候 显示 6个

	<feilongDisplay:pager count="10000" pageSize="10" dynamicNavigationPageNumberConfig="1000=6" />

显示效果:

6.10 skin

皮肤,默认 digg ,详细参见 皮肤

7 Ajax分页使用步骤

参见 Ajax分页

8. 自定义velocity pager分页模板

参见 自定义velocity pager分页模板

8.1 下拉框式分页

参见 下拉框式分页

9.参考

core

Clone this wiki locally