我的编辑按钮在下一页上不起作用(仅在第一页上工作)

时间:2017-05-18 05:42:58

标签: javascript php jquery ajax datatables

我的编辑和删除查询仅适用于数据表的第一页,但不适用于第二页。 我正在使用ajax和jquery。我是新的,这是我大学的项目。谢谢你的帮助。 这是代码。



 <script>
       $(function () {
    $("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });

    </script>
    
    <script type="text/javascript">
      $(document).ready(function (){
        $(".open_modal").click(function (e){
          var m = $(this).attr("id");
          $.ajax({
            url: "user_edit.php",
            type: "GET",
            data : {username: m,},
            success: function (ajaxData){
              $("#ModalEdit").html(ajaxData);
              $("#ModalEdit").modal('show',{backdrop: 'true'});
            }
          });
        });
      });
    </script>

    <script type="text/javascript">
     $(document).ready(function (){
      $(".open_delete").click(function (e){
        var m = $(this).attr("id");
        $.ajax({
          url: "user_delete.php",
          type: "GET",
          data : {username: m,},
          success: function (ajaxData){
            $("#ModalDelete").html(ajaxData);
            $("#ModalDelete").modal('show',{backdrop: 'true'});
          }
        });
      });
    });
  </script>
&#13;
<button type="button" data-toggle="modal" data-target="#tambah" class="btn btn-info"><i class="glyphicon glyphicon-plus"></i> Tambah User</button>
            </br>
            </br>

            <?php include"alert.php"; ?>
            <table id="example1" class="table table-bordered table-striped" >
              <thead>
                <tr>
                  <th>Nomor</th>
                  <th>Username</th>
                  <th>Nama Lengkap</th>
                  <th>Password</th>
                  <th>Level</th>
                  <th>Nama Toko</th>
                  <th>Action</th>   
                </tr>
              </thead>

              <tbody>
              <?php 
              include "connection.php";
              $query_mysql = mysqli_query($connection,"SELECT username, password, level, nama_lengkap, status, nama_toko FROM master_user INNER JOIN master_toko ON master_user.id_toko = master_toko.id_toko where status='0'")or die(mysqli_error());

              $nomor = 1;
              while($data = mysqli_fetch_array($query_mysql)){
                ?>
                  <tr>
                    <td><?php echo $nomor++; ?></td>
                    <td><?php echo $data['username']; ?></td>
                    <td><?php echo $data['nama_lengkap']; ?></td>
                    <td><?php echo $data['password']; ?></td>
                    <td><?php echo $data['level']; ?></td>
                    <td><?php echo $data['nama_toko']; ?></td>
                    <td>
                      <a href="#" class='btn btn-primary open_modal' id='<?php echo $data['username']; ?>'><span class="glyphicon glyphicon-pencil" style="padding-right: 2px"></span>Edit</a> |
                      <a href="#" class='btn btn-danger open_delete' id='<?php echo $data['username']; ?>'><span class="glyphicon glyphicon-trash" style="padding-right: 2px"></span>Hapus</a>        
                    </td>
                  </tr>  <?php } ?>
                </tbody>
               
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
    
   <!-- FOR EDIT AND DELETE -->
    <div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    </div>

    <div id="ModalDelete" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    </div>
&#13;
&#13;
&#13;

这是编辑 我引用用户名,因为用户名是我的主键 这里是代码

&#13;
&#13;
    include "connection.php";
    $username = $_GET['username'];
    echo $username;
    $ambildata = mysqli_query($connection,"select * from master_user where username='$username'");
    
    while($row=  mysqli_fetch_array($ambildata)){
?>

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Edit User</h4>
        </div>
        <div class="modal-body">
            <form class="form-horizontal" action="proses_edituser.php" name="modal-popup" enctype="multipart/form-data" method="POST" id="form-edit">
           
                <div class="form-group">
                    <label class=" control-label col-md-3">Username</label>
                        <div class="col-md-9">
                            <input class="form-control" type="text" name="username" value="<?php echo $row['username']; ?>"/>
                            
                            <span class="help-block"></span>
                        </div>
                </div>
                            
                <div class="form-group">
                    <label class="col-md-3 control-label">Nama Lengkap</label>
                        <div class="col-md-9">
                       <input  class="form-control" type="text" name="nama_lengkap" value="<?php echo $row['nama_lengkap']; ?>"/>
                        <span class="help-block"></span>
                        </div>
                </div>
                            
                <div class="form-group">
                     <label class="col-md-3 control-label">Password</label>
                        <div class="col-md-9">
                        <input class="form-control" type="password" name="password" value="<?php echo $row['password']; ?>"/>
            </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-3">Level</label>
                        <div class="col-md-9">
                             <select name="level" class="form-control">
                                          <option value=''>--Select--</option>
                                          <option value='owner' <?php if ($row['level']=='owner'){echo"SELECTED";}?>>Owner</option>
                                          <option value='manajer' <?php if($row['level'] == 'manajer'){ echo "SELECTED"; } ?>>Manajer</option>
                                          <option value='bendahara' <?php if($row['level'] == 'bendahara'){ echo "SELECTED"; } ?> >Bendahara</option>
                                          <option value='administrator' <?php if($row['level'] == 'administrator'){ echo "SELECTED"; } ?>>Administrator</option>
                                      </select>
                            <span class="help-block"></span>
                        </div>
                </div>

                 <div class="form-group">
                    <label class="control-label col-md-3">Toko</label>
                    <div class="col-md-9">
                      <select name="id_toko" class="form-control">
                        <option value="">-- Pilih Toko --</option>
                        <?php
                          require "connection.php";
                          $datatoko = "SELECT * FROM master_toko ORDER BY id_toko ASC";
                          $resultsql = mysqli_query($connection, $datatoko);
                          if (mysqli_num_rows($resultsql) > 0) {
                            while ($row = mysqli_fetch_assoc($resultsql)) {
                             
                             echo "<option value='$row[id_toko]'>$row[nama_toko]</option>";

                             // $nama_toko = $row['nama_toko'];
                              //echo '<option value="'.$row['id_toko'].'">'. $nama_toko.'</option>';
                            }
                          }        
                      ?>
                    </select>
                    
                  </div>
                </div>
              
    
    
      <div class="modal-footer">
                <button type="submit" class="btn btn-success" value="Simpan"><span class="glyphicon glyphicon-floppy-saved" style="padding-right: 2px"></span>Simpan</button>
                <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-floppy-remove" style="padding-right: 2px"></span>Batal</button>                
            </div>
            </form>
    
            <?php
    }
            ?>
            </div>
        </div>
    </div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

问题是因为这些按钮的html再次呈现&amp;之前发现的事件未找到。因此,您还需要为新元素添加事件。一个好的解决方案是使用jQuery on方法将事件附加到动态元素上。使用以下代码检查

<script type="text/javascript">
      $(document).ready(function (){
        $("body").on('click', '.open_modal', function (e){
          var m = $(this).attr("id");
          $.ajax({
            url: "user_edit.php",
            type: "GET",
            data : {username: m,},
            success: function (ajaxData){
              $("#ModalEdit").html(ajaxData);
              $("#ModalEdit").modal('show',{backdrop: 'true'});
            }
          });
        });
      });
    </script>

    <script type="text/javascript">
     $(document).ready(function (){
      $("body").on('click', '.open_delete', function (e){
        var m = $(this).attr("id");
        $.ajax({
          url: "user_delete.php",
          type: "GET",
          data : {username: m,},
          success: function (ajaxData){
            $("#ModalDelete").html(ajaxData);
            $("#ModalDelete").modal('show',{backdrop: 'true'});
          }
        });
      });
    });
  </script>