none
Ayuda con vista Parcial y DataTable de Jquery RRS feed

  • Pregunta

  •  que tal amigos resulta que quiero implementar el modelos del siguiente link

    https://datatables.net/examples/api/row_details.html

    para lo cual hago lo siguiente, para cargar la tabla principal uso el siguiente código.

    un boton

    $('#Btn-Search-Ofertas').on('click', function (event) {
            event.preventDefault();
            var mtoProcedimientoId = $('#MtoProcedimientoSearch').val();
            var mtoProveedorId = $('#MtoProveedorSearch').val();
            search(mtoProcedimientoId, mtoProveedorId);
            //earch_Ofertas(mtoProcedimientoId, mtoProveedorId);
        });
    y una funcion 
    function search(MtoProcedimientoId, MtoProveedorId) {
    
        console.log(MtoProcedimientoId);
        console.log(MtoProveedorId);
    
        $.ajax({
            url: _urlBase + 'Ofertas/Index2',
            contenType: "application/html; charset=utf-8",
            datatype: 'json',
            data: { mp: MtoProcedimientoId, pi: MtoProveedorId },
            beforeSend: function () { openLoad(); }
        })
        .done(function (result) {
            closeLoad();
            $('#ListOfertas').html(result);
            RenderDataTable($('#tabla-ofertas'));       
        })
        .fail(function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Ocurrio un error durante el proceso");
        });
    
    }

    y me da como resultado la vista de la partialview la cual contiene el datatable

    <table id="tabla-ofertas" class="font-light table display table-striped">
        <thead>
            <tr class="text-center">
                <th>No.</th>
                <th>Marcas</th>
                <th>Licitante</th>
                <th>Partida<br />Clave</th>
                <th>Precio <br />Ofertado</th>
                <th>Descuento<br />Ofertado</th>
                <th>Cantidad <br />Máxima</th>
                <th>Cantidad <br />Minima</th>
                <th>Monto <br />Partida</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @{          
                int status = 1;
            }
    
            @foreach (var item in Model)
            {
                <tr>
                    <td class="text-center">@(status++)</td>                
                    <td orderid="@item.MtoOfertaId" class="details-control"></td>
                    <td>@item.MtoProveedor.RazonSocial</td>
                    <td class="text-justify">
                        <span class="text-success">
                            @Html.DisplayFor(modelItem => item.MtoRequerimiento.Partida)
                            @Html.DisplayFor(modelItem => item.MtoRequerimiento.Gpo)
                            @Html.DisplayFor(modelItem => item.MtoRequerimiento.Gen)
                            @Html.DisplayFor(modelItem => item.MtoRequerimiento.Esp)
                            @Html.DisplayFor(modelItem => item.MtoRequerimiento.Dif)
                            @Html.DisplayFor(modelItem => item.MtoRequerimiento.Var)
                        </span> @Html.DisplayFor(modelItem => item.MtoRequerimiento.Descripcion)
                    </td>
    
                    <td class="text-right">@item.PrecioOfertado.ToString("C") </td>
                    <td class="text-right">@item.Descuento.ToString("N") </td>
                    <td class="text-right">@item.MaximoOfertado.ToString("N0")</td>
                    <td class="text-right">@item.MinimoOfertado.ToString("N0") </td>
                    <td class="text-right">@item.MontoPartida.ToString("C") </td>
                    <td>
    
                        <div class="btn-group">
                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ti-settings"></i>
                            </button>
                            <div class="dropdown-menu" x-placement="bottom-start" style="; transform: translate3d(0px, 35px, 0px); top: 0px; left: 0px; will-change: transform;">
                                <a class="dropdown-item" href='@Url.Action("Details", "Ofertas", new { @id = @item.MtoOfertaId })' title="Detalle">Detalle</a>
                                <div class="dropdown-divider"></div>
                                @if (User.IsInRole("Admin") || User.IsInRole("SuperAdmin"))
                                {
                                    <a class="dropdown-item" href='@Url.Action("Edit", "Ofertas", new { @id = @item.MtoOfertaId })' title="Editar Información"><i class="glyphicon glyphicon-edit"></i>Editar</a>
                                    <a class="dropdown-item" href="#" onclick="sweetDelete(id=@item.MtoOfertaId)"><span class="glyphicon glyphicon-trash"></span>Eliminar</a>
    
                                }
                            </div>
                        </div>
                        
                    </td>
                </tr>      
            }
    
    
        </tbody>
    </table>
    

    y me muestra el resultado deseado


     el problema empieza cuando quiero dar click en el icono verde para mostrar el detalle para lo cual uso el siguiente  código

        <script>      
            $(document).ready(function () {
                
                var table = $('#tabla-ofertas').DataTable({});
                
                $('body').on('click', '#tabla-ofertas tbody td.details-control', function () {
    
                    var orderid = $(this).attr("orderid");
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);
    
                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    } else {
                        // Open this row
                        format(row.child, orderid);
                        tr.addClass('shown');
                    }                
                });
    
            });
    
            function format(callback, orderid) {
    
                var tbl = '<table class="font-light table display table-striped">';
                var titulo = '';
                titulo += '<thead>';
                titulo += '<tr>';
                titulo += '<td>Denominación / Marca</td>';
                titulo += '<td>Registro Sanitario</td>';
                titulo += '<td>Titular Registro Sanitario</td>';
                titulo += '<td>Procedencia</td>';
                titulo += '<td>Fabricante</td>';
                titulo += '</tr>';   
                titulo += '<tbody>';
                //tbl.append(titulo);
    
                $.ajax({                
                    url: _urlBase + 'Generic/GetDetalleOfertaTecnicoEconomica',
                    data: { id: orderid },
                    dataType: "json",
                    complete: function (response) {                  
                        console.log(response);         
                        var data = JSON.parse(response.responseText);                              
                        var tbody = '';                    
                        $.each(data, function (i, item) {                        
                            tbody += '<tr>';
                            tbody += '<td>' + item.Marca + '</td>';
                            tbody += '<td>' + item.RegistroSanitario + '</td>';                        
                            tbody += '<td>' + item.TitularRegistro + '</td>';                        
                            tbody += '<td>' + item.Origen + '</td>';
                            tbody += '<td>' + item.Fabricante + '</td>';
                            tbody += '</tr>';
                        });
                        $('#ReplaceTable').html(tbl + titulo + tbody + '</tbody>' + '</table>');
                        console.log(tbl + titulo + tbody + '</tbody>'+ '</table>');
                        callback($(tbl + titulo + tbody + '</tbody>' + '</table>')).show();
                    },
                    error: function () {
                        $('#output').html('Bummer: there was an error!');
                    }
                });
            }
            
    
        </script>
    }

    resulta que  ya obtengo la informacion de cada registro, pero no he podido incluirla en la tabla padre.

    podrian echarme por favor una mano, de verdad se los agradecería muchismo


    Horacio Xochitemol Bautista

    • Cambiado Alberto PoblacionMVP viernes, 3 de julio de 2020 19:23 Estaba en el foro de C# pero no es una pregunta sobre C#
    viernes, 3 de julio de 2020 2:38

Todas las respuestas

  • Hola  

      

    Te comento que esta seccion del foro es para consultas de C#

      

    Gracias por usar los foros de MSDN.  

      

    Andres Aguilar 

     ____________________________ 

      

    Por favor recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema, es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde.  

    Microsoft ofrece este servicio de forma gratuita, con la finalidad de ayudar a los usuarios y la ampliación de la base de datos de conocimientos relacionados con los productos y tecnologías de Microsoft.   

    Este contenido es proporcionado "tal cual" y no implica ninguna responsabilidad de parte de Microsoft. 

    viernes, 3 de julio de 2020 17:07