javascript - 如何在数据表中使用Rowspan

标签 javascript jquery datatable datatables

我正在使用 Spring Boot 和 MySQL。我有以下结构的数据。

enter image description here

我尝试将其显示为以下结构。我正在使用数据表 Datatable link ,我尝试了很多方法使用datatable和javascript的api来做到这一点,但我无法做到。

很少有链接描述使用 $('#datatable').DataTable({'rowsGroup': [0]}) 完成,但不起作用。我用Java中的map实现了。不过在前端做的话感觉会好一些

enter image description here

  • 日期时间始终是唯一的,每个日期时间始终有 6 条记录

  • 值应为sum(值)/(不同日期时间)

  • 如果反馈中传递 null/空值,仅忽略标题和反馈

我该如何解决这个问题?

最佳答案

您需要使用数据表rowsGroup插件。请参阅链接 - datatables-rowsgroupNew RowsGroup plugin

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

Click here查看示例。

关于javascript - 如何在数据表中使用Rowspan,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51305088/

相关文章:

javascript - 对 Angular js 中的 $http 拦截器感到困惑

javascript - 将鼠标悬停在页脚中的图像上,文本将显示在主窗口中

jquery - 如何在悬停时为圆形图像添加边框? CSS 或 jquery

jquery - Javascript 在第一次加载时不起作用

渲染带有标题/标题和预选行的 Shiny 数据表

javascript - 使用 Jquery 自动向下滚动?

javascript - 如何使用 Execute Javascript driver.findElement(Robot Framework 中的 By.xpath

javascript - 粘贴文本时去除textarea中的字符

c# - 数据表序列化没有按预期工作

javascript - Webix DataTable - 展开对象属性