我的编辑按钮在下一页不起作用（仅在第一页起作用）
Posted
技术标签:
【中文标题】我的编辑按钮在下一页不起作用（仅在第一页起作用）【英文标题】：my edit button doesnt work on the next page (only work on the first page) 【发布时间】：2017-10-17 18:41:40 【问题描述】：我的编辑和删除查询仅适用于数据表的第一页，但不适用于第二页。 我正在使用 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><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>这是用于编辑 我引用用户名，因为用户名是我的主键 这里是代码
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">×</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>【问题讨论】：
您无法将 PHP 代码添加到 Stack Fiddle。只有 HTML、JS、CSS 代码可以放在 Fiddle 上。 【参考方案1】：问题是因为这些按钮的 html 被再次呈现，并且未找到附加到这些按钮的先前事件。因此，您还需要为新元素添加事件。一种好的解决方案是使用 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>
【讨论】：
感谢您帮助我 :)) @AgamBanga ！它真的很有效，你的解释真的帮助我更多地学习编程。太感谢了。我投票给你 我想再问你一次，我使用用户名作为我的主键，之后有一个错误，因为我无法在该表单中编辑我的用户名。问题是，我怎样才能得到我的用户名的旧值，所以当我编辑数据时，查询如“update master_user set username = ((($newusername)) where username = ((($oldusername)))” ?谢谢@AgamBanga @natalieglo 你想在username 的条件下更新username 吗？
是的，可以吗？或者我应该添加一个ID？我尝试使用 phpmyadmin 并且它可以工作.. 但不是在我的程序中._。 @AgamBanga
@natalieglo 最好的方法是使用自动增量 id 作为主键并根据 id 进行更新。但它也应该与用户名一起正常工作。你能告诉我更新的php代码吗？以上是关于我的编辑按钮在下一页不起作用（仅在第一页起作用）的主要内容，如果未能解决你的问题，请参考以下文章
webview javascript将值推送到上一页不起作用