jQuery DataTables: ROWSPAN in table body TBODY

Update
February 1, 2018
See jQuery DataTables: COLSPAN in table body TBODY if you are looking for a solution to add support for COLSPAN attribute for a cell in table body.

Plugin requires jQuery DataTables version 1.10 or above. According to the author’s post on DataTables forum, this plugin has the following features:

  • supports nested multi grouping rows
  • supports both client-side and server-side processing
  • correctly handles single-column and multi-column ordering

To use the plugin, you need to include JavaScript file dataTables.rowsGroup.js and use rowsGroup option as shown below. Option rowsGroup should be an array of the column selectors in order you want the grouping to be applied.

var table = $('#example').DataTable({
   'rowsGroup': [2]
});

More details on usage can be found on plugin’s project page.

Example

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
$(document).ready(function(){
   var table = $('#example').DataTable({
      'ajax': 'https://api.myjson.com/bins/qgcu',
      'rowsGroup': [2]
   });
});

In addition to the above code, the following Javascript library files are loaded for use in this example:

//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js
https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js

The following CSS library files are loaded for use in this example to provide the styling of the table:

https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css

Edit on jsFiddle

You May Also Like

Comments

  1. A great example Michael!
    I have an issue though with the rowreorder being applied with this plugin. Row reorder works just fine for rows within the rowspan except if first row in the row group is to be swapped with any otehr row of the row group.
    Below is the live example of the same :

    http://live.datatables.net/nowamowi/1/edit

    Could you please help me out on this? I need to be able to drag-drop all the rows of the row group.

  2. Hi this one very much useful for me, unfortunately while using 'rowsGroup': [0] is not working properly can you give some idea about the issue.

  3. Hi Michael Ryvkin, Thanks for knowledge sharing. This is very much helpful for us. I have one small question on this, it’ll be great and much more appreciated if you answered it asap you can.

    What if we need to define multiple rowsGroup?

    Explanation: In the above example you grouped all the rows with the column Office location, in the same way what if I need to group the rows by Position?. Hope I am clear about my question!!

    1. Done. Got it.. Here’s the answer

      $(document).ready(function() {
         var table = $('#example').DataTable({
            'ajax': 'https://api.myjson.com/bins/qgcu',
            'rowsGroup': [1,2]
         });   
      });
      1. Glad that you figured it out. Keep in mind that the order is important so that 'rowsGroup': [1, 2] will first group by position and then by city, and 'rowsGroup': [1, 2] will first group by city and then by position.

  4. Hi Michael Ryvkin, Thanks for knowledge sharing. This is very much helpful for us. I have one small question on this. When exporting to excel or pdf the result shows normal table with out grouping can you help me to sort out this problem ?

    Thanks and Best Regards

Leave a Reply to vpmaela Cancel reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.