Simple PHP Pagination with AJAX

<?php 
require_once('load.php');

if( isset( $_POST ) ){
 $response = '';
 
    if( isset( $_POST['page'] ) ){
        $page = $_POST['page'];
        $cur_page = $page;
        $page -= 1;
        $per_page = 20;
        $previous_btn = true;
        $next_btn = true;
        $first_btn = true;
        $last_btn = true;
        $start = $page * $per_page;
        
        $all_blog_posts = DB::db_get_results("
            SELECT * FROM item ORDER BY id DESC LIMIT %d, %d", array( $start, $per_page ) );
        
        $count = DB::db_get_var("
            SELECT COUNT(id) FROM item", array() );
        
        foreach( $all_blog_posts as $key => $post ){ 
            $response .= '
            <div class = "col-md-12">       
                <h3>' . $post->iname . '</h3>
                <p>Item ID: ' . $post->id . '</p>
                <p>Date Entered:  ' . $post->entry . '</p>
            </div>';
            
  }
        
        $no_of_paginations = ceil( $count / $per_page );

        if($cur_page >= 7){
            $start_loop = $cur_page - 3;
            if( $no_of_paginations > $cur_page + 3 )
                $end_loop = $cur_page + 3;
            else if( $cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6 ){
                $start_loop = $no_of_paginations - 6;
                $end_loop = $no_of_paginations;
            } else {
                $end_loop = $no_of_paginations;
            }
        } else {
            $start_loop = 1;
            if( $no_of_paginations > 7 ){
                $end_loop = 7;
            } else {
                $end_loop = $no_of_paginations;
   }
        }
        
        $response .= "
  <div class='pagination'>
   <ul>";

    if( $first_btn && $cur_page > 1 ){
     $response .= "<li p='1' class='active'>First</li>";
    } else if($first_btn){
     $response .= "<li p='1' class='inactive'>First</li>";
    }

    if( $previous_btn && $cur_page > 1 ){
     $pre = $cur_page - 1;
     $response .= "<li p='" . $pre . "' class='active'>Previous</li>";
    } else if( $previous_btn ){
     $response .= "<li class='inactive'>Previous</li>";
    }
    
    for ($i = $start_loop; $i <= $end_loop; $i++ ){
     if($cur_page == $i){
      $response .= "<li p='" . $i . "' class = 'selected' >" . $i . "</li>";
     } else {
      $response .= "<li p='" . $i . "' class='active'>" . $i . "</li>";
     }
    }
    
    if( $next_btn && $cur_page < $no_of_paginations ){
     $nex = $cur_page + 1;
     $response .= "<li p='" . $nex . "' class='active'>Next</li>";
    } else if( $next_btn ){
     $response .= "<li class='inactive'>Next</li>";
    }

    if( $last_btn && $cur_page < $no_of_paginations ){
     $response .= "<li p='" . $no_of_paginations . "' class='active'>Last</li>";
    } else if($last_btn){
     $response .= "<li p='" . $no_of_paginations . "' class='inactive'>Last</li>";
    }

    $response .= "
   </ul>
  </div>";
        
        echo $response;
  exit();
    }
}


?>

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Pagination by Carl Victor C. Fontanos</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <style>
 .pagination ul {margin: 0; padding: 0;}
 .pagination ul li {display: inline; margin: 3px; padding: 4px 8px; background: #FFF; color: black; }
 .pagination ul li.active:hover {cursor: pointer; background: #1E8CBE; color: white; }
 .pagination ul li.inactive {background: #7E7E7E;}
 .pagination ul li.selected {background: #1E8CBE; color: white;}
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="col-md-12 content">
 <div class = "inner-box content no-right-margin darkviolet">
  <div class = "response-container"></div>
 </div>      
</div>

<script type="text/javascript">
jQuery(document).ready(function($){
 var ajaxurl = window.location.href;
 
 function load_posts(page){
  var data = {
   page: page
  };
  
  $.post(ajaxurl, data, function(response){
   $(".response-container").html(response);
  });
 }
 
 load_posts(1);
 
 $('body').on('click', '.response-container .pagination li.active', function(){
  var page = $(this).attr('p');
  load_posts(page);
  
 });
    
}); 
</script>

</body>
</html>
Do you need help with a project? or have a new project in mind that you need help with?
Contact Me