Usa la API. 
Tanto para instanciar, como para iniciar los sub-renglones, y controlar la visibilidad:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(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.node().classList.add('child-row');
                this.child( '<td>Fecha</td>'
                          + '<td>'+this.data().FechaFactura+'</td>' 
                          );
            }
        );
        
        $('#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();
        });
    });

<!-- language: lang-html -->

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

<!-- end snippet -->