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' ? '←' : '→',
'previous': $('html').attr('dir') == 'rtl' ? '→' : '←'
}
},
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' ? '←' : '→',
'previous': $('html').attr('dir') == 'rtl' ? '→' : '←'
}
},
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');
});