🐛 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'); 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( const markup = renderDataGridWithI18n(
<DataGrid <DataGrid
data={[ data={[
@@ -1962,10 +1962,11 @@ describe('DataGrid layout', () => {
expect(markup).toContain('第 3 页'); expect(markup).toContain('第 3 页');
expect(markup).not.toContain('<strong>3</strong><span>/</span><span>4</span>'); 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; const previousUiVersion = mockStoreState.uiVersion;
mockStoreState.uiVersion = 'legacy'; mockStoreState.uiVersion = 'legacy';
@@ -1998,7 +1999,8 @@ describe('DataGrid layout', () => {
expect(markup).toContain('第 3 页'); expect(markup).toContain('第 3 页');
expect(markup).toContain('data-grid-pagination-sequential="true"'); expect(markup).toContain('data-grid-pagination-sequential="true"');
expect(markup).not.toContain('class="ant-pagination'); 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 { } finally {
mockStoreState.uiVersion = previousUiVersion; mockStoreState.uiVersion = previousUiVersion;
} }
@@ -2557,8 +2559,8 @@ describe('DataGrid layout', () => {
expect(css).toContain('overflow-x: auto;'); expect(css).toContain('overflow-x: auto;');
expect(paginationBarSource).toContain("label: translate('data_grid.pagination.page_size_option', { count: value })"); expect(paginationBarSource).toContain("label: translate('data_grid.pagination.page_size_option', { count: value })");
expect(paginationBarSource).not.toContain("label: `${value}/页`"); expect(paginationBarSource).not.toContain("label: `${value}/页`");
expect(paginationBarSource).toContain('const maxJumpPage = Math.max(1, paginationTotalPages);'); expect(paginationBarSource).toContain('const maxJumpPage = showKnownPageCount ? Math.max(1, paginationTotalPages) : null;');
expect(paginationBarSource).toContain('Math.min(maxJumpPage, Math.max(1, Math.trunc(Number(jumpPage))))'); expect(paginationBarSource).toContain('max={maxJumpPage ?? undefined}');
expect(paginationBarSource).toContain('onPressEnter={submitJumpPage}'); expect(paginationBarSource).toContain('onPressEnter={submitJumpPage}');
expect(paginationBarSource).toContain('data-grid-pagination-jump="true"'); expect(paginationBarSource).toContain('data-grid-pagination-jump="true"');
expect(css).toContain('.data-grid-pagination-jump-input.ant-input-number-focused'); 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; 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 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; : null;
const jumpDisabled = !onPageChange || normalizedJumpPage === null || normalizedJumpPage === pagination.current; const jumpDisabled = !onPageChange || normalizedJumpPage === null || normalizedJumpPage === pagination.current;
const submitJumpPage = () => { const submitJumpPage = () => {
@@ -68,13 +70,13 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
if (normalizedJumpPage === pagination.current) return; if (normalizedJumpPage === pagination.current) return;
onPageChange(normalizedJumpPage, pagination.pageSize); onPageChange(normalizedJumpPage, pagination.pageSize);
}; };
const jumpPageControl = showKnownPageCount ? ( const jumpPageControl = (
<div className="data-grid-pagination-jump" data-grid-pagination-jump="true"> <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> <span className="data-grid-pagination-jump-label">{translate('data_grid.pagination.jump_label')}</span>
<InputNumber <InputNumber
size="small" size="small"
min={1} min={1}
max={maxJumpPage} max={maxJumpPage ?? undefined}
precision={0} precision={0}
controls={false} controls={false}
value={jumpPage} value={jumpPage}
@@ -93,7 +95,7 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
{translate('data_grid.pagination.jump_action')} {translate('data_grid.pagination.jump_action')}
</Button> </Button>
</div> </div>
) : null; );
const sequentialPaginationControl = ( const sequentialPaginationControl = (
<div <div
className="data-grid-pagination-sequential" className="data-grid-pagination-sequential"