jQuery DataTables: ROWSPAN in table body TBODY

Michael Ryvkin
35 35

jQuery DataTables plugin doesn’t yet support COLSPAN and ROWSPAN attributes in table body. However there is a RowsGroup plugin for jQuery DataTables that emulates appearance of using ROWSPAN attribute by grouping cells together.

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

You May Also Like

jQuery DataTables: Row selection using checkboxes and Select extension
jQuery DataTables: Row selection using checkboxes
jQuery DataTables: Why click event handler does not work
jQuery DataTables: Alphabetical Search
Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.

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.

    Reply

  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.

    Reply

  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!!

    Reply

    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]
   });   
});
      Reply

      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.

        Reply

  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

    Reply

Leave a Reply

(optional)

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