中继器做表格(进阶)-控制页数+记录统计展示+翻页+跳转翻页_中继器怎么制作学生成绩表

目录

前言：

功能一、控制每页展示的页数：

功能二、展示一共多少条记录：  

功能三、上下翻页功能：  

功能四、跳转到某一页：  

---

前言：

上一篇文章“中继器做表格--普通表格”中我们只是做了一个普通的表格，可以通过数据集来控制表格的数据量；

在真实的场景下，一个表格其实是可以翻页。跳转翻页的，控制一页展示多少行的，今天我们就用来做一个接近真实情况下使用的表格；将分为4个功能来展示；

功能一、控制每页展示的页数：

功能三、上下翻页功能：  

    1、把需要的页面元素拉出来，排列好并且命名；

        ①上一页下一页按钮：取名为“上一页按钮和下一页按钮”；

        ②当前页数矩形：取名为“当前页数”

        ③总页数矩形：取名为“总页数”

        ④分割线矩形：取名“分割线”

  2、给按钮添加交互事件：

        思路：

            ①点击按钮时（触发事件），给表格翻页（动作），翻页之后的当前页面数字更新为当前为中继器表格的第N页；

            ②点击分页的时候，页数可能会变化，所以点击分页的时候需要将总页数重新获取并展示，当前页数默认是1；

            ③页面加载时，会有一个总页数和一个当前页码，所以页面加载时需要获取总页数并展示，当前页数默认获取当前页数；

        操作步骤：

            ①选中上一页按钮-点击新建交互-单击时-设置当前显示页面-选择需要翻页的中继器-页面选择previous--继续追加事件-选择设置文本-当前页数框的文本为中继器的当前页数的页码；

               选中下一页按钮-点击新建交互-单击时-设置当前显示页面-选择需要翻页的中继器-页面选择next；--继续追击事件-选择设置文本-当前页数框的文本为中继器的当前页数的页码--下面的图只弄了上一页的下一页如法炮制就可以啦

            ②选中分页-追加交互-设置总页数-设置当前展示页码为1（这步是为了换每页展示数量的时候，页码都是从1开始）； 

            ③选中总页数矩形-点击新建交互-选择加载时-设置文本-选择需要设置文本的元件-点击f（x）-选择pagecount-添加局部变量-选择元件-选择中继器表格-完成操作

               选中当前页数-点击新建交互-选择加载时- 设置文本-选择需要设置文本的元件-点击f（x）-选择pageindex-添加局部变量-选择元件-选择中继器表格-完成操作

功能四、跳转到某一页：  

    1、把需要的页面元素拉出来，排列好并且命名；

        ①输入框：取名为“跳转页输入框”；

        ②跳转按钮：取名为“跳转按钮”；

    2、给按钮添加交互事件：

        思路：

        ①点击后，中继器表格展示输入的页数的页码；

        ②当前页数会发生改变，所以当前页页码需要更新中继器表格的当前页的页码；

        操作步骤：

        ①选中翻页按钮-点击新建交互-选择单击时-设置当前显示页面-选择中继器表格-点击f（x）-添加一个局部变量（自己起名字）-元件文字-选择需要获取的元件文字-点击插入变量-选择创建的变量

 

        ②追加交互-设置文本-选择当前页数的值-点击否f（x）-选择插入变量选择中继器的页码标签-添加局部变量-选择元件为中继器表格-完成； 

完成以上4个功能的设置，这个表格就是一个接近真实情况下的展示表格了，可以把这个做成元件库（之前文章有写过怎么做元件库），用的时候直接拉出来，整点样式就会很好看；做原型超快；

其实只要有了思路一点点补全交互，完善交互，啥样子的页面都能做出来的； 

已经上传原型文件，需要的自己取用哦；