企业官网建设流程全解析

ng-table全景解析：一个指令实现排序+过滤+分页，彻底告别手写表格逻辑

【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table

在 AngularJS 项目中做数据表格，你是否还被困在手写排序事件、过滤循环和分页计算里？ng-table是一个用 TypeScript 编写的 AngularJS 表格指令库，只需在<table>上加一个ng-table指令，就能免费获得表格排序、表格过滤、表格分页三大核心能力，还能顺手解锁分组、动态列、服务端加载等进阶功能。本文带你用最短的路径掌握它。

为什么选 ng-table？

它的核心理念是"声明式"：你只描述列（标题、字段、过滤器类型），表头行、过滤行全部由指令自动编译生成。核心实现见 ngTable.directive.ts，编译阶段会扫描每列的title、sortable、filter等属性并生成列定义。

5 分钟上手：从安装到运行

第一步：安装 ng-table 依赖

通过 npm 安装稳定版即可，v2.0.0 起项目本身用 TypeScript 编写，安装后自带类型声明，无需额外配置：

npm install ng-table --save

第二步：注册模块并在 HTML 中声明表格

在应用模块声明中加入ngTable，然后给普通<table>加上ng-table指令：

<table ng-table="vm.tableParams" class="table" show-filter="true"> <tr ng-repeat="user in $data"> <td title="'Name'" sortable="'name'" filter="{ name: 'text' }">{{user.name}}</td> <td title="'Age'" sortable="'age'" filter="{ age: 'number' }">{{user.age}}</td> </tr> </table>

注意ng-repeat遍历的是$data——这是 ng-table 替你算好的"当前页"数据。

第三步：用 NgTableParams 配置表格参数

NgTableParams是表格的"参数管理器"，ngTableParams.ts 中定义了它的四个核心参数：

• page：当前页码（从 1 开始）
• count：每页行数（默认 10）
• filter：当前过滤条件
• sorting：当前排序状态

self.tableParams = new NgTableParams({}, { dataset: data });

数据可以来自内存数组（dataset），也可以换成自定义的getData函数实现服务端分页加载——这是它最强大的特性之一。

三大核心功能详解

1️⃣ 表格排序（Sorting）

在td上加sortable="'字段名'"，表头就会出现可点击的排序箭头，支持升/降序切换。不需要写任何 JS，指令会自动更新params.sorting并重新取数。

2️⃣ 表格过滤（Filtering）

加filter="{ 字段: '类型' }"后，show-filter="true"的表格会在表头下方自动渲染过滤输入框，内置text、number、select、select-multiple等模板（见 src/browser/filters/）。

几个实用细节（见 filterSettings.ts）：

• 过滤默认是不区分大小写的子串匹配；
• 输入有500ms 防抖，避免每次按键都全量过滤；
• 数据量小于 1 万条的小数组会跳过防抖，即输即滤，体验更顺滑；
• 可通过filterFn完全自定义匹配算法，实现嵌套属性、模糊匹配等。

3️⃣ 表格分页（Pagination）

ng-table 内置分页器，翻页、切换每页行数都会自动走一遍"过滤 → 排序 → 取第 N 页"的完整数据管道，页码状态与 URL 参数同步，刷新页面也不丢位置。

进阶能力一览 🚀

项目结构与源码导读

想深入阅读源码？建议按这条路径走：

1. 入口指令：src/browser/ 下的ngTable.directive.ts与ngTableDynamic.directive.ts
2. 核心引擎：src/core/ 按功能拆分为四个目录——
   • filtering/：过滤比较器与防抖策略
   • grouping/：分组聚合逻辑
   • sorting/ 与 paging/：排序方向、页码按钮模型
3. 取数管道：src/core/data/ 负责"过滤→排序→分组→分页"的链式处理与响应拦截
4. 控制器：ngTableController.ts 是视图与参数之间的桥梁

官方示例与 Demo 站

仓库自带 4 套完整示例工程，覆盖主流技术栈，可直接克隆体验：

• ES5 示例：最简用法
• ES2015 + SystemJS
• ES2015 + Webpack
• TypeScript + Webpack：推荐，含分组表、动态列、列选择器等完整演示，入口模板见 my-table.component.html

Demo 站的各功能页面也按主题组织在 demo-site/views/ 下：sorting/、filtering/、pagination/、grouping/、loading/，每个目录都有可直接参考的 HTML 片段。

写在最后

ng-table 证明了"少即是多"的设计哲学：一个ng-table指令 + 一组声明式属性，就把排序、过滤、分页这些表格三大件全部收敛为声明配置。如果你正在维护 AngularJS 项目，不妨克隆仓库、跑起 TypeScript 示例，体会一下告别手写表格逻辑的畅快 👇

git clone https://gitcode.com/gh_mirrors/ng/ng-table

【免费下载链接】ng-tableSimple table with sorting and filtering on AngularJS项目地址: https://gitcode.com/gh_mirrors/ng/ng-table