如何在JQuery数据表中添加Rowspan [英] How to add Rowspan in JQuery datatables

问题描述

我使用Jquery数据表构造一个表。

我的要求如下：

这不是静态表，我们使用json数据渲染它。
在这里，我使用aoColumns动态渲染行

有没有办法使用 rowspan ，以便单元格（1,2，David，Alex ）可以跨越。

数据表是否支持这种表？

解决方案

Datatables不支持这种分组盒子。
但是，在许多情况下，有一个插件可用。

它被称为RowsGroup，位于这里：

Im using Jquery datatables to construct a table.
My requirement is like below

This is not a static table, and we are rendering it using json data.
Here I'm, rendering the rows dynamically using "aoColumns".
Is there any way to use rowspan so that the cells (1,2,David,Alex) can be spanned.
Does datatables support this kind of table ?

解决方案

Datatables does not support this kind of grouping out of the box. But, as in many cases, there is a plugin available.

It is called RowsGroup and is located here: Datatables Forums. A live example is also included.

If you change the JS part in this example to the below you will have your desired output presented to you in the output window.

$(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',
    });
} );

Here is a screenshot of the result:

这篇关于如何在JQuery数据表中添加Rowspan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！