0

tengo una tabla Datatable en la cual hago una consulta php dentro para mostrar los campos que me interesan. Uno de ellos hace un POST por Ajax para modificar dinámicamente ese campo sin refrescar: [![Tabla][1]][1]

Esta es la consulta que hago antes del con un while

<?php
$query = mysql_query("select * from applications
LEFT JOIN u_universidades ON u_universidades.id_universidad = applications.id_university
LEFT JOIN student ON student.student_id = applications.id_student
where id_student = '$get_id'")or die(mysql_error());
$count_colleges = mysql_num_rows($query);
if ($count_colleges > 0){?>
<table class="display table table-striped" id="universidad" >

<thead>
<tr>
<th style="color:#9F0">University</th>
<th style="color:#9F0">Type</th>
<th style="color:#9F0">Appl.</th>
<th style="color:#9F0" align="center">C.A.</th>
<th style="color:#9F0">SAT</th>
<th style="color:#9F0">TOEFL</th>
<th style="color:#9F0">F.Aid</th>
<th style="color:#9F0">Status</th>
<th style="color:#9F0">Final</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_array($query)){
?>
<tr>                                    
<td style="color:#FFF"><?php echo $row['uni_nombre']; ?></td>
<td style="color:#FFF"><div class="select1" id="type-<?php echo $id_appl ?>"><?php echo $row['type']?></div></td>
<!-- class="text" lo podemos cambiar a select en caso de que sea un select -->
<!--<td style="color:#FFF"><?php echo $row['type']; ?></td>-->
<td><?php 
if ($row['application'] == 1) {?>
<button id="btn2Si" value="application-<?php echo $id_appl ?>-0" class="zmdi zmdi-check green" style="background:Transparent; border:Transparent"></button>
<?php } else if ($row['application'] == 0) {?> 
<button id="btn2No" value="application-<?php echo $id_appl ?>-1" class="zmdi zmdi-close red" style="background:Transparent; border:Transparent"></button>
<?php } ?>
</td>
<td><?php 
if ($row['commonapp'] == 1) {?>
<button id="btn2Si" value="commonapp-<?php echo $id_appl ?>-0" class="zmdi zmdi-check green" style="background:Transparent; border:Transparent"></button>
<?php } else if ($row['commonapp'] == 0) {?>    
<button id="btn2No" value="commonapp-<?php echo $id_appl ?>-1" class="zmdi zmdi-close red" style="background:Transparent; border:Transparent"></button>
<?php } ?>
</td>
<td><?php 
if ($row['sat'] == 1) {?>
<button id="bt2nSi" value="sat-<?php echo $id_appl ?>-0" class="zmdi zmdi-check green" style="background:Transparent; border:Transparent"></button>
<?php } else if ($row['sat'] == 0) {?>  
<button id="btn2No" value="sat-<?php echo $id_appl ?>-1" class="zmdi zmdi-close red" style="background:Transparent; border:Transparent"></button>
<?php } ?>
</td>
<td><?php 
if ($row['toefl'] == 1) {?>
<button id="btn2Si" value="toefl-<?php echo $id_appl ?>-0" class="zmdi zmdi-check green" style="background:Transparent; border:Transparent"></button>
<?php } else if ($row['toefl'] == 0) {?>    
<button id="btn2No" value="toefl-<?php echo $id_appl ?>-1" class="zmdi zmdi-close red" style="background:Transparent; border:Transparent"></button>
<?php } ?>
</td>
<td><?php 
if ($row['faid'] == 1) {?>
<button id="btn2Si" value="faid-<?php echo $id_appl ?>-0" class="zmdi zmdi-check green" style="background:Transparent; border:Transparent"></button>
<?php } else if ($row['faid'] == 0) {?>     
<button id="btn2No" value="faid-<?php echo $id_appl ?>-1" class="zmdi zmdi-close red" style="background:Transparent; border:Transparent"></button>
<?php } ?>
</td>
<td><?php
if ($row['status_app'] == "Accepted") {?>
<div class="select2" style="color:green" id="status_app-<?php echo $id_appl ?>"><?php echo $row['status_app']?></div>
<?php } else if ($row['status_app'] == "Denied") {?>    
<div class="select2" style="color:red" id="status_app-<?php echo $id_appl ?>"><?php echo $row['status_app']?></div>
<?php } else {?>
<div class="select2" id="status_app-<?php echo $id_appl ?>"><?php echo $row['status_app']?></div>
<?php } ?>

</td>
<td><?php 
if ($row['final'] == 1) {?>
<button id="btn6Si" value="final-<?php echo $id_appl ?>-0" class="zmdi zmdi-star zmdi-hc-lg yellow" style="background:Transparent; border:Transparent"></button>
<?php } else if ($row['final'] == 0) {?>    
<button id="btn6No" value="final-<?php echo $id_appl ?>-1" class="zmdi zmdi-star zmdi-hc-lg grey" style="background:Transparent; border:Transparent"></button>
<?php } ?>
</td>
<?php  } ?>
</tr>                                
</tbody>
</table>

El tema está en que cuando cambia el valor por AJAX no refresca la tabla y si intento modificar de nuevo el registro toma el valor original que tenía, no el valor que ha cambiado por AJAX. Me gustaría saber como refrescar de alguna manera la tabla y la consulta PHP que se hace dentro de la tabla.

JAVASCRIPT

$(document).on('click', '#btn6Si, #btn6No', function () {
var elem = $(this);
var activo = elem.text();
var className = elem.attr('class');
var id = elem.val();
var res = id.split("-");
string1 = res[1];
var url = 'colleges_save3.php';
/*e.preventDefault();*/
var request = $.ajax({
  data: {id: id},
  type: "POST",
  cache: false,
  url: url,
  dataType: "html",
  success: function(response) {
      $('#resultado').html(response);
      var table = $('#universidad').DataTable();
      //table.ajax.reload();
      table.draw(false);
    if (response == 'verdadero') {    
      if (className == 'zmdi zmdi-star zmdi-hc-lg yellow') {
          elem.removeClass('zmdi zmdi-star zmdi-hc-lg yellow').addClass('zmdi zmdi-star zmdi-hc-lg grey');
          elem.val('final-' + string1 + '-1');
      } else if (className == 'zmdi zmdi-star zmdi-hc-lg grey') {
          elem.removeClass('zmdi zmdi-star zmdi-hc-lg grey').addClass('zmdi zmdi-star zmdi-hc-lg yellow');
          elem.val('final-' + string1 + '-1');
      }
    } else if (response == 'falso'){
        alert("El estudiante ya tiene asignada una universidad final. Si deseas cambiarla desactivala y vuelve a activar la universidad final deseada.");
    }
  }
});
request.done(function(text) {
  console.log(text);


});

request.fail(function(jqXHR, textStatus) {
  alert("Error de petición: " + textStatus);
});

});

4 respuestas 4

0

No veo claramente como defines originalmente tu Datatable, como mencionas AJAX voy a asumir que haces algo como esto.

En ese caso recomendaría que utilizaras el constructor de Datatable para mostrar los botones, usando el mismo ejemplo anterior seria:

var table = $('#example').DataTable( {
    "ajax": "data/arrays.txt",
    "columnDefs" : [
        {
            "targets" : 4,  //Aqui el indice de la columna empiezan en 0
            //"data": 0,        //Si necesitas los datos de otra columna, como el id
            "render" : function ( txt, type, full) {        //En full encuentras todos los datos de la fila
                if(txt == "1"){
                    var txt = '<button id="btn6Si" value="final-'+full[0]+'-0" class="zmdi zmdi-star zmdi-hc-lg yellow" style="background:Transparent; border:Transparent"></button>';
                } else {
                    var txt = '<button id="btn6No" value="final-'+full[0]+'-1" class="zmdi zmdi-star zmdi-hc-lg grey" style="background:Transparent; border:Transparent"></button>';
                }
                return txt;
            }
        }
    ]
});

Y así como tu tabla esta definida vía el constructor cuando hagas un cambio en el backend solo tendrás que recargar el AJAX de la tabla Ajax Reload

$(document).on('click', '#btn6Si, #btn6No', function () {
        var elem = $(this);
        var activo = elem.text();
        var className = elem.attr('class');
        var id = elem.val();
        var url = 'colleges_save3.php';
        /*e.preventDefault();*/
        var request = $.ajax({
          data: {id: id},
          type: "POST",
          cache: false,
          url: url,
          dataType: "html",
          success: function(response) {
              $('#resultado').html(response);

            if (response == 'verdadero') {    
                //Todo salio bien solo hay que recargar la tabla
                table.ajax.reload();
            } else if (response == 'falso'){
                alert("El estudiante ya tiene asignada una universidad final. Si deseas cambiarla desactivala y vuelve a activar la universidad final deseada.");
                this.reset();
                $('#botones2').load();
                  /*elem.text('SAT');*/
            }

          }
        });
    });

Este enfoque tiene la ventajas de que si quieres actualizar otra columna en el futuro solo tendrás que recargar la Datatable.

4
  • He puesto una imagen de lo que tengo actualmente. El campo de la derecha es una estrella que es activo (1) o inactivo (0)... según sí le doy a btn6Si o btn6No lo activa o desactiva pero el problema está cuando le doy una vez lo hace bien... imaginemos que lo quiero desactivar... le paso 0, pero si le vuelvo a dar a la misma estrella me pasa otra vez 0 en vez de 1 para volverla a activar. Todo dentro de la tabla es con php.
    – Vieira
    Commented el 12 dic. 2018 a las 17:11
  • 1
    Ahora que lo dices de esa manera creo que el problema es que en el success cambias la clase del botón, pero no el valor. Por lo que veo var id = elem.val(); es el elemento que cambia la BD, pero aunque cambia su clase el valor es el mismo que cuando lo creaste. Prueba a usar elem.val('final-ID_AAPL-0'); . PS. No veo de donde se obtiene $id_appl
    – Joraheta
    Commented el 12 dic. 2018 a las 18:28
  • Perdona @Johareta... muy muy aproximado está el tema. Funciona lo que dices lo que pasa es que $id_appl es el ID del registro... voy a intentar hacer substr() de la variable ID que contiene ese valor y ponerlo en elem.val
    – Vieira
    Commented el 12 dic. 2018 a las 18:38
  • Solucionado con elem.val('final-' + string1 + '-0'); Lo modifico en la pregunta para que se vea lo que he hecho. He sacado de la variable id el id del registro. Muchas gracias por toda vuestra ayuda.
    – Vieira
    Commented el 13 dic. 2018 a las 9:05
0

Creo que estás planteando la consulta mal. La idea es que tu formulario no contenga ningún código php y sea mediante una consulta con jquery y ajax la que maneje todo el proceso.

Voy a poner un ejemplo para que veas todo el proceso.

Creamos un primer php con el formulario y el siguiente código:

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>    
<script src="consultar.js"></script>

<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Campo</th>   
</thead>
<tbody>
</tbody>
<button id="btn" type="submit" >Botón</button>

Creamos ahora el archivo consultar.js que mediante jquery manejará el evento click con el siguiente código:

$(document).ready(function(){       

    $("#btn").click(function(){ 

        $("#bodytable").empty();    

        var parametros = {                  
            };

         $.ajax({
                    data:  parametros,
                    url:   'cargar.php',
                    type:  'post',
                    beforeSend: function () {                        
                    },
                    success:  function (response) {                         
                        var obj = JSON.parse(response);
                        $.each(obj, function(key, value) {
                            $('#bodytable').append('<tr><td>'+value['campo']+'</td></tr>');
                        });

            },
            error: function() {
                    alert('Error occurs!');
                }

        });
    }); 
});

De esta manera llamamos a cargar.php que es la que gestionará la consulta y devolverá la información. Luego nuestra página cargar.php contendrá el siguiente código:

<?php

$dbserver = "XXXXX";
$dbuser = "XXXXX";
$password = "XXXXX";
$dbname = "XXXXXX";

$database = new mysqli($dbserver, $dbuser, $password, $dbname);

if($database->connect_errno) {
    die("No se pudo conectar a la base de datos");
  }  

        $result = $database->query( "SELECT campo FROM tabla" );

        $i=0;

        while( $row = $result->fetch_object() ) 
            {
            $rawdata[] = $row;
            }  


$myJSON = json_encode($rawdata);

echo $myJSON;

?>

Espero que te sirva de utilidad.

Un saludo!

5
  • Gracias por responder @Javier Pintor. El tema está en que no es un formulario, es una tabla digamos dinámica a la cual voy cambiando el estado de un registro (imaginemos activo --> 1 ... inactivo --> 0). Si te fijas yo he puesto un <td> y </td>. Pongo mi JAVASCRIPT para que lo veas
    – Vieira
    Commented el 12 dic. 2018 a las 11:30
  • En este caso se debería hacer de igual forma pero con algunos cambios: Defines una tabla como la siguiente: <table id="mytable" class="table table-bordred table-striped"> <thead> <th>Campo</th> </thead> <tbody> </tbody> Cada vez que sucede el evento, la borras el contenido con: $("#bodytable").empty(); Y con la consulta la vuelves a llenar con nuevas filas dentro del $.each(obj, function(key, value) { , de la siguiente manera: $('#bodytable').append('<tr><td>'+value['campo']+'</td></tr>'); Commented el 12 dic. 2018 a las 11:44
  • Corrijo mejor el código para que lo veas Commented el 12 dic. 2018 a las 11:45
  • Hola de nuevo Javier. No lo consigo. No sé si es debido a que todas las celdas td que tengo son consultas 'echo row[campo];' o a que será. Estoy mirando a ver si encuentro algún ejemplo. Te contaré en cuanto lo pueda solucionar.
    – Vieira
    Commented el 12 dic. 2018 a las 15:30
  • Sinceramente en el campo JSON ando muy perdido porque trabajo solo con consultas php... en fin.. todo está en aprender
    – Vieira
    Commented el 12 dic. 2018 a las 15:32
0

Vieira, esta un poco enredado el asunto, pero te aporto una respuesta en base a lo que veo en tu codigo. la funcion .load() requiere un parametro url para funcionar, es extraño que no este enviandote un error en la consola. podrias colocar el html de la tabla por favor.

2
  • ya lo he puesto. Gracias.
    – Vieira
    Commented el 12 dic. 2018 a las 17:56
  • intenta retirando estas dos lineas de tu codigo js this.reset(); $('#botones2').load(); el id botones2 no existe en tu html si sigue sin funcionar imprime en consola lo que trae response, me dejas saber
    – Kevdev
    Commented el 12 dic. 2018 a las 18:31
0

Yo personalmente lo que haría sería en el success un limpiado de la tabla, insertas las filas con rows.add() y luego haces un draw():

En tu success:

table.clear().draw();
table.rows.add(response);
table.draw(false);

UPDATE:

Declaras previamente tu datatables con tus columnas.

var rows = <?php print_r(json_encode($row)) ?>;
var table = $('#universidad').DataTable({
    "data": rows,
    "columns": [
        { "data": "uni_nombre" },
        { "data": "application" },
        { "data": "commonapp" },
        ...
    ]
});

y en el success (asegurate de que en la respuesta figuran todas key que quieres imprimir en las filas), solo tienes que hacer lo anterior (sin necesidad de redeclarar tu variable "table"):

table.clear().draw();
table.rows.add(response);
table.draw(false);
3
  • Me devuelve 'No data available in table'... desaparecen los datos de la tabla menos la primera fila (th)
    – Vieira
    Commented el 12 dic. 2018 a las 18:18
  • Puedes poner la declaración de tu datatables? para ver los columns principalmente.
    – cooper
    Commented el 12 dic. 2018 a las 18:27
  • No sé exáctamente a lo que te refieres... he puesto el código de la tabla arriba en la pregunta
    – Vieira
    Commented el 12 dic. 2018 a las 18:29

Tu Respuesta

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

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