ChartDB分页组件：大数据集分页显示
项目地址: https://gitcode.com/GitHub_Trending/ch/chartdb 概述
在数据库可视化工具ChartDB中，处理大规模数据集的分页显示是一个核心功能需求。当用户需要从包含数百甚至数千张表的数据库中导入数据时，高效的分页机制能够显著提升用户体验和系统性能。ChartDB采用基于React的现代化分页组件，结合智能数据管理策略，为大数据集提供了流畅的分页浏览体验。
分页组件架构
ChartDB的分页系统采用模块化设计，主要包含以下核心组件：
核心功能实现
1. 分页状态管理
ChartDB使用React Hooks进行状态管理，确保分页逻辑的响应性和性能：
const [currentPage, setCurrentPage] = useState(1);
const [searchTerm, setSearchTerm] = useState('');
const [showTables, setShowTables] = useState(true);
const [showViews, setShowViews] = useState(false);
const [selectedTables, setSelectedTables] = useState<Set<string>>(new Set());
2. 数据分页计算
通过useMemo优化分页计算，避免不必要的重渲染：
const totalPages = useMemo(
() => Math.max(1, Math.ceil(filteredTables.length / TABLES_PER_PAGE)),
[filteredTables.length]
);
const paginatedTables = useMemo(() => {
const startIndex = (currentPage - 1) * TABLES_PER_PAGE;
const endIndex = startIndex + TABLES_PER_PAGE;
return filteredTables.slice(startIndex, endIndex);
}, [filteredTables, currentPage]);
3. 分页UI组件
ChartDB提供完整的分页UI组件库：
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationPrevious,
PaginationNext,
} from '@/components/pagination/pagination';
性能优化策略
1. 智能数据筛选
const filteredTables = useMemo(() => {
let filtered = allTables;
// 类型过滤
filtered = filtered.filter((table) => {
if (table.type === 'table' && !showTables) return false;
if (table.type === 'view' && !showViews) return false;
return true;
});
// 搜索过滤
if (searchTerm.trim()) {
const searchLower = searchTerm.toLowerCase();
filtered = filtered.filter(
(table) =>
table.tableName.toLowerCase().includes(searchLower) ||
table.schema?.toLowerCase().includes(searchLower) ||
table.fullName.toLowerCase().includes(searchLower)
);
}
return filtered;
}, [allTables, searchTerm, showTables, showViews]);
2. 内存优化
通过Set数据结构管理选中状态，确保O(1)时间复杂度的查找操作：
const handleTableToggle = useCallback((tableKey: string) => {
const newSelected = new Set(selectedTables);
if (newSelected.has(tableKey)) {
newSelected.delete(tableKey);
} else if (selectedTables.size < MAX_TABLES_IN_DIAGRAM) {
newSelected.add(tableKey);
}
setSelectedTables(newSelected);
}, [selectedTables]);
分页配置参数
| 参数名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| TABLES_PER_PAGE | number | 10 | 每页显示的表数量 |
| MAX_TABLES_IN_DIAGRAM | number | 500 | 最大可导入表数量 |
| MAX_TABLES_WITHOUT_SHOWING_FILTER | number | 50 | 自动显示过滤器的阈值 |
使用示例
基本分页实现
const SelectTablesComponent: React.FC = () => {
const [currentPage, setCurrentPage] = useState(1);
const TABLES_PER_PAGE = 10;
const totalPages = Math.ceil(filteredTables.length / TABLES_PER_PAGE);
const paginatedTables = filteredTables.slice(
(currentPage - 1) * TABLES_PER_PAGE,
currentPage * TABLES_PER_PAGE
);
const handleNextPage = () => {
if (currentPage < totalPages) {
setCurrentPage(currentPage + 1);
}
};
const handlePrevPage = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
}
};
return (
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious
onClick={handlePrevPage}
disabled={currentPage === 1}
/>
</PaginationItem>
<PaginationItem>
<span>Page {currentPage} of {totalPages}</span>
</PaginationItem>
<PaginationItem>
<PaginationNext
onClick={handleNextPage}
disabled={currentPage >= totalPages}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
);
};
高级分页功能
// 页面选择切换
const handleTogglePageSelection = useCallback(() => {
const newSelected = new Set(selectedTables);
const allVisibleSelected = visibleSelectedTables.length === paginatedTables.length;
if (allVisibleSelected) {
// 取消选择当前页所有表
for (const table of paginatedTables) {
newSelected.delete(table.key);
}
} else {
// 选择当前页所有表
for (const table of paginatedTables) {
if (newSelected.size >= MAX_TABLES_IN_DIAGRAM) break;
newSelected.add(table.key);
}
}
setSelectedTables(newSelected);
}, [paginatedTables, selectedTables]);
响应式设计
ChartDB分页组件支持响应式布局，在不同设备上提供最佳用户体验：
const { isMd: isDesktop } = useBreakpoint('md');
const renderPagination = () => (
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious onClick={handlePrevPage} />
</PaginationItem>
<PaginationItem>
<span>Page {currentPage} of {totalPages}</span>
</PaginationItem>
<PaginationItem>
<PaginationNext onClick={handleNextPage} />
</PaginationItem>
</PaginationContent>
</Pagination>
);
// 桌面端和移动端不同的分页位置
{isDesktop ? renderPagination() : null}
最佳实践
1. 搜索优化
// 搜索时重置到第一页
useEffect(() => {
setCurrentPage(1);
}, [searchTerm]);
2. 性能监控
// 监控分页性能
const paginationPerformance = useMemo(() => {
return {
totalItems: allTables.length,
filteredItems: filteredTables.length,
currentPageItems: paginatedTables.length,
selectionCount: selectedTables.size,
memoryUsage: calculateMemoryUsage(selectedTables)
};
}, [allTables, filteredTables, paginatedTables, selectedTables]);
3. 错误处理
const handlePageChange = (newPage: number) => {
if (newPage < 1 || newPage > totalPages) {
console.warn(`Invalid page number: ${newPage}`);
return;
}
setCurrentPage(newPage);
};
总结
ChartDB的分页组件通过以下特性为大数据集处理提供了完整解决方案：
- 模块化设计 - 可重用的分页UI组件
- 性能优化 - 使用Memoization和高效数据结构
- 响应式支持 - 自适应不同屏幕尺寸
- 智能过滤 - 结合搜索和类型过滤
- 内存管理 - 优化大规模数据集处理
通过合理配置分页参数和采用最佳实践，ChartDB能够高效处理包含数千张表的大型数据库，为用户提供流畅的数据浏览和选择体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
