Skip to main content
Recompensa finalizada con 200 de reputación otorgada por John Doe
Clase para child-row
Origen Enlace
Sal
  • 7.8k
  • 1
  • 11
  • 21
$(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>' 
                      );
            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>
$(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();
    });
});
<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>
$(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>
Origen Enlace
Sal
  • 7.8k
  • 1
  • 11
  • 21

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.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();
    });
});
<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>