Datatable pagination Input Buttons just work for first page

2020-05-27 php ajax datatable

I've got a datatable that shows registers from Mysql using PHP, The table has two inputs type=button for Editing and Deleting registers (Edit and Delete), These buttons just work in the first page, If I go to next page (using pagination feature of datatable) and press "Edit" o "Delete" buttons doesn't work, It make nothing, This my main code index.php:

    <?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" /> 
            <!-- Librery for  Modals -->
           <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 />      
                <input style="float: left" type="button" class="btn btn-success" id="addNew" value="Add User">
                <br /> 
                <br />              
                <br />  
                <div class="table-responsive">  
                     <table id="Main_Table" 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>Edit</td>
                                    <td>Delete</td>                                 
                               </tr>  
                          </thead> 
                         <tbody>    

            <!-- xxx -->
<?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>
                <td><input type="button" name="Edit" value="Edit" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs edit_data" /></td>  
                <td><input type="button" name="Delete" value="Delete" id="<?php echo $row["id"]; ?>" class="btn btn-danger btn-xs delete_data" /></td>  
            </tr>
            <?php } ?>
            <!-- xxx -->            

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

            <!-- Modal Add -->
  <div id="AddModal" 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 Agregar</h4>  
                </div>  
                <div class="modal-body">  
                     <form method="post" id="agregar_form">  
                          <label>Enter Employee Name</label>  
                          <input type="text" name="name" class="form-control" />  
                          <br />  
                          <label>Enter Employee Address</label>  
                          <textarea name="address"  class="form-control"></textarea>  
                          <br />  
                          <label>Select Gender</label>  
                          <select name="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"  class="form-control" />  
                          <br />  
                          <label>Enter Age</label>  
                          <input type="text" name="age"  class="form-control" />  
                          <br /> 
                          <input type="submit" name="insert" id="insert" value="Insert" 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>

 <!-- Modal Edit -->
 <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="insert_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="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(){

    //DataTable
      $('#Main_Table').DataTable();  


        //Show Add Modal
            $("#addNew").on('click', function () {
              $('#AddModal').modal("show"); 
            }); 



//Send Data to Add
    $(document).on('submit', '#agregar_form', function(e){
        e.preventDefault();
        var data = $(this).serialize();
        $.ajax({
            url: 'insert.php',
            type: 'POST',
            data : data,
            DataType: 'json',
            success: function(data)
            {
                $('#AddModal').modal('hide');
                Reload_Table();
            },
            error: function(errorThrown)
            {
                alert(errorThrown);
            }
});
});


//Select register to Edit
      $('.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){
                    $('#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'); 

                }  
           });  
      });


        //Send data to Update
    $(document).on('submit', '#insert_form', function(e){
        e.preventDefault();
        var data = $(this).serialize();
        $.ajax({
            url: 'update.php',
            type: 'POST',
            data : data,
            success: function(data)
            {
                $('#edit_data_Modal').modal('hide');
                Reload_Table();
            },
            error: function(errorThrown)
            {
                alert(errorThrown);
            }
            });
        });




    //Delete
      $('.delete_data').click(function(){         
           var id = $(this).attr("id"); 
           $.ajax({  
                url:"delete.php",  
                method: 'POST',
                dataType: 'json',               
                data:{id:id},  
                success:function(data){ 
                        alert("Deleted: "+data);
                        Reload_Table();
                }  
           });  
      });

    //Reload Table
function Reload_Table() { location.href = 'index.php'; } 

 });



 </script>

Please, any ideas?

Answers

Related