当前位置: 首页 > 编程笔记 >

Java Web中常用的分页组件(Java端实现)

薛宜
2023-03-14
本文向大家介绍Java Web中常用的分页组件(Java端实现),包括了Java Web中常用的分页组件(Java端实现)的使用技巧和注意事项,需要的朋友参考一下

 前言

好久没写Web程序了,这一段时间看了看原来师弟们做的一些程序,感觉还是有很多不足,一个比较典型的例子就是分页查询的实现,正好借着这个机会简单记录一下。

分析

使用场景

“分页”在Web程序里非常常见,比如我们在页面上经常要展示一些列表信息,通常情况下,如果数据过多,我们在一屏上难以罗列出所有的记录,而且很多时候我们可能只是看看比较Top的一些记录,因此,在这种情况下使用“分页”查询只展示部分数据是比较合适的。

实现原理

从数据库角度上来说,分页查询实现的难度并不是很大,当然不同的数据库实现是有一些差异的。以MySQL为例,我们通常会写出如下的SQL语句:

# 简单的单表查询
select [fields] from [table_name] where [expression] order by [field] [asc|desc] limit [offset], [size]

其中有几处地方我们比较关注,第一个就是order by后的字段field和排顺规则,第二个就是limit之后的数据偏移量offset和大小size。

所以,以上几个参数是我们实现分页查询一个关键。

实现

这里的实现主要是指Java后台的实现,关于如何编写一个前端分页插件不在此文的讨论之列。我们来简单梳理一下整个业务逻辑的交互过程,就是”前端查询参数”->”后台业务逻辑查询”->”返回结果集到前端”。

那么问题来了,前端一般要传递哪些参数到服务器后台呢?

回到上面的实现原理上,我们发现,这4个参数我们都是需要的,而且它们不是固定的。从开发角度上来讲,我们首先需要的参数是sortField,sortOrder,即排一定的计算序字段和排序方式,offset我们通常会根据一定的计算规则进行计算,一般在页面上我们使用的是pageCurrent,即用户需要查询的页数,另外页面还必须传递一个参数即pageSize,即每页要显示的数据总量,这样,我们就可以根据pageCurrent和pageSize来计算出offset和size,计算公式如下所示:

offset=(pageCurrent−1)∗pageSize
size=pageSize

OK,我们梳理出来了4个字段,即sortField,sorOrder,pageCurrent和pageSize。这些参数是前台应该传递给后台服务的,当然,从程序的健壮性来说,如果用户不传递这些字段,我们也应该有一些默认的实现,比如说如果不传递当前页数,我们默认就是第一页,如果不传递pageSize,我们可以默认其大小为每页30条……那么,第一个Java Bean就出来了,我们称为PageParam类。

 public class PageParam {
  private static final Integer DEFAULT_PAGE_CURRENT = 1;
  private static final Integer DEFAULT_PAGE_SIZE = 30;
  /**
   * 排序字段
   */
  private String sortField;
  /**
   * 排序方式
   * asc | desc
   */
  private String sortOrder;
  /**
   * 查询的当前页
   */
  private Integer pageCurrent = DEFAULT_PAGE_CURRENT;
  /**
   * 查询的数据条目
   */
  private Integer pageSize = DEFAULT_PAGE_SIZE;
  ......
}

现在,我们先忽略服务器端的具体处理流程,来思考一下服务器端需要返回哪些信息到前端页面上进行展示。
下面是我从网上截取的一个典型分页界面(如不能引用请私信我):

 

通过分析,可以看到,当前页pageCurrent是需要的,且通常会特殊展示。另外如果页数过多,在前端界面里通常只会展示部分页值,那么我们也需要来进行判断,通常情况下我们通过判断总页数即可,那么总页数totalPage是需要的。当然,还有一些隐含的参数我们通常也是要传递给前端进行相关的业务处理的,比如说数据的总条目totalSize和一页显示的数量pageSize,这些通常都会在页面进行展示。第二个Java Bean我们成为PageResult类:

public class PageResult<T> {
  /**
   * 返回的数据结果集
   */
  private List<T> resultList;
  /**
   * 总数据条目
   */
  private Integer totalSize;
  /**
   * 总页数
   */
  private Integer totalPage;
  /**
   * 当前页
   */
  private Integer pageCurrent;
  /**
   * 显示的数据条目
   */
  private Integer pageSize;
  ......
}

这里totalPage其实是可以根据pageSize和totalSize进行计算出来的,计算公式如下:

totalPage=totalSize%pageSize==0?totalSize/pageSize:(totalSize/pageSize+1)

在实现里,我们对结果集使用了泛型,主要是为了通用处理。还差最后一点,就是服务器端的处理逻辑,这里不太好说的原因在于现在服务器端的框架太多,如MyBatis,spring JDBC,hibernate等等。不同的框架使用上是有较大差别的,不过有一些比较通用的做法这里简单记录一下。

对任何前端传递过来的参数都必须进行校验。这里主要是pageCurrent和pageSize,因为用户很可能传递过来一些无效值,比如负值-1以及一些不合适值如pageSize取100000000等。

排序字段不是必须的。要根据业务来处理,因为很多时候通过id或者其它字段默认实现就可以了,不需要进行重新排序。
pageSize的值要合适。如果太小会造成页面过于空洞,页数过多;而取值过大则会使页面内容繁杂,通常在一屏比较合适,不需要用户拉动滑动条。

以上所述是小编给大家介绍的Java Web中常用的分页组件(Java端实现),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍Mybatis常用分页插件实现快速分页处理技巧,包括了Mybatis常用分页插件实现快速分页处理技巧的使用技巧和注意事项,需要的朋友参考一下 在未分享整个查询分页的执行代码之前,先了解一下执行流程。 1.总体上是利用mybatis的插件拦截器,在sql执行之前拦截,为查询语句加上limit X X 2.用一个Page对象,贯穿整个执行流程,这个Page对象需要用Java编写前端分页组

  • 本文向大家介绍angularjs使用directive实现分页组件的示例,包括了angularjs使用directive实现分页组件的示例的使用技巧和注意事项,需要的朋友参考一下 闲来没事,分享下项目中自己写的分页组件。来不及了,直接上车。 效果: 输入框可任意输入,并会自动提交到该页 依赖项: fontawesome,bootstrap html: css: directive: 参数: tot

  • 本文向大家介绍JSP实现带查询条件的通用分页组件,包括了JSP实现带查询条件的通用分页组件的使用技巧和注意事项,需要的朋友参考一下 分页功能的代码就是这样的,在需要展示列表的页面,我们基本都需要加上分页功能,如果某天boss想要修改分页功能的样式,我们不能去一个一个的改吧。 下边给大家分享一个自己封装的通用分页组件。 1. 效果展示 2. 使用方式 1 )在需要显示分页信息的位置,直接引入pagi

  • 本文向大家介绍laypage前端分页插件实现ajax异步分页,包括了laypage前端分页插件实现ajax异步分页的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了laypage前端分页插件,ajax异步分页,获取json数据实现无刷新分页,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家学习laypage分页插件有所启发和帮助,谢谢大家的阅读。

  • 增加分页链接将长内容分割成多个短内容,便于浏览与加载。 基本 <ul class="pagination"> <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li> <li class="active"><a href="#!">1</a></li> <l

  • 本文向大家介绍小程序分页实践之编写可复用分页组件,包括了小程序分页实践之编写可复用分页组件的使用技巧和注意事项,需要的朋友参考一下 项目中遇到 tab切换列表,每个tab都需要分页的需求,分页流程具有相似性,于是想将分页封装为组件,方便应用。 组件的应用已写成一个小demo,效果如下图所示(数据用mock模拟): 源码可以查看:wxapp-pagination 项目需求 具体项目需求: 查看自己相