当前课程知识点：软件开发实训--动态网站开发 > 8 用户管理功能实现三 > 8.1用户列表分页基本实现 > 8.1.1用户列表分页基本实现
同学
你好
欢迎回到软件开发实训课堂
从上节课我们已经实现了用户的基本的
增删改查操作
但是在查询的列表页
如果说信息比较多的话
那么一个页面显示起来就比较吃力了
所以我们需要对列表页进行分页操作
那么这节课我们就来看一下
如何让页面进行分页
而我们在实现控制器的时候
在list方法里已经给出了分页的对象
默认情况下
它是第一页索引为零
然后每页取20条数据
这是它默认情况下所给出的数据
然后返回时它返回的是一个配置对象
而配置对象中包括了一个实体对象
同时配置对象还包括了其他的分页信息
比如说当前页号
总页数等等
有了这些信息
我们就可以对列表页进行分页了
我们可以实现一个通用的分页的碎片
这样每次我们做列表页时
只要把这个碎片加入到
对应的程序里去就可以了
现在我们来看一下
我们先在listuse里边去实现它
这也是为了方便调试
实现好了之后我们再来处理它的碎片
在这里我们加入一行
我们的分页呢采用
提供的分页导航器
所以样式类就使用它的相关样式就可以了
好
首先我们用一个导航
然后我们用UL处理相关的页面
对应的页号
这里边LI显示每一个页号
LA里面的A显示对应的数字
我们先来进行一个简单的循环
那么循环使用谁来循环
刚才说了
查询出来的结果
pages 对象它包括了一个总页数
所以我们在这里只要输出总页数信息就可以了
好
循环
我们用P作为中间变量
对象pages.total
pages总页数
然后我们给他一个链接
这个class我们可以给它写成page
-link
而每一个Li我们给他一个样式
page-item
我们来看一下
这样我们就在A的位置输出一个它的页号
P是临时变量
我们循环的次数是
totalpages
在这里我们还需要生成一个序列
number
.sequence到我们的总页数
这里边需要再这样去求取
现在我们从一开始输出P
我们给导航加一个
pagination
表明我们这是一个分页器
现在我们来看一下
他是否能够显示出来
numbers
sequence
我们来看一下
检查一下我们的信息
因为他说是sequence出现了错误
我们看这少一个圆括号
好
改正后我们去刷新界面
这样我们会看到分页器已经出现了
但是出现了一个小圆点
这是因为我们把样式类加错了地方
我们应该把放在UL上
现在我们再去刷新就看到分页器了
那么分页器到底不起作用
我们可以加一些信息进去
我们给他一个信息
看一下
pages等于零
and size
等于1
这样我们就有三页
看一下
然后我们就可以去再点击我们对应页号时来
传送给它
现在我们改变超链接的地址
超链接的地址实际上就是我们当前页面的地址
列表页
然后我们传递相关的信息
第一个是配置当前页
然后是尺寸
这里我们暂时全部用一来表示
后面我们可以把它去掉
这是为了测试的方便
那么page来输出是多少呢
注意看
就是我们上面循环的
P但是它是索引
所以一定要减去一个一
我们来看
用字符串的形式把它连接起来
加号
然后P好
我们来看一下
刷新页面
我们点击第二页
第三页
你可以发现
当我们点击的时候
它实际上只出现了两条数据
而我们的总数据并不止两条
我们一共是
好
来看一下
一共是三条
但他实际上只出现了后面两条信息
这是因为我们没有page等于0的时候
当等于1的时候
我们显示他是第二条数据了
而page没有等于0的时候
因此上我们在这里页码
与我们的所以一定要有一个区别
我们减去索引号的值
所以我们得减个一
这样我们第一页实际上就是0页
它的索引就是零
我们再来看
这样我们第一条数据就出来了
第二条数据以及第三条数据
当然对于复杂一点的页面导航
我们的页面非常多的时候
你还要去省略相关的页码
实际上可以作为一个通用的分页器
所以我们可以把它定义一个碎片
fragment等于pager
而这个碎片并不需要与当前的数据进行关联
而紧紧关联的是当前的页面的网址
所以这个要注意
那么当前页面在执行数据查询时
你需要把关键字用pages
看一下我们的控制器里的例子的方法中
查询结果用关键字pages来提供
到了界面上它就能够执行这样的操作
所以我们的页面的分页器
就可以简单的完成了
我们这里写一个注释
需要的数据
第一个是查询结果
用pages作为关键字且是
分页查询
也就是说你提供了page这样的数据
第二个
当前网址必须是查询页面
好
关于列表的基本分页就讲到这里
下节课我们再见
-1.1课程介绍
--1.1.3随堂测试
-1.2网站需求分析
--1.2.4随堂测试
-1.3网站首页分析
--1.3.3随堂测试
-1.4导航菜单分析
--1.4.3随堂测试
-1.5内容区域分析
--1.5.3随堂测试
-1.6内容副页面分析
-1.7编写需求文档
-2.1后端页面总体分析
--2.1.3随堂测试
-2.2用户管理功能设计
--2.2.3随堂测试
-2.3内容与分类功能分析
--2.3.3随堂测试
-2.4网站配置功能设计
--2.4.4随堂测试
-2.5数据库及表结构分析
-总体设计文档
-3.1前台模板约定
--3.1.3随堂测试
-3.2网站配置接口设计
--3.2.3随堂测试
-3.3菜单接口设计
--3.3.3随堂测试
-3.4内容接口设计
--3.4.3随堂测试
-3.5幻灯片接口设计
--3.5.3随堂测试
-补充设计文档
-4.1用户管理功能设计
--4.1.3随堂测试
-4.2菜单管理功能设计
--4.2.3随堂测试
-4.3内容管理功能设计
--4.3.3随堂测试
-4.4网站配置信息设计
--4.4.3随堂测试
-完成设计文档
-4.6随堂测试
-5.1开发环境搭建
--5.1.2随堂测试
-5.2Web前端环境搭建
-5.3创建用户实体
--5.3.2随堂测试
-5.4用户实体表创建与初始化
--5.4.2随堂测试
-5.5用户数据访问接口实现
--5.5.2随堂测试
-5.6环境搭建问题
-6.1用户服务层接口实现
--6.1.2随堂测试
-6.2用户列表和编辑控制器实现
--6.2.2随堂测试
-6.3用户存储和删除控制器实现
-6.4用户添加、编辑界面实现
-6.5用户管理添加用户调试
-7.1用户查询模板实现
--7.1.2随堂测试
-7.2用户信息编辑的实现
-7.3单个用户删除实现
-7.4多个用户删除实现
-8.1用户列表分页基本实现
-8.2用户列表查询结果分页实现
-8.3通用日期处理
-8.4整型日期处理
--8.4.2随堂测试
-8.5枚举数据的应用
-9.1登录逻辑实现
--9.1.2随堂测试
-9.2登录界面及流程调试
--9.2.2随堂测试
-9.3管理主界面实现
--9.3.2随堂测试
-9.4授权验证拦截器实现
--9.4.2随堂测试
-9.5拦截器调试
-10.1分类接口实现
-10.2分类添加、编辑实现
-10.3分类树结构实现
-10.4分类删除实现
--10.4.2随堂测试
-11.1内容实体定义
-11.2相关接口定义
-11.3服务接口实现
-11.4内容添加、编辑模板实现
-11.5内容添加、编辑控制器实现
-11.6内容检索页面实现
-11.7内容分类树实现
-12.1修改UEditor相关问题
-12.2整合UEditor到内容编辑界面
-12.3UEditor图片对话框应用
-12.4文件上传问题处理
-13.1网站配置相关类实现
-13.2网站配置界面模板实现
-13.3网站配置调试
-14.1网站首页布局实现
-14.2菜单Vue组件实现
--14.2.2随堂测试
-14.3幻灯片Vue组件实现
-14.4滚动Vue组件实现
--14.4.2随堂测试
-14.5滚动接口实现
-14.6滚动接口调试
-14.7幻灯片接口实现
-15.1首页区域实现
-15.2首页内容脚本实现
-15.3首页完善
-15.4Vue组件放入单文件
-15.5详细页面实现
-16.1网站测试介绍
-16.2功能测试
-16.3打包发布
-16.4部署运行
--16.4.2随堂测试
