Actualizar Datatable después de AJAX Success

publicado por: Anonymous

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

});

solución

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.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *