【发布时间】：2021-12-10 07:59:33
【问题描述】：
我正在尝试使用数据库中的数据为动态表创建分页。我所做的是，我首先加载所有记录并对结果进行分页。分页工作正常，但复选框无法点击。
我猜这是因为我如何将所有 tr 存储到一个数组中以显示它。
HTML
按钮
<div class="btn-group float-right">
<button class="btn btn-white btn-sm btn-prev"><i class="fa fa-arrow-left"></i></button>
<button class="btn btn-white btn-sm btn-next"><i class="fa fa-arrow-right"></i></button>
</div>
表格
<table class="table table-hover table-mail">
<tbody>
<?php
if(!empty($mails)){
foreach($mails as $key) {
$isRead = ($key['isRead'] == 0) ? "unread" : "read";
$isImportant = ($key['isImportant'] == 1) ? "<span class='float-left text-warning important'><i class='fa fa-star'></i></span>" : "";
?>
<tr class="<?php echo $isRead; ?>" data-id="<?php echo $key['mailID']; ?>">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact"><a href="mail_detail.php?id=<?php echo $key['mailID']; ?>"><?php echo $isImportant; ?> <?php echo ucwords(strtolower($guiClass->e($key['name']))); ?></a></td>
<td class="mail-subject"><a href="mail_detail.php?id=<?php echo $key['mailID']; ?>"><?php echo mb_strimwidth(ucfirst($guiClass->e($key['subject'])), 0, 60, "..."); ?></a></td>
<td class="text-right mail-date"><?php echo time_passed(date(strtotime($key['created_at']))); ?></td>
</tr>
<?php }}else{ ?>
<tr>
<td class="text-center">No Messages</td>
</tr>
<?php } ?>
</tbody>
</table>
JS
<script>
$(document).ready(function(){
$(".i-checks").iCheck({
checkboxClass: "icheckbox_square-green",
radioClass: "iradio_square-green",
});
// Pagination
var current_page = 1;
var records_per_page = 10;
var records = $(".table-mail").find("tbody").find("tr").length;
var data = [];
$(".mail-box")
.find("table")
.find("tbody")
.find("tr")
.each(function () {
data.push($(this).prop("outerHTML"));
});
function prevPage() {
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage() {
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function numPages() {
return Math.ceil(records / records_per_page);
}
function changePage(page) {
var table = $(".table-mail").find("tbody");
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
table.html("");
for (
var i = (page - 1) * records_per_page;
i < page * records_per_page;
i++
) {
table.append(data[i]);
}
}
$(".btn-next").click(function () {
nextPage();
});
$(".btn-prev").click(function () {
prevPage();
});
changePage(1);
});
</script>
编辑
基于某些 cmets，重新初始化 iCheck 是可行的方法。但它仍然不起作用（至少在我当前的代码中）。
出于测试目的，我尝试使用下面的代码对 trs 进行硬编码，并将其附加到 tbody，并且它起作用了。我还在这个测试中添加了 iCheck 的重新初始化。
for (var i = 0; i < records; i++) {
tr[i] =
"<tr class='read' data-id='" +
i +
"'><td class='check-mail'><input type='checkbox' class='i-checks mail' autocomplete='off'></td><td class='mail-contact'><a href='mail_detail.php?id=1'> John Doe</a></td><td class='mail-subject'><a href='mail_detail.php?id=1'>This is a subject " +
i +
"</a></td><td class='text-right mail-date'>2 hours ago</td></tr>";
}
所以，就像我的第一个猜测一样，我认为问题在于我如何获取所有 tr 并将它们存储在称为数据的数组中，然后将其显示回来。 关于如何正确获得所有 tr 的任何建议？
【问题讨论】：
-
您好，您尝试过先初始化它们吗？或者在填充表格后，您需要重新初始化它们，因为 icheck 可能已被破坏。
-
我认为这是因为原始复选框在分页过程中被破坏并且您丢失了所有事件侦听器。这通常可以通过父级上的事件委托来防止，但是由于您使用插件对其进行初始化，因此最好在每次分页后调用
$(".i-checks").iCheck()。 -
我添加了重新初始化，但仍然无法正常工作。我想这是因为我如何获取所有 trs 并将它们存储在数组中。寻找我的编辑
标签： javascript php jquery pagination icheck