Clickable row only works on the first page of pagination in datatables

• Tech Area
• April 24, 2023

I have a page that displays records in bootstrap datatables. The records are displayed 10 rows per page and each row has image on the one column. What I want to do is, when I clicks on the image, it will show in bigger size or zoom. I already implemented this but unfortunately it only works on the first page of pagination. When I go to second page and click on the table row, the image is not clickable.

Solution

<td> <a href="javaScript:void(0);" data-image-path="data:image/gif;base64,<?php echo  $data; ?>" class="showImagePop"><?php echo '<div class="ImagePop"><img src="data:image/gif;base64,' . $data . '" width="100" height="100" /></div>'; ?></a></td>

<div class="show">
      <div class="overlay"></div>
      <div class="img-show">
      <img src="">
      </div>
</div>

<script type="text/javascript">
    $(function () {
        
        $("#dataTable").on("click", ".showImagePop", function () {
            var $src = $(this).data("image-path");
            $(".show").fadeIn();
            $(".img-show img").attr("src", $src);
            });

        $("span, .overlay").click(function () {
            $(".show").fadeOut();
        });

    });
</script>