🐛 fix(data-grid): 允许未知总数结果跳页

- 未知总数分页保留跳页控件
- 跳页输入不再被当前估算页数截断

Fixes #584
This commit is contained in:
Syngnat
2026-06-27 16:41:12 +08:00
parent 6abdb8684f
commit 3bfcd15dc0
2 changed files with 15 additions and 11 deletions

View File

@@ -1934,7 +1934,7 @@ describe('DataGrid layout', () => {
expect(emptyPreviewMarkup).not.toContain('data_grid.preview_panel');
});
it('keeps unknown-total pagination in sequential mode instead of pretending total pages are known', () => {
it('keeps unknown-total pagination sequential while still allowing direct page jumps', () => {
const markup = renderDataGridWithI18n(
<DataGrid
data={[
@@ -1962,10 +1962,11 @@ describe('DataGrid layout', () => {
expect(markup).toContain('第 3 页');
expect(markup).not.toContain('<strong>3</strong><span>/</span><span>4</span>');
expect(markup).not.toContain('data-grid-pagination-jump="true"');
expect(markup).toContain('data-grid-pagination-jump="true"');
expect(markup).toContain('跳页');
});
it('keeps legacy unknown-total pagination in sequential mode instead of numbered pages', () => {
it('keeps legacy unknown-total pagination sequential while still allowing direct page jumps', () => {
const previousUiVersion = mockStoreState.uiVersion;
mockStoreState.uiVersion = 'legacy';
@@ -1998,7 +1999,8 @@ describe('DataGrid layout', () => {
expect(markup).toContain('第 3 页');
expect(markup).toContain('data-grid-pagination-sequential="true"');
expect(markup).not.toContain('class="ant-pagination');
expect(markup).not.toContain('data-grid-pagination-jump="true"');
expect(markup).toContain('data-grid-pagination-jump="true"');
expect(markup).toContain('跳页');
} finally {
mockStoreState.uiVersion = previousUiVersion;
}
@@ -2557,8 +2559,8 @@ describe('DataGrid layout', () => {
expect(css).toContain('overflow-x: auto;');
expect(paginationBarSource).toContain("label: translate('data_grid.pagination.page_size_option', { count: value })");
expect(paginationBarSource).not.toContain("label: `${value}/页`");
expect(paginationBarSource).toContain('const maxJumpPage = Math.max(1, paginationTotalPages);');
expect(paginationBarSource).toContain('Math.min(maxJumpPage, Math.max(1, Math.trunc(Number(jumpPage))))');
expect(paginationBarSource).toContain('const maxJumpPage = showKnownPageCount ? Math.max(1, paginationTotalPages) : null;');
expect(paginationBarSource).toContain('max={maxJumpPage ?? undefined}');
expect(paginationBarSource).toContain('onPressEnter={submitJumpPage}');
expect(paginationBarSource).toContain('data-grid-pagination-jump="true"');
expect(css).toContain('.data-grid-pagination-jump-input.ant-input-number-focused');

View File

@@ -58,9 +58,11 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
return null;
}
const maxJumpPage = Math.max(1, paginationTotalPages);
const maxJumpPage = showKnownPageCount ? Math.max(1, paginationTotalPages) : null;
const normalizedJumpPage = Number.isFinite(Number(jumpPage)) && Number(jumpPage) > 0
? Math.min(maxJumpPage, Math.max(1, Math.trunc(Number(jumpPage))))
? (maxJumpPage !== null
? Math.min(maxJumpPage, Math.max(1, Math.trunc(Number(jumpPage))))
: Math.max(1, Math.trunc(Number(jumpPage))))
: null;
const jumpDisabled = !onPageChange || normalizedJumpPage === null || normalizedJumpPage === pagination.current;
const submitJumpPage = () => {
@@ -68,13 +70,13 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
if (normalizedJumpPage === pagination.current) return;
onPageChange(normalizedJumpPage, pagination.pageSize);
};
const jumpPageControl = showKnownPageCount ? (
const jumpPageControl = (
<div className="data-grid-pagination-jump" data-grid-pagination-jump="true">
<span className="data-grid-pagination-jump-label">{translate('data_grid.pagination.jump_label')}</span>
<InputNumber
size="small"
min={1}
max={maxJumpPage}
max={maxJumpPage ?? undefined}
precision={0}
controls={false}
value={jumpPage}
@@ -93,7 +95,7 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
{translate('data_grid.pagination.jump_action')}
</Button>
</div>
) : null;
);
const sequentialPaginationControl = (
<div
className="data-grid-pagination-sequential"