0

Buenas devs necesito un poco de ayuda, tengo una función que me muestra el datatable correctamente, pero al momento en el que guardo mi formulario para recargar la tabla tengo que usar $('#tablaServicioTecnico').DataTable().destroy(); pero usar esto causa una animacion extraña pero he visto que usando $('#tablaServicioTecnico').DataTable().ajax.reload(); es mejor pero el problema es que ocupando este código no me funciona ayuda por favor.

ESTA ES MI FUNCIÓN EN LA CUAL TENGO MI DATATABLE

function mostrarTablaServicioTecnico() {
    
    $.ajax({
        url: "http://localhost/ci3/ordenes_trabajo/servicio_tecnico/mostrar",
        type: "post",
        dataType: "json",
        success: function (data) {
            if (data.respuesta == 'success') {
                let i = "1";
                // console.log(data)
                
                $('#tablaServicioTecnico').DataTable({
                    autoWidth: false,
                    language: {
                        "sProcessing": "Procesando...",
                        "sZeroRecords": "No se encontraron resultados",
                        "sEmptyTable": "Ningún dato disponible en esta tabla",
                        "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                        "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                        "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                        "sInfoPostFix": "",
                        "sUrl": "",
                        "sInfoThousands": ",",
                        "sLoadingRecords": "Cargando...",
                        "oAria": {
                            "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                            "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                        },
                        // Select2 for length menu styling
                        
                        // Initialize
                        
                        search: '<span>Filtro:</span> _INPUT_',
                        searchPlaceholder: 'Escriba para buscar...',
                        lengthMenu: '<span>Mostrar:</span> _MENU_',
                        paginate: {
                            'first': 'First',
                            'last': 'Last',
                            'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                            'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'
                        }
                    },
                    
                    dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
                    'data': data.datos,
                    'responsive': true,
                    'columns': [
                        {
                            "render": function () {
                                return accionesBotones = i++;
                            }
                        },
                        {
                            "render": function (data, type, row, meta) {
                                return `${row.Nombre_Cliente} ${row.Apellido_Cliente}`
                                
                            }
                        },
                        {"data": 'Nombre_Documento'},
                        {"data": "NumeroDocumento_OTServicioTecnico"},
                        {"data": "Descripcion_OTServicioTecnico"},
                        {"data": "Fecha_OTServicioTecnico"},
                        {
                            "render": function (data, type, row, meta) {
                                return `<strong class="text-primary">$${row.Total_OTServicioTecnico}</strong>`
                            }
                        },
                        {
                            "render": function (data, type, row, meta) {
                                
                                let accionesBotones = `<div class="list-icons"><a href="#" id="verOtServicioTecnico" value="${row.ID_OTServicioTecnico}" class="btn btn-primary btn-icon" type="button"><i class="icon-info22"></i></a><a href="#" id="editarOtServicioTecnico" value="${row.ID_OTServicioTecnico}" class="btn btn-warning btn-icon" type="button"><i class="icon-pencil7"></i></a><a href="#" id="eliminarOtServicioTecnico" value="${row.ID_OTServicioTecnico}"  class="btn btn-danger btn-icon" type="button"><i class="icon-trash"></i></a></div>`
                                
                                return accionesBotones
                                
                            }
                        },
                    ]
                    
                });
                $('.dataTables_length select').select2({
                    minimumResultsForSearch: Infinity,
                    dropdownAutoWidth: true,
                    width: 'auto'
                });
            } else {
                $('#tablaServicioTecnico').DataTable().destroy()
                /* ESTETICA AL MOSTRAR EL MENSAJE DE ERROR */
                $('#tablaServicioTecnico').DataTable({
                    autoWidth: false,
                    language: {
                        "sProcessing": "Procesando...",
                        "sZeroRecords": "No se encontraron resultados",
                        "sEmptyTable": "Ningún dato disponible en esta tabla",
                        "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                        "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                        "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                        "sInfoPostFix": "",
                        "sUrl": "",
                        "sInfoThousands": ",",
                        "sLoadingRecords": "Cargando...",
                        "oAria": {
                            "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                            "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                        },
                        // Select2 for length menu styling
                        
                        // Initialize
                        
                        search: '<span>Filtro:</span> _INPUT_',
                        searchPlaceholder: 'Escriba para buscar...',
                        lengthMenu: '<span>Mostrar:</span> _MENU_',
                        paginate: {
                            'first': 'First',
                            'last': 'Last',
                            'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                            'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'
                        }
                    },
                    
                    dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
                    'data': [],
                    'responsive': true,
                })
                $('.dataTables_length select').select2({
                    minimumResultsForSearch: Infinity,
                    dropdownAutoWidth: true,
                    width: 'auto'
                });
            }
            
        }
    })
    
}

ESTE ES EL PROCESO FINAL CUANDO GUARDO MI FORMULARIO

La tabla se destruye y luego se recarga de nuevo

$(document).on('click', '#crearOrdenTrabajoServicioTecnico', function (event) {
    
    event.preventDefault();
    
    // let idCliente = $("#cliente").val();
    // let marca = $("#marca").val();
    // let modelo = $("#modelo").val();
    // let descripcion = $("#descripcion").val();
    // let precio = $("#precio").val();
    // let impuesto = $("#impuesto").val();
    // let subtotal = $("#subtotal").val();
    // let total = $("#total").val();
    
    let documento = $('#idDocumento').val()
    let serieDocumento = $("#serieDocumento").val();
    let numeroDocumento = $("#numeroDocumento").val();
    let cliente = $("#cliente").val();
    let marca = $("#marca").val();
    let modelo = $("#modelo").val();
    let descripcion = $("#descripcion").val();
    let precio = $("#precio").val();
    let impuestoDocumento = $("#iva").val();
    let subtotal = $("#subtotal").val();
    let total = $("#total").val();
    
    // alert(total)
    $.ajax({
        url: "http://localhost/ci3/ordenes_trabajo/servicio_tecnico/crear",
        type: "post",
        dataType: "json",
        data: {
            /* NOMBRE DE LOS CAMPOS DE LA BASE DE DATOS | VARIABLE CON LA INFORMACION */
            // ID_Cliente: idCliente,
            // Marca_OTServicioTecnico: marca,
            // Modelo_OTServicioTecnico: modelo,
            // Descripcion_OTServicioTecnico: descripcion,
            // Precio_OTServicio_Tecnico: precio,
            // Impuesto_OTServicioTecnico: impuesto,
            // Subtotal_OTServicioTecnico: subtotal,
            // Total_OTServicioTecnico: total,
            ID_Documento: documento,
            Serie_OTServicioTecnico: serieDocumento,
            NumeroDocumento_OTServicioTecnico: numeroDocumento,
            ID_Cliente: cliente,
            Marca_OTServicioTecnico: marca,
            Modelo_OTServicioTecnico: modelo,
            Descripcion_OTServicioTecnico: descripcion,
            Precio_DetalleOTServicioTecnico: precio,
            Impuesto_OTServicioTecnico: impuestoDocumento,
            Subtotal_OTServicioTecnico: subtotal,
            Total_DetalleOTServicioTecnico: total,
            Total_OTServicioTecnico: total,
            
        },
        success: function (data) {
            // console.log(data)
            if (data.respuesta == 'success') {
                $('#tablaServicioTecnico').DataTable().destroy();
                mostrarTablaServicioTecnico()
                // location.reload();
                /* ESTETICA AL MOSTRAR EL MENSAJE DE EXITO */
                new Noty({
                    layout: 'topRight',
                    theme: 'limitless',
                    type: 'success',
                    text: data.mensaje,
                    timeout: 3000,
                }).show();
            } else {
                
                /* ESTETICA AL MOSTRAR EL MENSAJE DE ERROR */
                new Noty({
                    layout: 'topRight',
                    theme: 'limitless',
                    type: 'error',
                    text: data.mensaje,
                    timeout: 5000,
                }).show();
                
            }
        }
    })
    $('#formularioServicioTecnico')[0].reset()
    $('#tipoDocumento').val(null).trigger('change');
    $('#cliente').val(null).trigger('change');
});
3
  • Quizás no te esta funcionando porque no estas volviendo a llamar al api, solo estás actualizando el ajax que no se ha modificado.
    – Carlos1232
    Commented el 14 ago. 2020 a las 22:23
  • @Carlos1232 y en ese caso que me recomendarias hacer ??? Commented el 14 ago. 2020 a las 22:24
  • Que limpies la data si es satisfactorio y vuelvas a llamar a tu mostrarTablaServicioTecnico()
    – Carlos1232
    Commented el 14 ago. 2020 a las 22:32

1 respuesta 1

1

eso ocurre porque la tabla se esta reformando. tienes 3 opciones que yo recomiendo

  1. tener una tabla invisble que se cargue y que cuando este ok, oculte la anterior y aparezca la nueva (aplicando el metodo de adjust colum) y siempre juegues con esas 2 tablas, la actual y la de recarga.
  2. poner un efecto de loader que enmascare la tabla. (puedes usar skeletor o nprogress, con css y algunos div)
  3. recargar la pagina nada mas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.