jQuery DataTables: ROWSPAN in table body TBODY

 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.

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.

$(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

Credits & Source: https://www.gyrocode.com/articles/jquery-datatables-rowspan-in-table-body-tbody/