Usa la API. Tanto para instanciar, como para iniciar los sub-renglones, y controlar la visibilidad:
$(document).ready( function(){
table = $('#example').DataTable(
{ // Cambia data por tu Ajax
data: [ { OrdenCompra: 1, FechaFactura: '2021-01-01' }
, { OrdenCompra: 2, FechaFactura: '2021-02-02' }
, { OrdenCompra: 3, FechaFactura: '2021-03-03' }
]
, columns: [ { title: 'Orden de Compra'
, className: 'control-detalle'
, orderable: true
, data: 'OrdenCompra'
}
]
}
);
table.rows().every(
function(){
this.child( '<td>Fecha</td>'
+ '<td>'+this.data().FechaFactura+'</td>'
);
this.child()[0].classList.add('child-row');
}
);
$('#example tbody').on( 'click', 'td.control-detalle', function(){
let tr = $(this).closest('tr');
let row = table.row(tr);
if( row.child.isShown() )
row.child.hide();
else
row.child.show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="example">
</table>