Ajax data - Pagination

Question

I’ve been studying jquery and ajax documentation. I’m trying to understand how ajax and php requests work.

I’m trying to turn a normal pagination into ajax pagination.

More specifically as I use ajax data and work with it on the server.

The way I tried, the console is returning so:

When clicking on each of the numbers of the pagination appears the status 200 ok on the console, and the corresponding number of each link, but nothing changes on the screen is always in the contents of the first number of the pagination.

AJAX

$('.page-link').click(function (e) {
   e.preventDefault();

   var url = "unidade.php"
   var page = $(this).attr('href');

   $.ajax({
         type:"get",
         url: url,
         data: {
            currentPage: page
         },  
         success: function (response) {

           var html = $('<h1/>', {html : response}).find('#paginacao-ajax');
           $('#paginacao-ajax').html( html )    


         }
   });
})

class.crud.php

public function paginglink($query,$records_per_page)
    {

        $stmt = $this->db->prepare($query);
        $stmt->execute();

        $total_no_of_records = $stmt->rowCount();

        if($total_no_of_records > 0)
        {
            ?><ul class="pagination"><?php
            $total_no_of_pages=ceil($total_no_of_records/$records_per_page);

            $current_page=1;



            if(isset($_GET["currentPage"]))
            {
                $current_page= $_GET["currentPage"];



            }
            if($current_page!=1)
            {
                $previous =$current_page-1;
                echo "<li class='page-item'><a  class='page-link' href='1'>First</a></li>";
                echo "<li class='page-item'><a class='page-link' href='".$previous."'>Back</a></li>";

            }
            for($i=1;$i<=$total_no_of_pages;$i++)
            {
                if($i==$current_page)
                {
                    echo $current_page;
                    echo "<li class='page-item'><a  class='page-link' href='".$i."' style='color:red;'>".$i."</a></li>";
                }
                else
                {
                    echo "<li class='page-item'><a class='page-link' href='".$i."'>".$i."</a></li>";
                }
            }
            if($current_page!=$total_no_of_pages)
            {

                $next=$current_page+1;
                echo "<li class='page-item'><a class='page-link' href='".$next."'>Next</a></li>";
                echo "<li class='page-item'><a  class='page-link' href='".$total_no_of_pages."'>Last</a></li>";
            }
            ?></ul><?php
        }
    }

I appreciate help

Answer 1

What your ajax this doing is calling the page unidade.php and pass as parameter the variable currentPage, if you don’t have a call on the page unidade.php the page code class.crud.php never will be executed.