Contact me See Resume

Pagination Using PHP and AJAX - nareshonline.com

Pagination Using PHP and AJAX

Catagory : PHP and mySQLi Posted : November, 09, 2018
pagination-using-php-and-ajax-nareshonline.com

Pagination play a vital role in web page performance In this tutorial we will create a Pagination using PHP and AJAX with the help of JavaScript library jQuery . In our previous  tutorial we have created a pagination using PHP by procedural way of PHP.

AJAX

Ajax strands for Asynchronous JavaScript and XML. Ajax helps to reduce page loading time. Because Ajax reload the particular section  which need to connect and get the data from server instead of reloading the whole page.

Ajax is very use to create dynamic applications. There are many application or section in web page, there we use Ajax to improve performance of  application / webpage like : Login System, getting data from server according to user need.

Pagination Using PHP and Ajax

We have to create two file to achieve pagination using PHP and Ajax.

  • index.html
  • pagination.php

index.php

First we create Index.html. Here is the HTMK Markup :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Paginattion with Ajax</title>
</head>
<body>
  <div class="wrapper">
    <h3>Pagination using PHP & AJAX</h3>

    <div id="getPaginationData"></div>

  </div>

</body>
</html>

Basically we need only one div to show in this markup to show page records from database. We need another div to show page links to show page numbers, which we will achieve from our PHP script.

Styling HTML Markup  with CSS:

For demo purpose I using inline css in head section of HTML.

<style>
  .wrapper{
    width: 100%;
    max-width: 600px;
    background: #fcfcfc;
    margin: 0 auto;
    border: 1px solid #00f;
    text-align: center;
    font-family: arial;
  }
  span{
    text-decoration: none;
    padding: 10px;
    background: #134643;
    color: #fff;
    margin: 5px;
    display: inline-block;
    border-radius: 10px;
    cursor:pointer;
  }
  span:hover{
    background: #461797;
  }
</style>

Now we will connect JavaScript library jQuery through CDN link.  from jquery.com http://code.jquery.com/ or you can copy and paste  from snippet belew :

<script src="http://code.jquery.com/jquery-2.2.4.min.js"
 integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
 crossorigin="anonymous"></script>

Lets code the custom function using jQuery inbuilt $.ajax() function.

$(document).ready(function(){
  load_pagination();
  function load_pagination(page)
  {
    $.ajax({
      url:"function.php",
      method: "POST",
      data : {abc:page},
      success:function(data){
        $('#getPaginationData').html(data);
      }
    });
  } // end of load_pagination function

$(document).on('click', '.pagination_link', function(){
 var current_page_link = $(this).attr("id");
 // alert(page);
 load_pagination(current_page_link);
 });
}); // end of document.ready function

Now we will create second file named pagination.php

pagination.php

<?php 
// ==================== PAGINATION USING PHP AND AJAX ========================= //
// 1. database connection.
  $conn = mysqli_connect("localhost", "root", "", "pagination") or die("Connection failed: " . mysqli_connect_error());

// 2. Define how many records you want to display per page
        $records_per_page = 5;
// 3. define a local variable in which we collect all records
        $output = '';
        $page = '';

// 4. Observe on which page visitor is visiting
        if(!isset($_POST['abc'])){
          $page = 1;
        } else {
          $page = $_POST['abc'];
        }
// 5. Setting the from which records particular records will show on page
        $start = ($page-1)*$records_per_page;
// 6. Retrieve selected result on page
        $selected_record = "SELECT * FROM data LIMIT " .$start.','.$records_per_page;
        $selected_data = mysqli_query($conn, $selected_record);
$output .= "
    <table>
      <tr>
        <td> Id </td>
        <td> Alphbaets</td>
      <tr>
";
while($row = mysqli_fetch_array($selected_data)){
  $output .= "
    <tr>
        <td>".$row['id']."</td>
        <td>".$row['Alphabets']."</td>
      <tr>
  ";
}
$output .= "</table><div align='center'>";
 $page_link_query = "SELECT * FROM data";
 $link_result = mysqli_query($conn, $page_link_query);

// 7. Find the total records in table
        $total_records = mysqli_num_rows($link_result);
// 8. Calculate the total pages available
        $total_page = ceil($total_records / $records_per_page);

// 9. page links							
    for($i=1; $i<=$total_page; $i++){
      $output .= "<span class='pagination_link' id='".$i."'>".$i."</span>";
    }


echo $output;
?>

Complete Code

index.php

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Paginattion with Ajax</title>
  <style>
    .wrapper{
      width: 100%;
      max-width: 600px;
      background: #fcfcfc;
      margin: 0 auto;
      border: 1px solid #00f;
      text-align: center;
      font-family: arial;
    }
    span{
      text-decoration: none;
      padding: 10px;
      background: #134643;
      color: #fff;
      margin: 5px;
      display: inline-block;
      border-radius: 10px;
      cursor:pointer;
    }
    span:hover{
      background: #461797;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <h3>Pagination using PHP & AJAX</h3>
    <div id="getPaginationData"></div>
  </div>

<script src="http://code.jquery.com/jquery-2.2.4.min.js"
 integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
 crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  load_pagination();  //default page is page = 1
  function load_pagination(page)
  {
    $.ajax({
      url:"function.php",
      method: "POST",
      data : {abc:page},
      success:function(data){
        $('#getPaginationData').html(data);
      }
    });
  } // end of load_pagination function

  $(document).on('click', '.pagination_link', function(){
    var current_page_link = $(this).attr("id");
    // alert(page);
    load_pagination(current_page_link);
  });

}); // end of document.ready function
</script>
</body>
</html>

pagination.php

<?php 
// ==================== PAGINATION USING PHP AND AJAX ========================= //
// 1. database connection.
  $conn = mysqli_connect("localhost", "root", "", "pagination") or die("Connection failed: " . mysqli_connect_error());

// 2. Define how many records you want to display per page
        $records_per_page = 5;
// 3. define a local variable in which we collect all records
        $output = '';
        $page = '';

// 4. Observe on which page visitor is visiting
        if(!isset($_POST['abc'])){
          $page = 1;
        } else {
          $page = $_POST['abc'];
        }
// 5. Setting the from which records particular records will show on page
        $start = ($page-1)*$records_per_page;
// 6. Retrieve selected result on page
        $selected_record = "SELECT * FROM data LIMIT " .$start.','.$records_per_page;
        $selected_data = mysqli_query($conn, $selected_record);
$output .= "
    <table>
      <tr>
        <td> Id </td>
        <td> Alphbaets</td>
      <tr>
";
while($row = mysqli_fetch_array($selected_data)){
  $output .= "
    <tr>
        <td>".$row['id']."</td>
        <td>".$row['Alphabets']."</td>
      <tr>
  ";
}
$output .= "</table><div align='center'>";
 $page_link_query = "SELECT * FROM data";
 $link_result = mysqli_query($conn, $page_link_query);

// 7. Find the total records in table
        $total_records = mysqli_num_rows($link_result);
// 8. Calculate the total pages available
        $total_page = ceil($total_records / $records_per_page);

// 9. page links							
    for($i=1; $i<=$total_page; $i++){
      $output .= "<span class='pagination_link' id='".$i."'>".$i."</span>";
    }


echo $output;
?>

 

Leave a Reply

You have to agree to the comment policy.