我的编辑和删除查询仅适用于数据表的第一页，但不适用于第二页。 我正在使用 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>最佳答案
问题是因为这些按钮的 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>
关于javascript - 我的编辑按钮在下一页不起作用(仅在第一页起作用)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44039469/