php - Jquery和Bootstrap 4 dataTable删除第2页上的行不起作用
问题描述
再会!我有一个 jquery 和 bootstrap 4 数据表,每行有一个分页和一个删除按钮,但是在第 1 页充满数据后,它将转到第 2 页。问题是第 2 页中带有删除按钮行的数据不起作用但是在第 1 页中,删除按钮完美运行..
这是我的表格代码:
<table class="table table-hover table-bordered" id="questionTable">
<thead>
<tr>
<th>No.</th>
<th>Student</th>
<th>Subject Code</th>
<th>Semester</th>
<th>SchoolYear</th>
<th>Professor</th>
<th></th>
</tr>
</thead>
<tbody>
<?php while ($row = $result -> fetch_object()): ?>
<tr>
<td><?php echo $row->Subject_Student_Taken;?></td>
<td><?php echo $row-> Student_ID;?></td>
<td><?php echo $row-> Subject_Code;?></td>
<td><?php echo $row-> Term_Name;?></td>
<td><?php echo $row-> SY_Name;?></td>
<td><?php echo $row-> Faculty_ID;?></td>
<td class="text-center">
<a class="btn btn-sm btn-outline-primary text-muted" href="SubjectTaken_edit.php?Subject_Student_Taken=<?php echo $row->Subject_Student_Taken;?>">Edit</a>
<a data-fid="<?php echo $row->Subject_Student_Taken;?>" title="Delete Faculty" data-toggle="modal" data-target="#delete_modal" class="btn btn-sm btn-outline-danger delete-faculty-btn text-muted" >Delete</a>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
这是我的删除代码:
if(!empty($_POST['delete'])) {
$id = $_POST['delete'];
$data->delete_StudentTakenHandle($id, $conn);
}
功能代码:
function delete_StudentTakenHandle($id, $conn){
$sql = "DELETE FROM subject_taken_handle WHERE Subject_Student_Taken=? ";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $id);
$stmt->execute();
}
模式代码:
<div class="modal fade" id="delete_modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Delete Confirmaiton</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="alert alert-danger" role="alert">
Are you sure you want to delete selected record?
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<input type="hidden" name="delete" id="row-id-to-delete">
<button type="submit" class="btn btn-danger" >Yes</button>
</div>
</div>
</div>
</div>
这是我的jQuery代码:
<script>
$('.delete-faculty-btn').on('click',function(){
$("#row-id-to-delete").val($(this).data('fid'));
});
</script>
解决方案
该错误很可能是由以下原因引起的:
设置 jQuery 事件时,仅显示第一页中的元素(现有)。
由于 jQuery.on 函数仅将事件附加到现有元素,因此事件不会附加到其他页面的元素。
解决方案:
您应该使用表的单击事件作为将事件附加到删除按钮的包装器。
这样,每次单击和更改页面时,都会存在删除按钮,并且 jQuery.on 函数将能够为它们附加删除事件。
您应该像这样包装您的事件附加代码:
$("#questionTable").on("click", ".delete-faculty-button", function(){
// attach your delete event here
});
在jQuery.on的文档中阅读更多内容。
推荐阅读
- robotframework - 获取元素计数未能验证文本和计数
- android - 如何使用 Fiddler 抓取使用 HTTP 连接方法的手机应用程序?
- javascript - 赛普拉斯断言文本
- android - Firebase 电话身份验证打开浏览器以在 Android 中进行重新验证
- pytorch - tensorboard中resnet的bottleneck异常显示
- java - 如何在 selenium java 中自动进行多用户登录?
- javascript - Xregexp - 允许所有语言字母和一组字符
- css - 无法将项目与 css 对齐
- java - 如何查看日志,或设置 Java 日志记录,Java 在某个时刻正在执行的操作,以及启动此操作的原因是什么?
- docker - 如何中继来自 docker 容器的出站请求以修改标头?