如题, FVS自带的分页太丑了, 而且没法修改, 自己写了一个分页的组件, 分享给大家. 组件功能: 展示总条数, 选择(输入)每页条数, 展示总页数. 按页跳转, 最前/最后跳转, 输入页数跳转功能. 分页组件使用的都是按钮/输入框组件, 大小, 颜色, 方圆, 模糊度, 背景, 选中特效都可自行调整 效果如下:

2024.05.16 更新引入组件后需要对模板做的更改操作
Template1.zip (8.42 K)
前言:
分页使用的是sql中的 limit, 当数据量较大时, 会对性能有较高要求, 查询时间也会随之增加, 慎用!
组件集中有影响性能的组件, 如需要极致的性能, 可以将以下部分删除:
展示总页数的: TOTALPAGE 组件, 是根据每页条数变动来调用SQL计算总页数的. 模板页面加载结束事件JS: 该JS是将文本框的字体调整至居中, 为了避免换页后失效, 所以一直在循环修改. 如果页面为单页, 或不需要居中显示, 则可以取消此部分
正文: 除了引入demo中的分页组件外, 还需要模板自身更改: 1. 模板参数: - PAGE_SIZE: 每页条数 
- THIS_PAGE: 当前页数 
- PAGE_STRT: 起始条数
2. 模板数据集
-- 总条数数据集 
-- 分页查询数据集 
3. 模板页面加载结束事件 
"use document";
setInterval(function() {
$(".bi-input.display-block,overflow-dot").css({"text-align":"center"});
},100)
4. 修改组件: 
总条数: 
TOTALPAGE: 
即可正常使用.
|