PHP OO-Ajax分页

Question

the code below is doing a normal pagination. I would like directions for how to turn into pagination with Ajax. My head is still confused by being using PHP OO

how do I work with ajax in the pagination link? ".$self."?page_no=".$next."

The code below is at the end of the table

index.php

<?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
        }
    }

I do not know exactly how to fill ajax in the header

<script>
function () {  $.ajax({
    url: url,
    type: "GET",
    data:  ,
    success: ,
    error:              
   });
}
</script>

---UPDATE---

I'm learning how ajax works, with help I've already been able to evolve

I have two bootstrap columns, the left a registration form and the right the list of what has already been registered and which contains the pagination. When I click on the pagination page (I put the id in the table tag in the <table #content-of-table> tag) the whole page is duplicated inside, then the pagination is working but the entire screen content is appearing in the table tag.

I took the url from href and put in data-href

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

Jquery

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

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

   $.ajax({
         url: url,

         success: function (response) {
              $('#content-of-page').html(response)
         }
   });
})

Answer 1

Where to begin.

Strictly speaking, this has little to do with OOP in itself, and it is only deceptively hard.

What ajax is usually used for is to allow the client side of things to interact with the server side, which "normally", once the page is rendered client-side, it could not.

In practice this mostly boils down to being able, by using ajax, to access resources such as a database to then update page contents without the need for a page refresh, as you know.

Let us have a bit of php:

<?php
//file somephpfile.php
$somevalueyouwillget = $_POST["somevaryouwanttopass"];

echo $somevalueyouwillget;
?>

and some html:

<!-- since we use it below, your include of jquery - but if you do it with js it is not necessary -->
<div id="somepage">
    Some text that was rendered normally on landing.
    <div id="thecontentsIwanttoupdatewithajax">
        Some contents rendered on landing.
    </div>
    <button onclick="updateallthethings();">A button that updates stuff</button>
</div>

and finally what makes it all work, a bit of javascript or jquery. I myself like to use $.post (just an example, you should handle success, failure and so on):

function updateallthethings() {
    $.post('somephpfile.php', { somevaryouwanttopass: 'duuuude', orsomearrayinstead: { varone : valone, vartwo: valtwo } }, function(out) {
        console.log(out);  //debugging saves millions of lives every year
       //"out" is ANYTHING that was rendered on the php side of things.
       //for our example we use that to update the contents of our div - in your case, to replace page 1 with page 2.
        $("#thecontentsIwanttoupdatewithajax").html(out);
    });
}

The result of which will be

<div id="thecontentsIwanttoupdatewithajax">
    duuuude
</div>

This is it in a nutshell. Does it make sense ?