Jquery datatable not working for first row in colspan - asp.net-mvc-5

Question

I tried to bind dynamically partial view its working but for jquery
datatable against first row what I specified below its not working.
#model IEnumerable<PurModelClass>
<table id="stock-audit-table" class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
#*<th>Purchase From</th>
<th>Purchase Date</th>*#
<th>Item Name</th>
<th>Qty</th>
<th>Unit</th>
<th>Cost</th>
<th>Net Amount</th>
<th>Discount</th>
<th>Vat</th>
<th>Gross</th>
</tr>
</thead>
<tbody id="stock-audit-tbody">
#foreach (var item in Model)
{
<tr><td colspan="8">Invoice No: #item.PurInvNo Inv Date: #($"{#item.PurDate:MMM-dd-yyyy}") Vendor: #item.VendorName </td></tr>
foreach (var detail in item.PurDetails)
{
<tr>
<td>#detail.StockName</td>
<td>#detail.PurQty</td>
<td>#detail.UnitName</td>
<td>#detail.UnitPrice</td>
<td>#detail.Total</td>
<td>#detail.Discount</td>
<td>#detail.VAT</td>
<td>#detail.NetAmount</td>
</tr>
}
}
</tbody>
<tfoot>
</tfoot>
</table>
This the datatable script, is there any way to implement jquery datatable by demanding specific row with colspan properties.
<script type="text/javascript">
$(document)
.ready(function() {
$('#stock-audit-table').DataTable({
"autoWidth": false,
"order": [[0, "desc"]]
});
}
);
</script>

Answer 1

Try the rowGroup extension. You can use startRender and endRender to customize the summary data
$('#stock-audit-table').DataTable({
"autoWidth": false,
"order": [[0, "desc"]],
"rowGroup": {
dataSrc: 0,
startRender: function(groupName){
return $('<tr/>').append("<td colspan="8">TODO put data here</td>");
}
}
});
<tbody id="stock-audit-tbody">
#foreach (var item in Model)
{
foreach (var detail in item.PurDetails)
{
<tr>
<td>
<!-- Define a key to be referenced by the
'datasrc' property in dataTables -->
#item.GroupName
</td>
<td>#detail.StockName</td>
<td>#detail.PurQty</td>
<td>#detail.UnitName</td>
<td>#detail.UnitPrice</td>
<td>#detail.Total</td>
<td>#detail.Discount</td>
<td>#detail.VAT</td>
<td>#detail.NetAmount</td>
</tr>
}
}
</tbody>