web design, web development, and web promotion services: Pagination Using PHP and AJAX

Pagination Using PHP and AJAX

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
}); // 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();
  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;
?>

Author : Naresh Pal
Website : http://nareshonline.com/

web design, web development, and web promotion services

Sunday, 6 August 2017

Pagination Using PHP and AJAX

Pagination Using PHP and AJAX

AJAX

Pagination Using PHP and Ajax

index.php

Styling HTML Markup with CSS:

pagination.php

Complete Code

index.php

pagination.php

No comments:

Post a Comment

Upload file using PHP

Report Abuse