jQuery DataTables – ROWSPAN in table body TBODY

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

Related posts

Leave a Reply

Your email address will not be published.

(Optional)