2

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);
    });
    
  });  
       
});

1 respuesta 1

2

Asigna ID desde que se crea la fila. Datatables te da la oportunidad de lograrlo con contenido personalizado de celda (columns.render)

// Ejecutar desde la carga de la página, para que sea variable global
let markedChecks = JSON.parse(localStorage.getItem('checkboxes')) || {};

    tablaDetalles = $('#tablaDetalles').DataTable({
        destroy:true,
        "ajax":{            
            "url": "bd/crud.php", 
            "method": 'POST',
            "data":{opcion:opcion, user_id:user_id},
            "dataSrc":"",
            
        },
        "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    // Crear ID para checkbox
                    let id = 'check-' + row.id;
                    // Verifica si está en localStorage y es verdadero
                    let checked = (markedChecks[id]) ? 'checked' : '';
                    // Devolver contenido de columna usando plantilla de texto
                    return `
                       <div class="text-center" form-check">
                            <input class='form-check-input check1' type='checkbox' id="${id}" ${checked}>
                       </div>
                    `;
                },
                "targets": 5 // La columna después de frecuencia
            }
        ],
        "columns":[
            {"data": "id"},
            {"data": "num_credito"},
            {"data": "monto"},
            {"data": "plazo"},
            {"data":"frecuencia"},
            {"defaultContent": ""},
            {"defaultContent": "<div class='text-center'><div class='form-check' ><input class='form-check-input check2' type='checkbox'></div></div>"}
        ]
    });

Ahora, solo falta agregar o modificar cada checkbox que reciba un clic, guardando verdadero o falso, de acuerdo a si está marcado o no:

$(#tablaDetalles tbody).on("click", ".check1", function(){
    // El checkbox ya tiene ID
    let id = $(this).attr('id');
    // Actualizar lista de checkboxes
    markedChecks[id] = $(this).prop('checked'); // Verdadero o falso
    // Guardar en localStorage
    localStorage.setItem("checkboxes", JSON.stringify(markedChecks));
});

Lecturas recomendadas:

Nota: Copiar y pegar no es una buena opción, porque hice este ejemplo sin probarlo y podría contener errores. Revisa cada opción, lee la documentación proporcionada para entenderlo bien y, solo entonces, aplícalo en tu proyecto.

1
  • Muchas gracias amigo. Pase casi una semana buscando una solucion, no tenia idea de la funcionalidad de columns.render. el 2 dic. 2020 a las 19:14

Tu Respuesta

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

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