Asp.Net Razor Page下用DataTables.net实现数据库懒加载解决加载慢问题

当前10秒的加载延迟，问题出在你现在走的是前端全量渲染逻辑：把数据库全量数据一次性拉到前端，再交给DataTables本地计算分页、执行搜索、完成排序，数据量上来之后光传输数据、前端批量渲染DOM就要耗掉好几秒，加载慢是必然的。DataTables的懒加载本质是把数据处理的压力挪回服务端，前端每次只拉当前页要显示的几十条数据，从根上减少传输量和前端渲染的负担。

后端 Razor Page 改造步骤 #

• 不再直接在页面Model里塞全量查询结果，单独新增一个独立的Page Handler专门处理DataTables的AJAX请求，比如OnGetLoadCourseDataAsync
• 接收DataTables自动传递的请求参数：draw（请求校验标识）、start（当前页数据的偏移量）、length（每页要展示的条数）、search[value]（全局搜索关键词）、排序规则对应的列索引和方向
• 数据库查询分两步走：第一步先根据搜索条件统计满足要求的总记录数，第二步跳过对应偏移量的行数，只取当前页需要的条数做查询，禁止一次性拉全表数据
• 接口返回的JSON结构要完全匹配DataTables的解析要求，固定包含四个字段：draw（原样回传收到的请求标识）、recordsTotal（不经过搜索过滤的全表总条数）、recordsFiltered（经过搜索条件过滤后的总条数）、data（当前页要渲染的行数据集合）
• 注意校验Razor Page的请求防伪标识，AJAX请求里要同步带上页面的__RequestVerificationToken，不然会触发接口的403拦截

前端 DataTables 初始化改造 #

• 打开服务端处理开关：serverSide: true，这个配置打开后，DataTables会自动切换成“每次翻页/搜索/排序都发AJAX请求拉数据”的懒加载模式
• 配置ajax参数，把请求地址指向刚才写的服务端Handler，提前把防伪token注入到请求头里
• 手动定义columns配置，把后端返回的行数据字段，和表格表头的列顺序一一映射，避免出现列错位
• 打开processing: true选项，在后端拉数据的时候显示内置的加载提示，优化用户等待体验
• 关闭之前所有依赖前端全量数据的配置，比如强制走前端本地搜索、本地排序的逻辑，把这些能力全交给服务端处理

常见踩坑提醒 #

• 数据库分页查询的时候，要给搜索、排序用到的列建索引，不然哪怕只查20条数据，数据库每次做全表扫描也会很慢
• 排序参数的列索引要和前端columns数组的顺序严格对应，不然会出现排序逻辑错位、查错字段的问题
• 不要在收到搜索关键词后还走前端遍历过滤的逻辑，要把搜索条件拼到数据库的Where查询语句里，从源头过滤数据
• 每页展示的条数不要设置过大，默认10-20条是性能和体验的平衡点，数值太大又会回到前端渲染卡顿的老问题

改造完成后，首次加载只会请求第一页的10-20条数据，整体加载耗时会从原来的10秒降到1秒以内，后续翻页、搜索、排序操作也不会触发整页刷新，只会局部更新表格区域的内容。

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