0

tengo una tabla que lleno mediante un query de PHP en Mysql, estoy usando Datatable con paginacion, en la tabla inserte botones para "Editar" y "Borrar" los registros, estos botones son Input tipo Button, en la primera pagina del la tabla funcionan bien los botones "Editar" y "Borrar", pero si voy a la siguiente pagina de la paginacion y pulso los botones "Editar" y "Borrar" no hacen nada, mediante php esta es la forma como añado los celdas con registros de mysql y los botones:

<!--Llenar tabla con registros de Mysql -->
    <?php
          include("conexiondb.php");
          $query ="SELECT * FROM tbl_employee";
          $sql = mysqli_query($connect,$query);
          while($row = mysqli_fetch_array($sql))
          {

    ?>
    <tr>
        <td><?php echo $row["id"];?></td>
        <td><?php echo $row["name"];?></td>
        <td><?php echo $row["address"];?></td>
        <td><?php echo $row["gender"];?></td>                                                               
        <td><?php echo $row["designation"];?></td>
        <td><?php echo $row["age"];?></td>
        <!-- Boton Editar va a funcion ajax para borrar</td>-->
        <td><input type="button" name="Edit" value="Editar" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs edit_data" /></td>  
        <!-- Boton Borrar va a funcion ajax para borrar</td>-->
        <td><input type="button" name="Borrar" value="Borrar" id="<?php echo $row["id"]; ?>" class="btn btn-danger btn-xs borrar_data" /></td>  

    </tr>
    <?php } ?>
    <!-- xxx -->

Este es el programa pincipal completo index.php:

 <!DOCTYPE html>  
 <html>  
      <head>

           <title>Webslesson Tutorial | Datatables Jquery Plugin with Php MySql and Bootstrap</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
           <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>            
           <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> 
            <!-- Libreria para Modales -->
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>             
      </head>  
      <body>  
           <br /><br />  
           <div class="container">  
                <h3 align="center">Datatables Jquery Plugin with Php MySql and Bootstrap</h3>  
                <br />      
                <br />  
                <div class="table-responsive">  
                     <table id="tabla" class="table table-striped table-bordered">  
                          <thead>  
                               <tr>  
                                    <td>ID</td> 
                                    <td>Name</td>  
                                    <td>Address</td>  
                                    <td>Gender</td>  
                                    <td>Designation</td>  
                                    <td>Age</td>  
                                    <td>Editar</td>
                                    <td>Borrar</td>                                 
                               </tr>  
                          </thead> 
                         <tbody>    


            <!--Llenar tabla con registros de Mysql -->
            <?php
                  include("conexiondb.php");
                  $query ="SELECT * FROM tbl_employee";
                  $sql = mysqli_query($connect,$query);
                  while($row = mysqli_fetch_array($sql))
                  {

            ?>
            <tr>
                <td><?php echo $row["id"];?></td>
                <td><?php echo $row["name"];?></td>
                <td><?php echo $row["address"];?></td>
                <td><?php echo $row["gender"];?></td>                                                               
                <td><?php echo $row["designation"];?></td>
                <td><?php echo $row["age"];?></td>
                <!-- Boton Editar va a funcion ajax para borrar</td>-->
                <td><input type="button" name="Edit" value="Editar" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs edit_data" /></td>  
                <!-- Boton Borrar va a funcion ajax para borrar</td>-->
                <td><input type="button" name="Borrar" value="Borrar" id="<?php echo $row["id"]; ?>" class="btn btn-danger btn-xs borrar_data" /></td>  

            </tr>
            <?php } ?>
            <!-- xxx -->            

                        </tbody>
                     </table>  
                </div>  
           </div>  


 <!-- Modal Editar -->
 <div id="edit_data_Modal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal Editar</h4>  
                </div>  
                <div class="modal-body">  
                     <form method="post" id="edit_form">  
                          <label>Enter Employee Name</label>  
                          <input type="text" name="name" id="name" class="form-control" />  
                          <br />  
                          <label>Enter Employee Address</label>  
                          <textarea name="address" id="address" class="form-control"></textarea>  
                          <br />  
                          <label>Select Gender</label>  
                          <select name="gender" id="gender" class="form-control">  
                               <option value="Male">Male</option>  
                               <option value="Female">Female</option>  
                          </select>   
                          <br />  
                          <label>Enter Designation</label>  
                          <input type="text" name="designation" id="designation" class="form-control" />  
                          <br />  
                          <label>Enter Age</label>  
                          <input type="text" name="age" id="age" class="form-control" />  
                          <br /> 
                          <label>Employee Id</label>
                          <input type="text" name="employee_id" id="employee_id" class="form-control" /> 
                          <br />
                          <input type="text" name="key" id="key" class="form-control" />  
                          <br />                          
                          <input type="submit" name="update" id="update" value="Update" class="btn btn-success" />  
                     </form>  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

           </body>  
 </html>       

 <script>  
 $(document).ready(function(){

    //Funcion DataTable
      $('#tabla').DataTable();  


//Seleccianar campo a Editar
      $('.edit_data').click(function(){ 
           var employee_id = $(this).attr("id");

           $.ajax({                    
                url:"fetch.php",  
                method: 'POST',
                dataType: 'json',               
                data:{employee_id:employee_id},  
                success:function(data){
                    $('#key').val('editar');
                    $('#employee_id').val(data.employee_id);
                    $('#name').val(data.name);                  
                     $('#address').val(data.address);  
                     $('#gender').val(data.gender);  
                     $('#designation').val(data.designation);  
                     $('#age').val(data.age);  
                     $('#update').val("Update"); 
                     $('.modal-title').text('Actualizar Usuario');                   
                     $('#edit_data_Modal').modal('show'); 

                }  
           });  
      });


        //Actualizar Pasar variables Form Serialmente Para Actualizar
    $(document).on('submit', '#edit_form', function(e){
        e.preventDefault();
        var data = $(this).serialize();
        $.ajax({
            url: 'procesar.php',
            type: 'POST',
            data : data,
            success: function(data)
            {
                $('#edit_data_Modal').modal('hide');
                Recargar_Tabla();
            },
            error: function(errorThrown)
            {
                alert(errorThrown);
            }
            });
        });



    //Borrar
      $('.borrar_data').click(function(){         
      alert("Borrar");
           var id = $(this).attr("id"); 
            alert(id);
           $.ajax({  
                url:"procesar.php",  
                method: 'POST',
                dataType: 'json',               
                data:{id:id,key:"delete"},  
                success:function(data){ 
                        alert("Borrado: "+data);
                        Recargar_Tabla();
                }  
           });  
      });

    //Recargar Index
function Recargar_Tabla() { location.href = 'index.php'; } 

 });


 </script> 

Por favor alguien me puede ayudar para ver que estoy haciendo mal? gracias

1 respuesta 1

0

No estás haciendo nada mal.

Lo que ocurre es que jQuery "enlaza" eventos a los distintos elementos del DOM cuando se carga la página. Sin embargo, cuando esto sucede tus iconos de borrar/editar no se encuentran en el DOM, sino que se crean cuando se acciona el paginado, por lo que los eventos del principio no están enlazados con estos "nuevos botones".

Para arreglarlo se me ocurren dos opciones:

  1. En lugar de utilizar el método click, utiliza el método on:

     $(document).on('click','.edit_data',function(){
         ...
     });
    
     $(document).on('click','.borrar_data',function(){
         ...
     });
    
  2. Utiliza el método fnDrawCallback de Datatables:

     $('#tabla').dataTable({
         "fnDrawCallback":function(oSettings){
             console.log('bla bla bla');
         }
     });
    

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.