配置 nz-table 表单页脚总页数与条数显示 - Angular

Posted 2023-04-27

参考技术A 日常开发中表单使用很常见，正巧刚使用完，此次对 nz-table 的表单页脚显示总数据条数和当前页进行配置小结；

具体基础用法可以参考 官方文档 nz-table 集成，如下是对页脚总页数和条数配置的拓展：
注：需要预先声明好当前页码和数据总条数的字段并从接口数据中赋值

首先，在获取到页码和数据总条数的基础上配置页脚模板
当前页码可以通过组件中的 [nzPageIndex]="pageIndex" 获取；
数据总条数可以通过数据源数组的 length 获取；

其次，需要在 nz-table 中配置 [nzShowTotal]="totalTemplate" 属性

最后，完整 code 如下：

实际具体业务还需大家具体分析，如上例子是通过服务端分页的模式实现，但未使用官方 demo 中的服务端实例，而是自行手动配置出发的分页效果，可供参考大家自行改进。

以上便是此次分享的全部内容，希望能对大家有所帮助！

SQL分页和HQL分页查询

SQL分页

 1 -- 每页展示5条数据
 2 -- 数据  总条数：totalCount 每页显示条数：pageSize     currPage:当前页数    起始索引：startIndex  总页数：totalPage
 3 -- 总页数计算公式：
 4                                             -- 方法一
 5                                                 --  totalCount%pageSize  如果余数为0,totalPage=totalCount/pageSize  
 6                                                 -- 如果余数不为0 ，totalPage=totalCount/pageSize +1  
 7                                           -- 方法二
 8                                                 -- totalPage= （totalCount + pageSize - 1）/pageSize
 9 -- 查询每页数据
10             -- (currPage - 1) * pageSize
11 
12 SELECT COUNT(*) FROM stuscore 
13 
14 SELECT * FROM stuscore LIMIT 0,5 ;-- 第一页数据
15 SELECT * FROM stuscore LIMIT 5,5 ;-- 第二页数据
16 SELECT * FROM stuscore LIMIT 10,5 ;-- 第三页数据
17 
18 SELECT * FROM stuscore where 1=1 AND  grade LIKE ‘%22%‘ AND sex=‘男‘ AND score >=20 AND score < 70 LIMIT 0,5 
19 
20 SELECT * FROM stuscore where 1=1  and  grade LIKE ‘%22%‘  AND sex=‘男‘  AND score >=20 AND score <70 LIMIT 0,5 

HQL分页

    int currentPage = 1; //当前页
        int pageCount = 4;  //每页的行数
        int startNum = (currentPage - 1) * pageCount; //起始的位置
        List<PlayerEntity> list =
                session.createQuery(from PlayerEntity)
                        .setFirstResult(startNum) //起始位置
                        .setMaxResults(pageCount) //每页显示的行数
            　　　　　　　.list();
setFirstResult(int firstResult)方法
      设置第一条记录的位置
setMaxResults(int maxResults)方法
　　  设置最大返回的记录条数