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.

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)

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