Tengo el siguiente codigo en Javascript, donde con ayuda de ajax genero una tabla con filas que contienen checkboxs. Ahora bien, necesito que mostrar los checkbox marcados al recargar la pagina, cosa que se puede lograr con localstorage, pero al estar en una tabla no hay una cantidad fija de registros.
Lo que hago es asignar un ID dinamico a cada checkbox para un mejor manejo y guardarlo en localStorage. Sin embargo, el ID se le asigna una vez doy click al checkbox, por lo tanto el estado que guarde en localStorage no funciona, ya que, busca un ID que solo es asignado al hacer click.
En resumen, al recargar la pagina los checkboxs no tienen ID, a menos que haga click en ellos y el localStorage no puede mostrar su estado porque no existe tal ID. ¿Habrá alguna manera de mostrar su estado? Adjunto el archivo js.
$(document).ready(function() {
var user_id, opcion;
opcion = 1;
tablaUsuarios = $('#tablaUsuarios').DataTable({
"ajax":{
"url": "bd/crud.php",
"method": 'POST',
"data":{opcion:opcion},
"dataSrc":""
},
"columns":[
{"data": "id"},
{"data": "nombre"},
{"data": "cedula"},
{"data": "fecha_reg"}
]
});
$('#tablaDetalles').wrap('<div id="hide" style="display:none"/>');
$('#tablaUsuarios tbody').on( 'click', 'tr', function () {
$('#hide').css( 'display', 'block' );
user_id = parseInt($(this).closest('tr').find('td:eq(0)').text()) ;
opcion = 2;
tablaDetalles = $('#tablaDetalles').DataTable({
destroy:true,
"ajax":{
"url": "bd/crud.php",
"method": 'POST',
"data":{opcion:opcion, user_id:user_id},
"dataSrc":"",
},
"columns":[
{"data": "id"},
{"data": "num_credito"},
{"data": "monto"},
{"data": "plazo"},
{"data":"frecuencia"},
{"defaultContent": "<div class='text-center'><div class='form-check' ><input class='form-check-input check1' type='checkbox'></div></div>"},
{"defaultContent": "<div class='text-center'><div class='form-check' ><input class='form-check-input check2' type='checkbox'></div></div>"}
]
});
});
$(document).on("click", ".check1", function(){
fila = $(this);
var id_detalle = parseInt(fila.closest('tr').find('td:eq(0)').text());
opcion= 3;
$(this).attr("id","divLoop1_"+id_detalle);
console.log(id_detalle);
});
$(document).on("click", ".check2", function(){
fila = $(this);
var id_detalle = parseInt(fila.closest('tr').find('td:eq(0)').text());
opcion= 3;
$(this).attr("id","divLoop2_"+id_detalle);
console.log(id_detalle);
});
$('#tablaDetalles tbody').on( 'click', 'tr', function () {
var values = JSON.parse(localStorage.getItem('checkboxes')) || {};
var $checkboxes = $(":checkbox"); // Tomas los checkboxs
$checkboxes.on("change", function(){
$checkboxes.each(function(){
values[this.id] = this.checked;
});
localStorage.setItem("checkboxes", JSON.stringify(values));
});
$.each(values, function(key, value) {
$(key).prop('checked', value);
});
});
});