I'm using Spring Boot and MySQL. I have data in following structure.

I try to show it like following structure. I'm using datatable Datatable link, I tried using api(s) of datatable and javascript in many ways to do, but I couldn't make it.

Few links describe to be done with $('#datatable').DataTable({'rowsGroup': [0]}), but not working. I implemented using map in Java. But I feel better if I do it in front-end

• Datetime always unique and each Datetime has 6 records always

• Value should be sum(value)/(distinct Datetime)

• If null/empty values are passing in feedback, ignore title and feedback only

How can I solve this?

I'm using Spring Boot and MySQL. I have data in following structure.

I try to show it like following structure. I'm using datatable Datatable link, I tried using api(s) of datatable and javascript in many ways to do, but I couldn't make it.

Few links describe to be done with $('#datatable').DataTable({'rowsGroup': [0]}), but not working. I implemented using map in Java. But I feel better if I do it in front-end

• Datetime always unique and each Datetime has 6 records always

• Value should be sum(value)/(distinct Datetime)

• If null/empty values are passing in feedback, ignore title and feedback only

How can I solve this?

• javascript
• jquery
• datatable
• datatables

• Possible duplicate of How to add Rowspan in JQuery datatables – cнŝdk Commented Jul 12, 2018 at 12:06

1 Answer 1

You need to use datatable rowsGroup plugin. See the link - datatables-rowsgroup or New 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 to view the example.