How to implement auto paging ?

In this article, we will learn how can we do auto paging in jQuery, basically in this article we will operate auto paging operation by using jQuery and PHP basically auto paging means we have multiple pages and we can change these pages by one click these clicks may be button or number of pages when we click on 1 number page so it redirects us on one column and when we another page number, so it will redirect us on another page that’s operation, will operate by auto paging. In short, we can say that auto-paging is changed the pages with one click of a button or nothing we will create in this article an auto-paging system through which we can move one page to another page with one click we don’t need to operate any other operation.

Approach: In this article, we will create auto-paging by using PHP and jQuery:

• First, we create an index.php file in the htdocs folder and open our xampp server also create a database in phpmyadmin as shown in the below images.
• After starting the xampp server and writing code for auto-paging in the PHP file we will create an index.html file we connect both files by creating one function. basically, for the phpmyadmin database, we will create the list of countries in our phpmyadmin localhost database
• After creating the list of countries we will take basically 50 country names and their first two letters as a country code and after creating the database we will start coding for the index.php file and jQuery.
• First, we will write our mysqli part in which we will give some conditions and after writing code for php file we will make our jQuery file in which we will write our jQuery code and we will call our PHP file and data by jQuery file.
• We will operate our auto-paging operations by using one click button and page numbers. 

So let’s start writing code for auto-paging. For run code, we will use these types of links:

http://localhost/folder_name/index.html

In this link after localhost wrote your folder name wrote the folder name write the HTML file name remember that when running this code or writing this way link in your browser xampp server should be started like the below image.

XAMPP server start 

Example: First we create an auto name folder in htdocs we will start our xampp and we will create an index.php file in an auto folder and start coding for the index.php file, in the index,php file we will write some conditions for our auto paging operations.

index.php

PHP

<? php
    $connection = mysqli_connect("localhost", "root", "", "countries");

    $q1 = mysqli_query($connection, "SELECT *FROM countries");
    $count = mysqli_num_rows($q1);
    $rowperpage = 11;

    $page = $_REQUEST['p'];

    if ($page == 0 or $page == '') {
        $page = 1;
    }
    $page = $page - 1;

    $p = $page * $rowperpage;

    $query = "SELECT * FROM countries limit ".$p. ", ".$rowperpage;
    $run = mysqli_query($connection, $query);

    while ($rs = mysqli_fetch_array($run)) {
        echo $rs['id'].'   ->   '.$rs['country_name']. '<br/>';
    }
    if ($_REQUEST['p'] > 1) {

        $prev_page = $_REQUEST['p'] - 1;
        echo '<span style="cursor:pointer;
        font - weight: bold; background - color: aqua;
        " onclick="LoadData('.$prev_page.')">Back</span>';
    }
    $check = $p + $rowperpage;
    if ($count > $check) {
        $next_page = $_REQUEST['p'] + 1;
        echo '<span style="cursor:pointer;
        margin - left: 30px; font - weight: bold; background - color: yellow;
        " onclick="LoadData('.$next_page.')">Next</span>';
    }
    $limit = $count / $rowperpage;
    $limit = ceil($limit);

    echo '<br ></br >';
    for ($i = 1; $i <= $limit; $i++) {
        if ($i == $_REQUEST['p']) {
            echo '<strong>'.$i. '</strong>';
        } else {
            echo '<span style="cursor:pointer;" onclick="LoadData('.$i.')">'.$i.'</span> ';
        }
    }
?>

Output:

PHP Output 

Explanation:

First, we connected our php file with localhost by using the connections variable and then we call our datable by using one variable $q1 and we using the mysqli_query  method and then we created count variable and then we are using some condition like if we come on page 0 so the back button will not work and if we present on the last page so next button will not work and then we again make one variable $query in which we call our table and we set row size 11 per page and then we make some condition like if we click on which number so it will be bold and move on next page like we set 50 names of the country as a database of our phpadmin so and created 11 countries per page by initialize one var in first and after writing code in PHP file we write code for HTML in which we write simple heading h1 tag and we simply make one function by which we call index.php file this way we implement our auto paging functionality.

Database phpmyadmin:

Database 

Database Table:

Database table

After writing code for index.php we will connect PHP file with jQuery code by creating index.html:

index.html

In the index.html file, we will write create a simple heading and we will create one function basically in which we will call our Load Data id which  we created in the index.php file and we also will show results by creating another id results and we will also show the index.php?p using page number on display screen and now we can run our code by using the following type of link:

http://localhost/folder_name/index.html

when we open these links so we can see the paging operation and we will do the paging operation on the display screen 

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://code.jquery.com/jquery-3.6.3.js"
        integrity=
"sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
            crossorigin="anonymous"></script>
</head>

<body>
    <h3><strong> Auto Paging Using jQuery </strong></h3>

    <div id="results">
        <script>

            $(document).ready(function () {
                LoadData(0);
            });

            function LoadData(pagenum) {
                $.post('index.php?p=' + pagenum, function (response) {
                    $('#results').html(response);
                });
            }
        </script>
    </div>
</body>

</html>

Output:

Auto Paging GIF