PHP MySQL Ajax Pagination Example Tutorial

Apr 09, 2022 . Admin



Hello dev,

I am going to explain you How to use ajax pagination Example. You will learn How to use ajax pagination in php

This article will give you simple example of ajax pagination php mysql Code. We will use to get simple How To Use ajax pagination in PHP & MySQL.

I will give you simple Example of How to use ajax pagination in PHP using Ajax.

So, let's see bellow solution:

index.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title></title>
</head>
<body>
<div class="container">
  <div class="card mt-5">
    <div class="card-header">
        <center>
            <h3>PHP Mysql Ajax Pagination Example</h3>
        </center>
    </div>
    <div class="card-body">
       <div id="sampleTable">
         
       </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    function lodetable(page){
          $.ajax({
            url : 'table.php',
            type : 'POST',
            data : {page_no:page},
            success : function(data) {
              $('#sampleTable').html(data);
            }
          });
      }
      lodetable();

    $(document).on("click","#pagenation a",function(e) {
        e.preventDefault();
        var page_id = $(this).attr("id");
        lodetable(page_id);
    });


  });
</script>

</body>
</html>
table.php
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style type="text/css">
      
       #pagenation a{
            color: #fff;
       }
       #pagenation{
        text-align: center;
        margin-top: 5%;
       } 
       .button-style{
        border-radius: 20px;
       }
       .link{
        border-radius: 100px !important;
       }

    </style>
</head>
<body>

      <?php 
        $conn=mysqli_connect('localhost','root','root','page');
        $limit_per_page = 5;
        $page = isset($_POST['page_no']) ? $_POST['page_no'] : 1;

        $offset = ($page - 1) * $limit_per_page;
        $query="SELECT * FROM page LIMIT {$offset},{$limit_per_page}";
        $result=mysqli_query($conn,$query);
       ?>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Email</th>
                </tr>
            </thead>
            <tbody>
                <?php while ($row = mysqli_fetch_assoc($result)) { ?>
                    <tr>
                        <th scope="row"><?php echo $row['id']; ?></th>
                        <td><?php echo $row['name']; ?></td>
                        <td><?php echo $row['email']; ?></td>
                    </tr>
                <?php } ?>
            </tbody>
        </table>
          <?php 
            $sql_total = "SELECT * FROM page";
            $record = mysqli_query($conn,$sql_total);
            $total_record = mysqli_num_rows($record);
            $total_pages = ceil($total_record/$limit_per_page);
           ?>
        <div class="pagenation" id="pagenation">

            <?php if($page > 1){ ?>

            <a href="" id="<?php echo $page-1;?>" class="button-style btn btn-success">Previous</a>                    

            <?php } ?>

            <?php for ($i=1; $i <= $total_pages; $i++) { ?>
                <a id="<?php echo $i ?>" href="" class="link btn btn-primary"><?php echo $i ?></a>
            <?php } ?>

            <?php if($page != $total_pages){ ?>

            <a href="" id="<?php echo $page+1; ?>" class="button-style btn btn-success">Next</a> 

            <?php } ?>
          
        </div> 

</body>
</html>
Output:

It will help you...
#PHP