如何在JQuery数据表中添加Rowspan

Question

我使用Jquery数据表来构造一个表.
我的要求如下

这不是静态表,我们使用json数据渲染它.
在这里,我使用"aoColumns"动态渲染行.
有没有办法使用rowspan,以便可以跨越单元格(1,2,David,Alex).
数据表是否支持这种表？

Answer 1

Datatables不支持开箱即用的这种分组.但是,在许多情况下,有一个插件可用.

它被称为RowsGroup,位于:Datatables论坛.还包括一个实例.

如果您将此示例中的JS部分更改为如下所示,您将在输出窗口中显示所需的输出.

$(document).ready( function () {
  var data = [
    ['1', 'David', 'Maths', '80'],
    ['1', 'David', 'Physics', '90'],
    ['1', 'David', 'Computers', '70'],
    ['2', 'Alex', 'Maths', '80'],
    ['2', 'Alex', 'Physics', '70'],
    ['2', 'Alex', 'Computers', '90'],
  ];
  var table = $('#example').DataTable({
    columns: [
        {
            name: 'first',
            title: 'ID',
        },
        {
            name: 'second',
            title: 'Name',
        },
        {
            title: 'Subject',
        }, 
        {
            title: 'Marks',
        },
    ],
    data: data,
    rowsGroup: [
      'first:name',
      'second:name'
    ],
    pageLength: '20',
    });
} );

以下是结果的屏幕截图:

Answer 2

我尝试了RowsGroup 插件，但它只是通过劫持 DataTables 排序机制来实现的。如果您告诉它对给定的列进行分组，那么它对您所做的基本上就是对您无法关闭的该列应用排序。所以，如果你想按另一列排序，你不能。这在我的应用程序中不起作用。

相反，这是一个可以让您实现此结果的配方的工作小提琴：

https://jsfiddle.net/bwDialogs/fscaos2n

基本思想是将所有多行数据展平为一行。第 2、3 等行中的内容存储为<script>第一行中的隐藏模板标签。

它的工作原理是使用 DataTables 的drawCallback函数在 DataTables 呈现后操作 DOM，而不必尝试解析rowspan单元格内容而混淆 DataTables 。

由于这会在 DataTables 发挥其魔力后修改 DOM，因此即使进行分页、搜索和排序，您的多行部分也会粘在一起。

干杯。