iter(g285): 分页总量支持信号并钳回越界页码
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { h, renderList, signal } from '@ui-arch/frame';
|
||||
import { effect, h, renderList, signal } from '@ui-arch/frame';
|
||||
import type { PaginationProps } from './types.js';
|
||||
import { select } from './select.js';
|
||||
|
||||
@@ -21,7 +21,8 @@ function pageSequence(page: number, totalPages: number): (number | null)[] {
|
||||
export function pagination(props: PaginationProps): HTMLElement {
|
||||
// —— 状态集中声明 ——
|
||||
const size = signal(props.pageSize); // 每页条数:可从 switcher 改动,故用信号持有
|
||||
const totalPages = () => Math.max(1, Math.ceil(props.total / size())); // 总页数随时可重算
|
||||
const readTotal = (): number => (typeof props.total === 'function' ? props.total() : props.total); // 数字 / 信号同一口径
|
||||
const totalPages = () => Math.max(1, Math.ceil(readTotal() / size())); // 总页数随时可重算
|
||||
const pages = h('div', { class: 'ua-pagination-pages' }); // 页码区,随页码重绘
|
||||
const tail = h('div', { class: 'ua-pagination-tail' }); // 附加区(条数切换 + 跳页),只创建一次
|
||||
const go = (p: number) => {
|
||||
@@ -29,6 +30,15 @@ export function pagination(props: PaginationProps): HTMLElement {
|
||||
props.page(next);
|
||||
props.onChange?.(next);
|
||||
};
|
||||
// 总量变小(筛选 / 删除)后把越界页码写回父级:否则父级 state 停在旧页,显示与数据对不上
|
||||
effect(() => {
|
||||
const max = totalPages();
|
||||
const cur = props.page();
|
||||
if (cur <= max && cur >= 1) return; // 卫语句:页码合法就不动手,避免无意义回调
|
||||
const fixed = Math.min(max, Math.max(1, cur));
|
||||
props.page(fixed);
|
||||
props.onChange?.(fixed);
|
||||
});
|
||||
|
||||
// —— 每页条数切换器:传了候选才渲染,切换即回第 1 页 ——
|
||||
if ((props.pageSizes ?? []).length > 1) {
|
||||
|
||||
@@ -369,7 +369,7 @@ export interface SkeletonProps {
|
||||
export interface PaginationProps {
|
||||
page: Signal<number>; // 当前页码信号,双向绑定(外部赋值自动翻页)
|
||||
pageSize: number; // 每页条数
|
||||
total: number; // 总条数
|
||||
total: number | Signal<number>; // 总条数;传信号则总量变化时自动重算页数(并钳制越界页码)
|
||||
jumpable?: boolean; // 开启后在末尾显示跳页输入框(总页数 > 1 才出现)
|
||||
pageSizes?: number[]; // 每页条数候选(如 [10, 20, 50]);传了才渲染条数切换器
|
||||
simple?: boolean; // 极简模式:只留上一页 / 下一页与「当前 / 总页」文字,适合工具栏窄位;缺省 false
|
||||
|
||||
Reference in New Issue
Block a user