iCheck checkbox becomes unclickable after applying pagination

Question

I am trying to create pagination for dynamic tables with data from the database. What I did was, I loaded first all the records and paginated the result. The pagination is working, however, the checkbox becomes unclickable.

I'm guessing it's because of how I stored all the trs into an array to display it.

HTML

Buttons

Table

" : "";
        ?>
        
    
        
            
                
            
             e($key['name']))); ?>
            e($key['subject'])), 0, 60, "..."); ?>
            
        
        
        
            No Messages

JS

EDIT

Based on some comments, reinitializing iCheck is the way to go. But it is still not working (at least in my current code).

For testing purposes, I tried hardcoding trs using the code below and used this to append to the tbody, and it worked. I also added the reinitialization of iCheck in this test.

for (var i = 0; i < records; i++) {
    tr[i] =
        " John DoeThis is a subject " +
        i +
        "2 hours ago";
}

So, just like my first guess, I think the problem lies in how I get all the trs and stored them in array called data, and displayed it back. Any suggestions on how should I properly get all the trs?

user_4281779 · Answer

As pointed out by the guys in the comments you've to reinitialize the icheck components after the pagination, so better to add the code below at the end of the changePage function :

$(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);
});

iCheck checkbox becomes unclickable after applying pagination

1 Answers