quería saber si se puede "recargar" una tabla implementada con el plugin Datatables
sin tener que recargar la pagina.
Tengo una tabla con una columna de "Acciones" que tiene dos , uno para editar la información de esa persona y otro para activar/desactivar el estatus de esa persona. Lo que quiero es que al activar/desactivar
a esa persona me recargue
la tabla y cambie el icono que le asigne a ese <a></a>
sin tener que actualizar la pagina manualmente (F5).
Hasta ahora mi solución fue poner un window.location.href="mismapagina";
para simular eso, pero no me parece correcto.
PD: Al presionar el icono activar/desactivar puse una ventana de confirmación utilizando sweetAlert2.js donde si es true, ejecuto el window.location
, sino no hago nada.
LISTADO HTML:
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<!-- /.box-header -->
<div class="box-body">
<table id="registros" class="table table-bordered table-striped">
<thead>
<tr>
<th width="10%">Acciones</th>
<th>Materia</th>
<th>Creditos</th>
<th>Cuatrimestre</th>
<th width="10%">Estatus</th>
</tr>
</thead>
<tbody>
<?php
try{
$sql="SELECT idmateria, nombre, creditos, siglas, idcuatrimestre, estatus from materia order by idcuatrimestre, idmateria asc ";
$resultado=$conn->query($sql);
}catch (Exception $e){
$error = $e->getMessage();
echo $error;
}
while ($admin=$resultado->fetch_assoc()){?>
<tr>
<td width="10%">
<a href="editar-materias.php?id=<?php echo $admin['idmateria'];?>" class="btn bg-orange mb btn-flat ">
<i class="fa fa-pencil-alt"></i>
</a>
<?php if ($admin['estatus']){ ?>
<a href="#" data-id="<?php echo $admin['idmateria']?>;" data-tipo="materia" title="Desactivar usuario" class="btn bg-green-gradient mb btn-flat desactivar_registro">
<i class="fas fa-toggle-on"></i>
</a>
<?php } else { ?>
<a href="#" data-id="<?php echo $admin['idmateria']?>;" data-tipo="materia" title="Activar usuario" class="btn bg-gray mb btn-flat activar_registro">
<i class="fas fa-toggle-off"></i>
</a>
<?php } ?>
</td>
<td><?php echo $admin['nombre'];?></td>
<td><?php echo $admin['creditos'];?></td>
<td><?php echo $admin['idcuatrimestre'];?></td>
<?php if ($admin['estatus']){ ?>
<td width="10%"><span class="label bg-green-active">ACTIVO</span></td>
<?php } else { ?>
<td width="10%"><span class="label bg-gray-active">INACTIVO</span></td>
<?php } ?>
</tr>
<?php }?>
</tbody>
<tfoot>
<tr>
<th>Acciones</th>
<th>Materia</th>
<th>Creditos</th>
<th>Cuatrimestre</th>
<th width="10%">Estatus</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
Codigo Datatable (Este codigo lo puse en un .js aparte porque lo reutilizo para todas las tablas que tengo, todas tienen el mismo id):
$(document).ready(function () {
$('#registros').dataTable({
dom: 'lBfrtip',
buttons: [
'copy', 'csv', 'excel',
{
extend : 'pdfHtml5',
orientation : 'landscape',
pageSize : 'LEGAL'
}
],
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : false,
'language' :{
sProcessing: "Procesando...",
sLengthMenu: "Mostrar _MENU_ registros",
sZeroRecords: "No se encontraron resultados",
sEmptyTable: "Ningún dato disponible en esta tabla",
sInfo: "Mostrando _END_ de un total de _TOTAL_ registros",
sInfoEmpty: "Mostrando _END_ de un total de 0 registros",
sInfoFiltered: "(filtrado de un total de _MAX_ registros)",
sInfoPostFix: "",
sSearch: "Buscar:",
sUrl: "",
sInfoThousands: ",",
sLoadingRecords: "Cargando...",
oPaginate: {
sFirst: "Primero",
sLast: "Último",
sNext: "Siguiente",
sPrevious: "Anterior"
},
oAria: {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
}).DataTable();
$('#registros').wrap("<div class='scrolledTable'></div>");
});
Código activar/desactivar:
function activarRegistro() {
$('.activar_registro').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('data-id');
var tipo = $(this).attr('data-tipo');
const swalWithBootstrapButtons = swal.mixin({
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: true,
})
swalWithBootstrapButtons({
title: '¿Activar usuario?',
text: "Activara el usuario seleccionado",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Activar',
cancelButtonText: 'Cancelar',
reverseButtons: false
}).then((result) => {
if (result.value) {
$.ajax({
type: 'post',
data: {
'id': id,
'registro' : 'activar'
},
url: '../funciones/modelo-'+tipo+'.php',
success: function(e) {
var resultado = JSON.parse(e);
if (resultado.respuesta == 'exito') {
swal(
'¡Activado!',
'El usuario ha sido activado.',
'success'
)
// jQuery('[data-id="'+ resultado.id_eliminado +'"]').parents('tr').remove();
window.location.href="listado-alumnos.php";
}else{
swal(
'¡Error!',
'El usuario no se pudo activar',
'error'
)
}
},
error: function (e) {
console.log("Error: "+e.responseText);
}
})
} else if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.cancel
) {
swalWithBootstrapButtons(
'Cancelado',
'No se realizó ningún cambio',
'error'
)
}
})
});
}
function desactivarRegistro() {
$('.desactivar_registro').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('data-id');
var tipo = $(this).attr('data-tipo');
const swalWithBootstrapButtons = swal.mixin({
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: true,
})
swalWithBootstrapButtons({
title: '¿Desactivar usuario?',
text: "Desactivara el usuario seleccionado",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Desactivar',
cancelButtonText: 'Cancelar',
reverseButtons: false
}).then((result) => {
if (result.value) {
$.ajax({
type: 'post',
data: {
'id': id,
'registro' : 'desactivar'
},
url: '../funciones/modelo-'+tipo+'.php',
success: function(e) {
var resultado = JSON.parse(e);
if (resultado.respuesta == 'exito') {
swal(
'¡Desactivado!',
'El usuario ha sido desactivado.',
'success'
)
window.location.href="listado-alumnos.php";
}else{
swal(
'¡Error!',
'El usuario no se pudo desactivar',
'error'
)
}
},
error: function (e) {
console.log("Error: "+e.responseText);
}
})
} else if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.cancel
) {
swalWithBootstrapButtons(
'Cancelado',
'No se realizó ningún cambio',
'error'
)
}
})
});
}