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

问题描述

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

这不是静态表，我们使用 json 数据呈现它.
我在这里，使用aoColumns"动态呈现行.
有什么方法可以使用 rowspan 以便可以跨越单元格 (1,2,David,Alex).
datatables 支持这种表吗?

解决方案

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屋！