Hello, good morning, I have problems with my switches because when I click on the pager to go to the next page, the switches lose their design. I am filling the table with Ajax and then I place the javascript of the switch plugin.
Do you have any idea why the switch is only applied on the first elements of the table?
I share my code
Table
function getAlumnosRadiusAjax() {
$.ajax({
url : "<?php echo base_url('Radius/getAlumnosRadiusAjax')?>",
type: "POST",
dataType: "JSON",
success: function(data) {
console.log(data);
var html = '';
var btn_switch = '';
var contador = 1;
var filas = data.length;
for (i = 0 ; i < filas; i++){
if (data[i].wifi_status == "enabled") {
btn_switch = "<input type='checkbox' name='switch-wifi-status' onclick='mensajePrueba();' id='switch-wifi-status' checked data-bootstrap-switch>";
} else {
btn_switch = "<input type='checkbox' name='switch-wifi-status' id='switch-wifi-status' checked data-bootstrap-switch>";
}
html += `<tr>
<td>${contador}</td>
<td>${data[i].idPerson}</td>
<td>${data[i].name}</td>
<td>${data[i].instEmail}</td>
<td>${data[i].carrer}</td>
<td>${data[i].type}</td>
<td>
${btn_switch}
</td>
<td>
<div class="btn-group btn-group-sm">
<a href="#" class="btn btn-info" title="Autorizar" onclick="updateAlumnosRadiusAjax('${data[i].enrollment}');"><i class="fas fa-unlock"></i></a>
<a href="#" class="btn btn-info" title="Clave" onclick="message_success('${data[i].value}');"><i class="fas fa-key"></i></a>
<a href="#" class="btn btn-info" title="Generar contraseña"><i class="fas fa-exclamation-triangle"></i></a>
<a href="#" class="btn btn-info" title="Cambiar contraseña email"><i class="fas fa-unlock-alt"></i></a>
<a href="#" class="btn btn-info" title="Enviar mail"><i class="fas fa-paper-plane"></i></a>
</div>
</td>
</tr>`;
contador++;
}
$('#tbody-radius').html(html); //inserto los registros a la tabla
$('#tabla_radius_alumnos').DataTable(); //activo e DataTables
},
error: function (jqXHR, textStatus, errorThrown) {
alert("algo salio mal");
}
});
}
<section class="content">
<div class="container-fluid">
<!-- /.row -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">DataTable with default features</h3>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table id="tabla_radius_alumnos" class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Nombre</th>
<th>Email</th>
<th>Carrera</th>
<th>Grupo</th>
<th>Estatus</th>
<th>Movimientos</th>
</tr>
</thead>
<tbody id="tbody-radius">
</tbody>
<tfoot>
<tr>
<th>#</th>
<th>ID</th>
<th>Nombre</th>
<th>Email</th>
<th>Carrera</th>
<th>Grupo</th>
<th>Estatus</th>
<th>Movimientos</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</section>
New code outside my function
// Ejecutar hasta que se haya cargado el DOM
$(function() {
// Inicializar el plugin sobre elementos específicos
$("input[data-bootstrap-switch]").bootstrapSwitch();
// Delegar evento
$('#tbody-radius').on('switchChange.bootstrapSwitch', 'input[data-bootstrap-switch]', function(event, state) {
// Activar diseño de switch
$("input[data-bootstrap-switch]").each(function(){
$(this).bootstrapSwitch('state', $(this).prop('checked'));
});
});
});
Result (check that it only applies to the elements of tab 1 and not to those of tab 2 of the pager)
Where in my code should I put the plugins switch javascript?
Update 2:
Following the recommendation in the comments, I found that dataTables also has hooks :
Reference: dataTables Events
Update:
Records don't exist until you display them
DataTable
, so try adding a delegate event:According to the jQuery documentation for on()
switchChange.bootstrapSwitch hook (event) reference
Note: I've removed options that haven't worked and left only the ones that seem to be on the right track.
In case you still haven't been able to solve the problem. Datatables has an event
page
that detects the page change, I show you how to integrate itIn another segment of the code add this function