行组 - 新扩展
按某个特性分组为数据集的行列，可以成为一种强大的工具，可以轻松帮助最终用户理解并从复杂的数据集中获取知识。单个表单会提供一个基本的分组（例如展示一个学生列表），但是您可能还希望按照表格中的某些数据点进行分组（例如学生示例中的年龄）。
DataTables 示例长期以来都包含 展示如何完成行分组的示例，但任何自定义都要求修改该示例中呈现的代码；对于初次使用 DataTables 的开发人员而言，那些更改并不总是直观的。因此，我非常荣幸地为 DataTables 带来新扩展：RowGroup。
| 姓名 | 职位 | 办公室 | 薪水 |
|---|
下载
RowGroup 扩展在 DataTables CDN 和 下载构建器 中提供。您还可以从 NPM 和 Bower 安装它。
在 RowGroup 文档中 还可以找到更多示例。
功能
RowGroup 从表格数据中选取一个数据点（这不必在列中 - 除非您想要按该数据对表格进行排序），并直观地以具有相似值的行列为基础来对表格进行分组。
该组使用其标题和/或页脚行显示，该行以动态方式插入到表格中。默认情况下只显示包含分组数据值的分组标题，但是起始分组行和结束分组行都完全由您控制，可以使用自定义渲染器来显示您针对行列计算的摘要信息（总数、平均值、计数等）。
用法
RowGroup 最常用的选项是 rowGroup.dataSrc 选项。它用来指定读取分组数据的路径。这个参数与 columns.data 非常相似，因为它可以给定为一个整数（对于基于数组的表格）或一个字符串（对于基于对象的表格）。字符串选项还支持 Javascript 点表示法，因此您可以从嵌套属性中读取数据。
DOM/数组来源数据
初始化
$('#myTable').DataTable( {
rowGroup: {
// Group by office
dataSrc: 2
}
} );
行数据源
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
一个拥有以下结构的 tbody 行的 HTML 表格（请注意，如果您使用基于数组的数据（它已通过 Ajax 加载或从 Javascript 来源），也可以使用 rowGroup.dataSrc 作为整数）。
Ajax/对象
初始化
$('#myTable').DataTable( {
ajax: '/api/staff',
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
...
],
rowGroup: {
// Group by office
dataSrc: 'office'
}
} );
行数据源
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
}
渲染函数能让你自定义最终用户看到的内容，所以你能执行诸如计数、汇总以及平均计算等操作。在 此示例 中，最终呈现器用于显示工资和年龄栏平均值的内联表
$('#myTable').DataTable( {
order: [[2, 'asc']],
rowGroup: {
startRender: null,
endRender: function ( rows, group ) {
var ageAvg = rows
.data()
.pluck(3)
.reduce( function (a, b) {
return a + b*1;
}, 0) / rows.count();
var salaryAvg = rows
.data()
.pluck(5)
.reduce( function (a, b) {
return a + b.replace(/[^\d]/g, '')*1;
}, 0) / rows.count();
salaryAvg = $.fn.dataTable.render.number(',', '.', 0, '$').display( salaryAvg );
return $('<tr/>')
.append( '<td colspan="3">Averages for '+group+'</td>' )
.append( '<td>'+ageAvg.toFixed(0)+'</td>' )
.append( '<td/>' )
.append( '<td>'+salaryAvg+'</td>' );
},
dataSrc: 2
}
} );
已知限制
值得注意的是，RowGroup 当前与以下内容不兼容
- 按钮的导出选项
- 固定列
- 滚动条。
兼容性图表 详细说明了 DataTables 核心功能和扩展之间的兼容性。
后续工作
您可能会想，一切都很好，但诸如折叠组、多级组之类的其他功能呢？这是使得基础软件对社区可用性的一个初始版本 - 实际上，编写软件的这个初始版本花的时间不到一天，但是需要两周的大部分时间来使其可发布，包括测试、示例、文档和部署基础设施。所有这些完成后，让软件带来新的功能就变得更容易。
基于这个想法，目前计划的后续功能如下
- 点击按分组数据点排序
- 点击并拖曳以分组 - 将一个列标题拖曳到分组区域，以允许最终用户轻松定义分组
- 多级分组 - 允许嵌套分组
- 支持按钮的导出选项 - 目前在导出时将忽略分组信息。
长期工作
- 展开和折叠分组 - 由于 DataTables 核心没有分组的概念，所以这不是一个容易添加的选项
- 行跨度显示布局选项 - 更清晰地显示可视化结构。
恐怕这些新功能不会在一夜之间实现。和 DataTables 的其他功能一样，这是一个持续演变的过程，它将伴随 DataTables 项目的其他改进一起完成。
对于可以添加到软件中的内容，这里列出了我的思考内容，但我还会持续接收来自你的反馈，了解你希望将来在 RowGroup 中看到什么内容！
敬请享受！