How to add Rowspan in JQuery datatables

by

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:

enter image description here

More Related Contents:

  1. Add table row in jQuery
  2. Convert JSON array to an HTML table in jQuery
  3. Get the contents of a table row with a button click
  4. How to reload/refresh jQuery dataTable?
  5. What is the best way to remove a table row with jQuery?
  6. TypeError: $(…).DataTable is not a function
  7. JQuery Datatables search within input and select
  8. Remove table row after clicking table row delete button
  9. Convert html table to array in javascript
  10. How to tell which row number is clicked in a table?
  11. Export HTML table to CSV using vanilla javascript
  12. jQuery DataTables server-side processing using ASP.NET WebForms
  13. jquery datatables hide column
  14. DataTables row.add to specific index
  15. How to display Image dynamically on UI?
  16. Appended new row is not behaving like previous one (row)
  17. Adding a table row in jQuery
  18. Disable sorting for a particular column in jQuery DataTables
  19. How to use rowspan and colspan in tbody using datatable.js?
  20. Change table columns order
  21. How do I add button on each row in datatable?
  22. jQuery plugin DataTables: How to highlight the current search text?
  23. Large dynamically sized html table with a fixed scroll row and fixed scroll column
  24. Sort a table fast by its first column with Javascript or jQuery
  25. How to implement hierarchical multilevel datatable in javaScript?
  26. Datatables TypeError: c is undefined
  27. jQuery append and remove dynamic table row
  28. How to submit checkboxes from all pages with jQuery DataTables
  29. JQuery Datatables : Cannot read property ‘aDataSort’ of undefined
  30. Force browser to download image files on click

Leave a Comment