如何用ng-table实现服务端分页AngularJS表格懒加载数据的完整实践【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-tableng-table 是一款经典的AngularJS 表格指令官方定位为Simple table with sorting and filtering on AngularJS。当数据量达到数万行时前端内存数组已撑不住——这时你需要ng-table 服务端分页server-side paging只把当前页的数据从后端取回由后端完成排序与过滤这就是表格懒加载数据的标准做法。本文带你完整走一遍。一分钟认识 ng-table 的两种数据加载模式ng-table 内部把给表格喂数据分成两种模式官方文档页面 demo-site/views/loading/overview.html 有清晰对比模式做法适用场景托管数组Managed array把整个数据集dataset交给NgTableParams由它在内存中做过滤、排序、分页小数据量几千行以内外部数组External array传入自定义getData函数按需向服务器请求大数据量、服务端分页✅本文主角就是第二种。核心接口定义在 src/core/data/getData.tsgetData函数接收当前表格参数返回数组或 Promise——返回 Promise 正是懒加载的关键ng-table 会等请求完成后再渲染并在等待期间自动显示加载态。ng-table 服务端分页实现步骤第一步安装 ng-tablenpm install ng-table --save第二步用自定义 getData 构建 NgTableParams不传dataset改传getData函数。函数体内读取表格当前状态向后端发请求var tp new NgTableParams({ count: 20 }, { getData: function (params) { return $http.get(/api/users, { params: params.url() }).then(function (res) { params.total(res.data.total); // 关键告诉表格总条数 return res.data.items; // 只返回当前页的行 }); } });三个要点params.url()把当前的page、count、filter、sorting序列化成 URL 查询参数直接透传给后端即可见 ngTableParams.ts 中的url()实现params.total(总条数)分页条的总页数由total ÷ count推算不设它分页器就是坏的只返回本页数据ng-table 拿到 Promise 结果后直接当最终数据集展示不会再本地切页。第三步让模板与分页器生效在 HTML 中使用ng-table指令并绑定分页器table ng-tableparams classtable table-striped tr ng-repeatuser in $data td ng-binduser.name/td td ng-binduser.email/td /tr /table div ng-table-paginationparams/div此时用户点下一页、切换每页条数、输入过滤词或点击表头排序page/count/filter/sorting任一变化ng-table 都会自动重新调用你的getData无需手动监听。底层原理ng-table 如何感知该重新拉数据了这套自动刷新机制对排查问题很有用值得花 1 分钟了解isDataReloadRequired()ng-table 会监视该方法的返回值只要参数页码、每页行数、过滤、排序与上一次提交的不一致就返回true。定义见 ngTableParams.tsreload()条件满足后触发内部把$loading置为true表格进入加载态调用getData并通过拦截器管道处理结果成功后更新$data并重建分页按钮数组ngTableParams.ts$loading模板里可以据此渲染骨架屏或加载中…提示。与之相对内存模式走的是 ngTableDefaultGetData.ts它用 AngularJS 的filter、orderBy过滤器在本地完成过滤、排序再slice出当前页并自动写入total——所以你切到服务端分页后这些动作要交给后端完成。常见坑与最佳实践忘记设置total分页器只显示一页或按钮状态错乱90% 的服务端分页问题出在这里count变化会重置到第 1 页切换每页行数时 ng-table 会自动page 1见 ngTableParams.ts后端接口请按offset (page-1) * count计算请求竞态快速翻页可能让旧请求后到覆盖新页面建议在getData中记录请求序号或用拦截器丢弃过期响应URL 状态同步params.url()生成的参数可直接写入 URL配合parameters(urlParams, true)可还原刷新前的表格状态加载态 UX给$loading加一个遮罩动画大数据量接口下体验提升明显。延伸阅读官方加载模式总览demo-site/views/loading/overview.html懒加载托管数组示例demo-site/views/loading/demo-lazy-loaded.html外部数组服务端示例demo-site/views/loading/demo-external-array.html分页相关 APIdemo-site/views/pagination/demo-api.html完整示例工程TypeScript Webpackdemo-apps/ts-webpack/readme.md按照上面的三步走你的 AngularJS 表格就能以极低的接入成本获得服务端分页 服务端过滤/排序的懒加载能力——这正是 ng-table 在真实业务系统中最常用的姿势。【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考