Edit in JSFiddle

$(document).ready(function (){
    var table = $('#example').DataTable({
        ajax: 'https://gyrocode.github.io/files/jquery-datatables/arrays.json',   
        createdRow: function(row, data, dataIndex){
            // If name is "Ashton Cox"
            if(data[0] === 'Ashton Cox'){
                // Add COLSPAN attribute
                $('td:eq(1)', row).attr('colspan', 3);
                
                // Center horizontally
                $('td:eq(1)', row).attr('align', 'center');

                // 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');

                // Update cell data
                this.api().cell($('td:eq(1)', row)).data('N/A');
            }
        }
    });
});
 

<h3><a target="_blank" href="https://www.gyrocode.com/articles/jquery-datatables-colspan-in-table-body-tbody/">jQuery DataTables: COLSPAN in table body TBODY</a> <small>Ajax data</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>

<hr><a href="https://www.gyrocode.com/articles/tag/jquery-datatables/">See more articles about jQuery DataTables</a> on <a href="https://www.gyrocode.com/articles/">Gyrocode.com</a>