使用 PHP 和 Ajax 创建动态表以将数据插入表中，如果不在视图或第一页中，则无法使用按钮
Posted
技术标签:
【中文标题】使用 PHP 和 Ajax 创建动态表以将数据插入表中，如果不在视图或第一页中，则无法使用按钮【英文标题】：Creating Dynamic Table using PHP and Ajax to insert data into table, unable to use buttons if not within view or first page 【发布时间】：2021-03-31 06:07:45 【问题描述】：让我们直奔主题：
我使用数据库中的动态数据创建了一个数据表。我使用 php 调用数据并将其插入到表中。
<?php
$getAttendance = $functions->runSQL("dynamic data sql query ");
$getAttendance->execute();
$attendance = $getAttendance->fetchAll(PDO::FETCH_ASSOC);
foreach ($attendance as $key => $data)
$getEmployeeName = $functions->runSQL("another sql query to call firstname and last name");
$getEmployeeName->execute() ;
$employeeName = $getEmployeeName->fetchAll(PDO::FETCH_ASSOC);
foreach ($employeeName as $key => $name)
?>
<tr>
<td><?= $data['date']; ?></td>
<td><?= $data['employee_id']; ?></td>
<td><?= $name['firstname'] . " " . $name['lastname']; ?></td>
<td><?= $data['clock_in']; ?></td>
<td><?= $data['clock_out']; ?></td>
<td>
<button class="btn btn-warning editAttendance" id="editAttendance-<?= $data['id']; ?>" data-id="<?= $data['id']; ?>"><i class="fa fa-edit"></i> EDIT</button>
<button class="btn btn-danger deleteAttendance" id="deleteAttendance-<?= $data['id']; ?>" data-id="<?= $data['id']; ?>"><i class="fa fa-trash"></i> DELETE</button>
</td>
</tr>
<?php
?>该表的工作方式与我预期的完全一样，可以输出和显示。虽然编辑和删除按钮仅在第一页上有效，但在用户显示第二页和之后的任何页面后，“工具”按钮将不存在。
GIF Displaying Page 2 edit/delete not working
正如您在上面的 GIF 中看到的那样，编辑和删除功能可以正常工作，直到加载分页的第二页。
这适用于我所有的桌子。如果表格不完全可见，按钮（编辑/删除）也不起作用。我不确定它是按钮与表格交互的方式还是与sweetalert 交互的方式。
不可见 Not Visible
可见但无法使用 sweetalert 和 ajax 编辑或删除调用或与之交互（两者都如第一个 GIF 所示） Visible
<script>
$(document).ready(function(e)
$('[id^=editAttendance]').on('click', function(e)
e.preventDefault();
var id = $(this).data('id');
swal.showLoading();
$.ajax(
type: "POST",
url: "<?= $site->baseURL; ?>/",
dataType: "json",
data: id: id,
success: function(response)
Swal.fire(
title: "<div style='color:orange;'>Update Attendance</div>",
html: "<div><label>Date</label> <input class='form-control' type='date' value='" + response[0]['date'] + "' id='attendanceDate' placeholder=" + response[0]['date'] + " /></div><br />" +
"<div><label>Clock In</label> <input class='form-control' id='attendanceClockIn' type='time' value='" + response[0]['clock_in'] + "' placeholder='" + response[0]['clock_in'] + "' /></div><br />" +
"<div><label>Clock Out</label> <input class='form-control' id='attendanceClockOut' type='time' value='" + response[0]['clock_out'] + "' placeholder='" + response[0]['clock_out'] + "' /></div><br />",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'YES, EDIT IT!',
cancelButtonText: 'CANCEL'
).then((result) =>
if (result.isConfirmed)
var attendanceDate = $('#attendanceDate').val();
var attendanceClockIn = $('#attendanceClockIn').val();
var attendanceClockOut = $('#attendanceClockOut').val();
if ( attendanceDate == "" || attendanceClockIn == "" || attendanceClockOut == "")
Swal.fire(
icon: 'error',
text: 'please enter a value in either inputs'
);
else
Swal.fire(
title: "<div style='color:red;'>Are You Sure ?</div>",
icon: 'question',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'YES!',
cancelButtonText: 'CLOSE'
).then((result) =>
if (result.isConfirmed)
$.ajax(
type: "POST",
url: "<?= $site->baseURL; ?>/",
dataType: "json",
data:
id:id,
dates: attendanceDate,
clockIn: attendanceClockIn,
clockOut: attendanceClockOut
,
success: function(data)
Swal.fire(
icon: data.success,
title: 'Attendance Edited!',
confirmButtonColor: '#28a745',
confirmButtonText: 'CLOSE!',
text: 'Click CLOSE to continue.',
).then((result) =>
if (result.isConfirmed)
location.reload();
);
,
error: function(data)
console.log(data);
);
);
);
,
error: function (response)
swal.fire(
"Internal Error",
"Oops, Something Happened, contact webmaster", // had a missing comma
"error"
);
);
);
$('[id^=deleteAttendance]').on('click', function(e)
e.preventDefault();
var id = $(this).data('id');
$.ajax(
type: "POST",
url: "<?= $site->baseURL; ?>/",
dataType: "json",
data: id:id ,
success: function(data)
Swal.fire(
title: "<div style='color:red;'>Delete Attendance</div>",
icon: 'question',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'YES!',
cancelButtonText: 'CLOSE',
html: "<strong>You are about to remove <h4 style='color:red;'>" + data[0]['employee_id'] + " :: " + data[0]['date'] + " : " + data[0]['clock_in'] + "</h4></strong>"
).then((result) =>
if (result.isConfirmed)
$.ajax(
type: "POST",
url: "<?= $site->baseURL; ?>/",
dataType: "json",
data: id: id,
success: function(data)
Swal.fire(
icon: data.success,
title: 'Attendance Deleted!',
confirmButtonColor: '#28a745',
confirmButtonText: 'CLOSE!',
text: 'Click CLOSE to continue.'
).then((result) =>
if (result.isConfirmed)
location.reload();
);
,
error: function(data)
swal.fire(
"Internal Error",
"Oops, Something Happened, contact webmaster.", // had a missing comma
"error"
);
);
);
,
error: function(data)
console.log(data);
);
);
$('#add-new-attendance').on('click', function(e)
e.preventDefault();
Swal.fire(
title: "<div style='color:green;'>Add Attendance</div>",
html: "<div><label>Employee ID</label> <input class='form-control' type='text' id='attendanceEmployeeID' placeholder='EG: FSJXXXX' required autofocus /></div><br />" +
"<div><label>Date</label> <input class='form-control' id='attendanceDate' type='date' placeholder='100' required /></div><br />" +
"<div><label>Clock In</label> <input class='form-control' id='attendanceClockIn' type='time' placeholder='100' required /></div><br />" +
"<div><label>Clock Out</label> <input class='form-control' id='attendanceClockOut' type='time' placeholder='100' required /></div><br />",
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'YES, ADD IT!',
cancelButtonText: 'CANCEL'
).then((result) =>
if (result.isConfirmed)
var description = $('#deductionDescription').val();
var amount = $('#deductionAmount').val();
if (description == "" || amount == "")
Swal.fire(
icon: 'error',
text: 'please enter a value in either inputs'
);
else
$.ajax(
type: "POST",
url: "<?= $site->baseURL; ?>/",
dataType: "json",
data:
description: description,
amount: amount
,
success: function(data)
Swal.fire(
icon: data.success,
title: 'Deduction Added!',
confirmButtonColor: '#28a745',
confirmButtonText: 'CLOSE!',
text: 'Click CLOSE to continue.',
).then((result) =>
if (result.isConfirmed)
location.reload();
);
,
error: function(data)
console.log(data);
);
);
);
);
</script>还有其他人在使用 datatables js 时遇到这个问题吗？ 这是数据表中的故障还是我这边的错误，因为没有包含任何处理下一页的内容或按钮不可见？
我尝试过的： - 重新设计整个表格（没用） - 更改了所有 jquery 和 ajax 调用（简化但仍然无效）
什么有效： - 显示没有分页的完整表格似乎可以解决这个问题。尽管加载 100 个页面并将它们显示在一个页面中是不明智的（不能用作修复）。
感谢您花时间阅读并帮助我评估情况，因为这是第一次发生这种情况。数据表以前从未发生过。
【问题讨论】：
可能与jquery点击事件绑定有关。可以分享一下你的 JS 代码吗？ 页面+1的元素没有加载到DOM中，所以你在$(document).ready()里面写的内容不适用于接下来的页面。我建议使用这里描述的delegate 方式***.com/a/1207393/6248542
@HamzaAbdaoui 啊，我明白你的意思了。我使用了不同的方法（标记答案），因为我仍然是为该页面上的其他功能准备好的文档。无法删除它，但用户找到了解决方法
这就是我的意思，这就是delegate 函数。很高兴你解决了这个问题，祝你编码好运：D
【参考方案1】：
您应该用选择器过滤的主体上的单击侦听器替换每个 jQuery 单击事件侦听器。
代替：
$('[id^=editAttendance]').on('click', function(e) ...);
试试：
$('body').on('click', '[id^=editAttendance]', function(e) ...);
这样，它也适用于在页面初始呈现后附加到 DOM 的按钮。
请参阅此处查看文档：https://api.jquery.com/on/
【讨论】：
以上是关于使用 PHP 和 Ajax 创建动态表以将数据插入表中，如果不在视图或第一页中，则无法使用按钮的主要内容，如果未能解决你的问题，请参考以下文章
拆分表以将经常访问的数据与很少访问的数据分开是不是有任何意义？
如何使用 php jquery ajax 上传文件和插入数据