website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

Load More Pagination in PHP using AJAX

Load More Pagination in PHP using AJAX

  • 214
  • 31-Mar-2022

INDEX.PHP

<!DOCTYPE html>

<html lang="en">

 

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>PHP Ajax Load More Pagination</title>

  <link rel="stylesheet" href="css/style.css">

  <!-- Latest compiled and minified CSS -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

 

  <!-- jQuery library -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>

  <div id="main" class="mt-5">

    <div class="container">

      <div class="row">

        <div class="col-md-5 center">

          <div id="table-data">

            <div class="table-responsive">

              <table id="loadData" class="table table-bordered">

                <tr>

                  <th class="text-center">ID</th>

                  <th>Abbreviation</th>

                  <th>Country Name</th>

                </tr>

              </table>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

  <script>

    $(document).ready(function() {

      // Load Data from Database with Ajax

      function loadTable(page) {

        $.ajax({

          url: "ajax-pagination.php",

          type: "POST",

          data: {

            page_no: page

          },

          success: function(data) {

            if (data) {

              $("#pagination").remove();

              $("#loadData").append(data);

            } else {

              $("#ajaxbtn").hide();

              $("#ajaxbtn").prop("disabled", true);

            }

 

          }

        });

      }

      loadTable();

      // Add Click Event on ajaxbtn

      $(document).on("click", "#ajaxbtn", function() {

        $("#ajaxbtn").html("Loading...");

        var pid = $(this).data("id");

        loadTable(pid);

      });

 

    });

  </script>

 

</body>

 

</html>

 

AJAX-PAGINATION.PHP


<?php

$conn = mysqli_connect("localhost","root","","pagination") or die("Connection failed");

$limit = 8;

if(isset($_POST['page_no'])){

  $page = $_POST['page_no'];

}else{

  $page = 0;

}

 

$sql = "SELECT * FROM countries LIMIT {$page},$limit";

$query = mysqli_query($conn,$sql) or die("Query Unsuccessful.");

 

if(mysqli_num_rows($query) > 0){

  $output = "";

  $output .= "<tbody>";

    while($row = mysqli_fetch_assoc($query)) {

      $last_id = $row["id"];

      $output .= "<tr><td align='center'>{$row["id"]}</td><td>{$row["sortname"]}</td><td>{$row["name"]} </td></tr>";

    }    

      $output .= "</tbody>

                  <tbody id='pagination'>

                    <tr>

                      <td colspan='3'>

                        <button id='ajaxbtn' data-id='{$last_id}'>Load More</button>

                      </td>

                    </tr>

                  </tbody>";

    echo $output;              

}else{

  echo "";

}

mysqli_close($conn);

?>

 

 

STYLE.CSS

body {

  font-family: arial;

  background: #b2bec3;

  padding: 0;

  margin: 0;

}

 

h1 {

  text-align: center;

  margin: 0;

}

 

.center {

  margin: 0 auto;

}

 

#table-data {

  padding: 15px;

  min-height: 500px;

}

 

#table-data th {

  background: #43b4e8;

  color: #fff;

}

 

#table-data tbody tr:nth-child(even) {

  background: #ecf0f1;

}

 

#pagination {

  text-align: center;

}

 

#pagination tr {

  background: #fff;

}

 

#ajaxbtn {

  background: #ecf0f1;

  color: #131313;

  border: 0;

  outline: 0;

  font-size: 16px;

  padding: 10px 30px;

  border-radius: 4px;

  cursor: pointer;

}

 

#ajaxbtn:disabled {

  background: #7f8c8d;

  color: #2c3e50;

  cursor: default;

}

 

#table-data tbody tr:nth-child(2n) {

  background: #43b4e82b;

}

 


Download

Atechseva
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat with Me