分页(Pagination)

分页(Pagination)

1 Paginator 使用

这是我们的自己定义的分页类, 我们必须要了解如何使用它。

首先,在服务端,创建分页对象,将所有跟分页相关的参数和数据都封装到分页对象里:

// 1. 从用户请求中获取相应的分页参数
//    最重要的是 pageNumber(第几页), 其次可选的是 pageSize(每页多少条), linkSize(分页导航显示多少页码)
//    如果用户没有传递来这样的参数,初始化为默认值
int pageNumber = request.getParameter("pageno") == null ? 1 : Integer.parseInt(request.getParameter("pageno"));
int pageSize = 9;
int linkSize = 7;

// 2. 使用上面获取的参数,创建我们的分页对象
Paginator<Person> paginator = new Paginator<>(pageNumber, pageSize, linkSize);

// 3. 从数据库里,查询记录总数。然后将结果保存到分页对象中
int personCount = personDAO.getPersonCount();
paginator.setRowCount(personCount);

// 4. 从数据库里,查询分页数据。然后将结果保存到分页对象中
int offset = paginator.getOffset();   // 计算数据的序号
List<Person> persons = personDAO.findPersonsByPage(offset, pageSize);
paginator.setData(persons);

// 5. 将分页对象保存起来,用于页码渲染
req.setAttribute("paginator", paginator);
req.getRequestDispatcher("pages/pagination.jsp").forward(req, resp);

在方法 PersonDAO#findPersonsByPage() 里,我们将进行分页查询。 这里给提供了一个示例方法,可以将普通的查询语句包装为分页查询语句。

// 将普通的查询语句,转换为一个分页查询语句
// MSSQL 中的一个简单示例, [用法示例]:
//    String pagedSQL = pageLimitSQL("select id, name, weixin from person where id > ?", "id", 200, 10);
//    ps = conn.prepareStatement(pageLimitSQL);
//    ps.setInteger(1, 33);
//    ...
public static String pageLimitSQL(String sql, String orderBy, int offset, int size) {
    String sql_temp = "select * from ( select *, ROW_NUMBER() over (order by %s) _rn from ( %s ) as __o ) as __p where _rn >= %d and _rn < %d";
    return String.format(sql_temp, orderBy, sql, offset, offset + size);
}

其次,在 JSP 页码中,大致分为三部分:

  1. 头部导航(header: 总共 m 页,当前 n 页)
  2. 分页数据列表(table)
  3. 分页导航(nav: Pre |1 | 2 | 3 | 4 | 5 | Next)
<body>

  <div id="main">

    <!-- 第一部分,头部导航 -->
    <header>当前 ${pager.current} &#39029;&#65292;&#24635;&#20849; ${pager.pageCount} 页 </header>

    <!-- 第二部分,数据展示 -->
    <table>
      <tr>
        <th>ID</th> <th>名字</th> <th>微信</th>
      </tr>
      <c:forEach items="${pager.data}" var="i">
        <tr>
          <td>${i.id}&lt;/<span class="org-function-name">td</span>&gt; &lt;<span class="org-function-name">td</span>&gt;${i.name}</td> <td>${i.weixin}</td>
        </tr>
      </c:forEach>
    </table>

    <!-- 第三部分,页码导航 -->
    <nav style="text-align: center">
      ${pager.outputPageNav("/url", "pageno", true, true);
    </nav>

</body>

因为 页码导航栏 的 html 基本是一致的,并且里面的计算逻辑有些无聊,所以最好单独封装在分页对象里。导航栏的样式需要通过外部 css 控制。 这里,我们封装到了 Paginator#outputPageNav() 方法里,在 jsp 页码里直接使用 el 表达式调用就行了:

${pager.outputPageNav("/url", "pageno", true, true)
  • 第一个参数代表分页的链接
  • 第二个参数代表用户链接中代表分页的字段的名字
  • 第三个参数代表是否要生成“首页/末页”
  • 第四个参数代表是否要生成“上页/下页”。


2 Paginator 封装

如果数据量大的时候,数据全部取出来并显示在页面上基本是不现实的。

  1. 数据库忙死
  2. 数据传输慢死
  3. 用户的浏览器卡死
  4. 用户翻页累死
  5. 等等等

所以需要一部分一部分显示,这就需要 分页 功能。分页是 web 开发需要掌握的基本技能。

如果要分页,作为服务器,需要掌握用户的下面几个需求,这是基本需求:

  1. 要看第几页
  2. 每页显示多少条
  3. 分页导航栏怎么显示,显示多少页码

所有这些参数需要用户通过请求的方式告知服务器。

/myrequest?pageNumber=x&pageSize=y&linkSize=z

当然,不可能强制要求用户将这些参数全都传递给服务器。如果没有传递的话,服务器需要自己给这些参数初始值。 比如, pageNumber 的初始值为 1。

然后,我们需要使用这些参数查询数据库:

  1. 数据的总条数 rowCount: select count(*) from table
  2. 分页的数据 dataList: select top 20 * from table

而且,我们需要获得分页导航栏要显示的页码等,这需要一定的计算过程。

等等。

按照 OO 思想,上面的一切,最好封装起来:既方便使用,又清晰明了。而且封装好了以后直接拿来用,很爽。

比如,我们封装到一个类里,名字叫 Paginator:

  1. 我们需要将所有跟分页相关的参数放进去
  2. 我们需要将查询到的记录总数放进去
  3. 我们需要将数据库查询所用的页码计算放进去
  4. 我们需要将分页查询得到的数据放进去
  5. 我们需要将计算总页数,计算导航栏页码等也放进去

总之,跟分页相关的一切,我们都可以封装到里面。

如果封装好了,剩下就是使用了。

先说这么多吧,累了,休息了。

看代码,不懂问。


Author: imfine

Created: 2017-08-15 Tue 11:06

Emacs 25.2.1 (Org mode 8.2.10)

Go ahead, never stop.


### 回答1: Pagination分页)是一种常见的网页设计和开发技术,通常用于在列表或搜索结果等长文本内容中显示大量数据,以提高用户体验和页面性能。它将长文本内容分割成多个页面,并允许用户通过点击页面导航按钮或输入页面数字来浏览这些页面。通常,每个页面显示一定数量的项目,例如每页显示10个项目。分页还可以包括一些额外的功能,例如搜索框、排序选项和筛选器,以帮助用户更轻松地浏览和查找所需的内容。 ### 回答2: pagination分页)是指将大量内容或数据按照一定规则划分为多个页面展示,以方便用户浏览和管理。在网页设计和数据库查询中,分页是一种常见的技术手段。 分页的优势在于能够对大量内容进行合理的划分和呈现,避免了用户一次性加载大量数据而导致页面加载速度变慢的问题。同时,分页还可以有效地减小服务器负载,提升系统性能和响应速度。 分页的实现方式主要依靠服务器端和客户端共同配合完成。服务器端通过数据库查询语句的limit和offset来控制返回的数据范围,从而实现数据的分页查询。客户端则通过页面上的分页导航栏或者滚动加载等方式将分页数据展示给用户。 分页通常分为两种基本类型:基于页码的分页和基于滚动的分页。基于页码的分页是指通过点击页码导航栏来切换不同页码对应的数据页面。基于滚动的分页则是指当用户滚动至页面底部时,自动加载下一页数据。 在分页设计中,需要考虑几个关键因素。首先是每页展示的数据量,过多会导致页面加载速度变慢,过少则会增加用户切换页面的频率。其次是分页导航的设计,需清晰明了,方便用户直观操作。再次是当前页码的显示,以及提供跳转至指定页码的功能,以方便用户快速定位到所需页面。 总的来说,pagination分页)是一种有效管理和展示大量内容或数据的技术手段,通过合理的分页设计,可以提高用户体验和系统性能。 ### 回答3: 分页pagination)是一种常见的网页设计技术,用于将大量内容按照一页一页的方式分隔显示,从而提供更好的用户体验。 分页的作用在于将长篇的文章、产品列表或搜索结果等大量信息分割成若干页面,使用户能够逐页浏览,提高浏览效率。通常,一页显示一定数量的内容,用户可以通过点击页码或上一页/下一页按钮来切换页面。在每一页的底部,还会提供快速跳转到指定页码的选项。 分页技术的优势在于它可以减轻页面加载的负担,提高页面加载速度。当页面内容过多时,如果采用一次性加载全部内容的方式,可能导致页面加载时间过长,并且在网速较慢的情况下可能会影响用户的体验。而采用分页技术,只需加载当前页面的内容,可以有效减少等待时间,提升用户的感知满意度。 分页还可以增加网页内部链接和导航的可用性。通过在页面底部提供跳转链接和前后页切换按钮,用户可以更方便地导航到其他页面,从而实现对内容的快速浏览和检索。 需要注意的是,分页的设计要合理,不能过多地划分页面,以免给用户带来翻页频繁、体验不佳的感觉。同时,应该提供直观明了的页面导航元素,为用户提供良好的交互体验。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值