应用分页后 iCheck 复选框变得不可点击

Question

我正在尝试使用数据库中的数据为动态表创建分页。我所做的是，我首先加载所有记录并对结果进行分页。分页正常，但是复选框变得不可点击。

我猜这是因为我如何将所有 trs 存储到一个数组中以显示它。

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

<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; ?>&nbsp;<?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>

编辑

根据一些评论，重新初始化 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'>&nbsp;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>";
}

所以，就像我的第一个猜测一样，我认为问题在于我如何获取所有 trs 并将它们存储在称为数据的数组中，然后将其显示回来。关于如何正确获取所有 trs 的任何建议？

Answer 1

正如大家在评论中指出的那样，您必须在分页后重新初始化 icheck 组件，因此最好在 changePage 函数的末尾添加以下代码：

$(document).ready(function() {
  // 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]);
    }

    $(".i-checks").iCheck({
      checkboxClass: "icheckbox_square-green",
      radioClass: "iradio_square-green",
    });

  }

  $(".btn-next").click(function() {
    nextPage();
  });

  $(".btn-prev").click(function() {
    prevPage();
  });

  changePage(1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/icheck.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/skins/all.min.css" rel="stylesheet" />
<div class="mail-box">
  <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>
      <tr class="read" data-id="1">
        <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">PAGE 1</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 1</a></td>
        <td class="text-right mail-date">PAGE 1</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 1</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 1</a></td>
        <td class="text-right mail-date">PAGE 1</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 1</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 1</a></td>
        <td class="text-right mail-date">PAGE 1</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 1</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 1</a></td>
        <td class="text-right mail-date">PAGE 1</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 1</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 1</a></td>
        <td class="text-right mail-date">PAGE 1</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 1</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 1</a></td>
        <td class="text-right mail-date">PAGE 1</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 1</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 1</a></td>
        <td class="text-right mail-date">PAGE 1</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 1</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 1</a></td>
        <td class="text-right mail-date">PAGE 1</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 1</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 1</a></td>
        <td class="text-right mail-date">PAGE 1</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 1</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 1</a></td>
        <td class="text-right mail-date">PAGE 1</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
      <tr class="read" data-id="1">
        <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">PAGE 2</a></td>
        <td class="mail-subject"><a href="mail_detail.php?id=2">PAGE 2</a></td>
        <td class="text-right mail-date">PAGE 2</td>
      </tr>
    </tbody>
  </table>
</div>

应用分页后 iCheck 复选框变得不可点击

iCheck checkbox becomes unclickable after applying pagination

javascript

php

jquery

pagination

icheck