$(document).ready(function() {
var table = $('#example').DataTable({
'data': [
["Tiger Nixon","System Architect","Edinburgh","5421","2011/04/25","$320,800"],
["Tiger Nixon","Additional information","","","",""],
["Garrett Winters","Accountant","Tokyo","8422","2011/07/25","$170,750"],
["Garrett Winters","Additional information","","","",""],
["Ashton Cox","Junior Technical Author","San Francisco","1562","2009/01/12","$86,000"],
["Ashton Cox","Additional information","","","",""],
["Cedric Kelly","Senior Javascript Developer","Edinburgh","6224","2012/03/29","$433,060"],
["Cedric Kelly","Additional information","","","",""],
["Airi Satou","Accountant","Tokyo","5407","2008/11/28","$162,700"],
["Airi Satou","Additional information","","","",""]
],
'columnDefs': [
{
'targets': [1, 2, 3, 4, 5],
'orderable': false,
'searchable': false
}
],
'rowsGroup': [0],
'createdRow': function(row, data, dataIndex){
// Use empty value in the "Office" column
// as an indication that grouping with COLSPAN is needed
if(data[2] === ''){
// Add COLSPAN attribute
$('td:eq(1)', row).attr('colspan', 5);
// Hide required number of columns
// next to the cell with COLSPAN attribute
$('td:eq(2)', row).css('display', 'none');
$('td:eq(3)', row).css('display', 'none');
$('td:eq(4)', row).css('display', 'none');
$('td:eq(5)', row).css('display', 'none');
}
}
});
});
<h3><a href="http://www.gyrocode.com/articles/jquery-datatables-colspan-in-table-body-tbody/">jQuery DataTables: COLSPAN in table body TBODY</a> <small>COLSPAN and ROWSPAN</small></h3>
<table id="example" class="stripe hover cell-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
External resources loaded into this fiddle: