Paging with ajax

Question

I have a normal paging code, it is working properly, but I am not able to insert ajax in paging.

Actually as I’m using functions, I don’t know how to call the function "paginglink" in the AJAX url

Another point is that the code has $self = $_SERVER['PHP_SELF']; that returns the current url, as I replace the variable $self page links when using Ajax?

<?php
        $query = "SELECT * FROM users ORDER BY id DESC";       
        $records_per_page=7;
        $newquery = $crud->paging($query,$records_per_page);
        $crud->dataview($newquery);
     ?>
    <tr>
        <td colspan="7" align="center">
            <nav aria-label="Page navigation example">
            <?php $crud->paginglink($query,$records_per_page); ?>
            </nav>
        </td>
    </tr>

class.crud.php

public function paginglink($query,$records_per_page)
    {

        $self = $_SERVER['PHP_SELF'];

        $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["page_no"]))
            {
                $current_page=$_GET["page_no"];
            }
            if($current_page!=1)
            {
                $previous =$current_page-1;
                echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=1'>First</a></li>";
                echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=".$previous."'>Back</a></li>";

            }
            for($i=1;$i<=$total_no_of_pages;$i++)
            {
                if($i==$current_page)
                {
                    echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=".$i."' style='color:red;'>".$i."</a></li>";
                }
                else
                {
                    echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=".$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='".$self."?page_no=".$next."'>Next</a></li>";
                echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=".$total_no_of_pages."'>Last</a></li>";
            }
            ?></ul><?php
        }
    }

Ajax:

<script>
             $.ajax({  
                    url:"???",  
                    method:"POST",  
                    data:,  
                    success: ;  
                    }  
               }) 
    </script>

Answer 1

If you want to make the pagination via ajax, I suggest a small edition in your code.

In the section where you place the link with the url number on href, I’d put in a data-href and take this value via Javascript.

Example:

"<a href='#' class='page-link' data-href='".$self."?page_no=".$previous."'>Back</a>";

Now, instead of making the request normally by clicking on the link with href, you could add a jQuery function, to make the ajax request to the url that is on data-href. For example:

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

   var url = $(this).data('href');

   $.ajax({
         url: url,

         success: function (response) {
              $('#conteudo-da-paginacao').html(response)
         }
   });
})

updating

The author of the question asked me about the content load the same page, and therefore he needs to load only the div, and not all the content.

You can use the function load jQuery. With it it is possible to load only a specific element of a given page. See:

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

   var url = $(this).data('href');

   $( "#conteudo-da-pagina" ).load( url + " #conteudo-da-pagina" );

})

Documentation of load