Angular中ngx-datatable是否支持服务端分页？50万条数据结构是否合理？

1. 分页功能的加载逻辑 #

ngx-datatable默认的客户端分页不会自动拆分请求加载数据：

• 你把全量50万条数据赋值给rows属性时，所有数据会一次性全部加载到前端内存，组件内部完成全量数据的预处理后，再按你配置的每页条数拆分，只渲染当前页对应的行
• 切换分页时不需要再拉取数据，直接从内存中读取对应页的数据渲染即可

2. 当前数据处理结构的合理性 #

你当前把50万条全量数据都存在前端Rows数组的方案是不合理的，存在几个明显的性能问题：

• 初始请求负载过高：50万条结构化数据的接口响应体积通常在30MB以上，弱网环境下加载时间长，极易出现超时失败的问题
• 内存占用过高：全量50万条JS对象常驻内存会占用200MB以上的内存空间，低端PC、移动设备会出现页面卡顿、浏览器崩溃的问题
• 渲染阻塞：组件初始化阶段需要遍历全量50万条数据做格式校验、索引绑定等预处理操作，会长时间占用JS主线程，导致页面在数秒内无法响应用户操作

3. 优化方案推荐 #

方案一：服务端分页（优先推荐） #

适配ngx-datatable的服务端分页能力，只拉取当前页需要的数据：

• 组件添加配置 [externalPaging]="true" 开启外部分页，关闭客户端全量数据分页逻辑
• 监听组件的page事件，每次分页切换时向后端发起请求，仅拉取当前页的10~100条数据赋值给rows
• 配置[count]属性传入后端返回的全量数据总条数，供分页组件计算总页数

方案二：虚拟滚动（适合需要前端全量处理数据的场景） #

如果你的业务必须在前端做全量数据的筛选、排序等操作，开启虚拟滚动可以大幅提升渲染性能：

• 组件添加配置 [scrollbarV]="true" [virtualization]="true" 开启虚拟滚动
• 虚拟滚动会只渲染当前可视区域内的行，哪怕全量50万条数据加载到内存，也不会一次性渲染所有DOM，渲染性能比普通客户端分页高一个量级

内容的提问来源于stack exchange，提问作者Hakan Gundogan