网页中常见的分页功能是如何实现的?

日期:2020-08-02 20:36:24 来源:互联网 编辑:小优 阅读人数:204

感谢你的观看,谢谢你。

话不多说,开始今天的学习:

网页中常见的分页功能是如何实现的?(图1)

昨天太晚了,前端写完后根本都没来得及,结果今天发现了一堆的问题。

本来是打算将分页跳过直接学搜索的。

毕竟听说我现在的这种实现方式特low,我查了下教程,后面也确实会再次讲到分页。

但是现在看来是不行了,忽视的点挺多的,对于很多知识点自己掌握的也不扎实。

所以还是花一个晚上的时间将该知识点完善下。

关于后台代码我昨天的笔记中有说明,现在的问题主要是前端的一些问题。

一、前端页面渲染

个人一直对这块不太重视,毕竟主要是Java后台代码的编写,所以基本都是一笔带过。

但是昨天发现自己连基本的一些点都还搞错,这是我无法原谅自己的。

所以打算详细理一理这个实现的思路。

1静态页面

静态页面的代码编写和页面效果就是如下图:

网页中常见的分页功能是如何实现的?(图2)

这是一个有序标签,就是一个页面中有8条这样的数据。

当然这个8也是我们昨天自己定的,可以动态变化,其中有几个比较重要的参数。

但是在静态页面中,这些数据是被写死了的,所以需要通过后台响应的数据动态拼接到页面中。

2后台响应的数据

通过浏览器F12可以打开控制台:

网页中常见的分页功能是如何实现的?(图3)

json数据,我们就可以用键值对来理解它。

①key值为routeData

这个是昨天后台设置的一个key,通过它可以取出其对应的value值。

也就是上图中的Array(8)一个存放有8条数据的集合。

②value值为集合

8条数据各不相同,我们看其中的一条数据,内容也是一个个键值对。

其中最先开始就说明了的4个参数分别为:rimage,rname,routeIntroduce,price。

所以思路就出来了:

先根据key值routeData,取出Array(8)

将该集合使用each方法遍历。

再根据上面4个参数的key取出对应的value。

最后利用“+”将数据拼接到页面中。

3前端页面拼接

网页中常见的分页功能是如何实现的?(图4)

关于发送请求就不再赘述了,直接说返回值,也就是result。

①result.routeData

这个取出的就是那个装有8条数据的集合,所以要将其遍历。

②遍历routeData

这个就是我昨天犯的最蠢的一个错误,调用的是each方法,其有两个参数:

index:对应的是集合中的索引,该案例中也就是0-7。

route:对应的是集合中的元素。

还记上面一直在强调的4个重要参数么?

就是通过这个route来取出来的,根据key来取:

route.rimage。

route.rname。

route.routeIntroduce

route.price。

最后通过加号完成数据的动态拼接。

③渲染页面

通过id选择器找到对应的标签,也就是最先开始的那个有序标签它的id为routePageList。

使用html方法将拼接页面渲染到该标签中。

4最后做一个

网页中常见的分页功能是如何实现的?(图5)

就会从数据库中根据页码数和页面数据大小(这里是8)查询出对应的8条数据。

每条数据各不相同,随着页码数动态变化。

5功能完善

一般都是默认第一页数据,所以代码补全:

网页中常见的分页功能是如何实现的?(图6)

在页面加载事件中,调用getPageData方法:页面数为1,每页展示数量为8条

二、分页总页数

有的时候为了用户体验,会在分页中说明总记录数和总页数,如下图:

网页中常见的分页功能是如何实现的?(图7)

引入两个新的变量:总数据数totalCount,和总页数totalPage。

这两者之间有什么关系呢?

就又需要数学中的运算了,分类讨论:

如果总数据能被每页数据量整数:总页数=总数据数/页面数据量。

如果总数据不能被每页数据量整数:总页数=总数据数/页面数据量+1。

既然如此,使用三元运算符即可完成该功能。

好,思路分析完毕,开始写代码:

2分页总页数后台代码

因为是在分页中加入了一个小的功能,所以只需要在service层中增加代码即可:

网页中常见的分页功能是如何实现的?(图8)

①查询总数据数

通过dao层查询数据库中对应数据的总条数。

②根据总数据数计算总页数

用三元运算符表示,即:

总数据数能被页面数据量整除么?能就是前面的计算方法:不能就是后面的计算方式。

③数据封装

昨天只封装了routeData,今天等于是增加了一个小功能,还是以键值对的方式完成封装。

通过浏览器控制台可以查看对应的数据。

网页中常见的分页功能是如何实现的?(图9)

①sql语句编写

通过聚合函数count(*)可以编写查询数据量的sql语句。

其中rflag这个字段在数据库中是表示上下架的意思,1即为上架。

②jdbcTemplate查询

通过queryForObject方法查询数据。

因为查询的返回值是一个int类型,所以参数为integer的class对象。

注意使用queryForObject方法需要主动的try…catch,具体原因我们几天前分析过源码。

3前端渲染

网页中常见的分页功能是如何实现的?(图10)

获取响应数据中的totalPage和totalCount,再将其动态拼接。

最后通过类选择器,渲染到对应标签。

当然这里类选择器不太准确,页面可能存在多个相同的类,最好在对应标签自定义一个id。

再使用id选择器,这是最保险的。

最后

谢谢你的观看。

如果可以的话,麻烦帮忙点个赞,谢谢你。

本文相关词条概念解析:

页面

雷晓东,男,1973年生,博士,教授,博士生导师。2006年毕业于北京化工大学应用化学专业获工学博士学位后留校任教。主要从事水处理工程与技术。无机功能材料及其应用、膜材料制备及其性能、废弃资源有效利用、镁资源有效利用方面的科研与教学工作。现承担国家支撑计划、863计划和国家自然科学基金和与企业合作的项目等共9项。2013年英国UniversityCollegeLondon(UCL)访问学者。已在AIChEJ.、Chem.Eng.Sci.和J.Mater.Chem.等刊物上发表论文六十余篇,获授权专利16项,参与撰写专着2部。ACSAppl.Mater.Interfaces、Chem.Eng.J、Appl.Catal.A、Ind.Eng.Chem.Res.、DaltonTransRSCAdv.和Nanoscale等期刊审稿人。

网友评论
相关文章
office学习分享—Excel如何批量添加链接

office学习分享—Excel如何批量添加链接

office学习分享—Excel如何批量添加链接[详情]

如何实现现代化的数据架构

如何实现现代化的数据架构

如何实现现代化的数据架构[详情]

据外媒报道,14程序代码得知苹果正在开发AR,Chrome的网页翻译功能

据外媒报道,14程序代码得知苹果正在开发AR,Chrome的网页翻译功能

据外媒报道,14程序代码得知苹果正在开发AR,Chrome的网页翻译功能[详情]

网站地图    Copyright     2016-2018  资讯网   All rights reserved.