PHP AJAX Pagination tutorial

0
22
views
PHP ajax pagination

Simple PHP AJAX Pagination

In this tutorial we are going to create a simple PHP AJAX Pagination. To perform AJAX we will use the most popular JavaScript library Jquery.

Related tutorial of Pagination

To create the PHP AJAX Pagination follow the below steps

#Step – 1
First you go to your phpMyAdmin and create a Database called pagination.

After that select this database and go to sql section then copy the below sql code and paste into the sql text-area and then click on Go button.

CREATE TABLE `posts` (
  `id` int(10) UNSIGNED NOT NULL,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `body` text COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

ALTER TABLE `posts`
  ADD PRIMARY KEY (`id`);
  
ALTER TABLE `posts`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT;

This sql code create a table called `posts` into the pagination Database and it also create `posts` table structure.

After that please insert some records into the `posts` table.

If you don’t want to insert records manually then you copy the below sql code and go to your pagination Database.

INSERT INTO `posts` (`id`, `title`, `body`) VALUES
(1, 'Et aut ducimus doloribus hic facere numquam et officiis ut', 'Temporibus occaecati voluptas nostrum. Ut eaque illo cumque aut at fuga. Quibusdam libero tempora vel est.\n\nRem voluptas cum maxime. Nisi vero officia facere et labore. Itaque voluptates quam neque aut consequuntur itaque.\n\nFacere nihil adipisci repellendus. Et alias ut blanditiis velit modi minus qui dolor. Dolore dolorum nihil consequatur distinctio voluptatem amet quidem.'),
(2, 'Et vero ab iste velit voluptatem aliquam', 'Eius consequatur eaque ipsum a ipsa voluptas. At omnis cumque alias ut sint praesentium blanditiis. Sunt maiores atque cumque culpa. Maiores rerum et dignissimos aperiam qui ut non.\n\nNon sed est ducimus omnis quia et. Eum voluptas in iusto odit id aut nesciunt. Rerum aut debitis unde soluta nisi ut. Dolorem alias numquam non et occaecati natus facere.\n\nDolorem doloribus enim iure libero atque. Sit asperiores aut non. Mollitia ducimus et voluptatum quo. Maxime modi dolor eum et velit deleniti.'),
(3, 'Quidem dolor veritatis aspernatur aut quia et ut accusamus', 'Molestiae excepturi placeat ut repellendus. Sequi earum nulla omnis officiis delectus. Rerum quos dolor et vitae. Ad odit sed repellendus nihil voluptatem praesentium.\n\nEos sint ut rem sapiente rerum adipisci. Et illo eos rerum repudiandae nobis rem doloremque. Vitae dolorem ut aut aut.\n\nQuia hic accusamus asperiores. Rerum nesciunt nesciunt voluptas iusto iste error autem illum. Beatae ut doloribus unde consequatur. Veniam beatae corrupti laudantium voluptatem quasi omnis optio.\n\nPerspiciatis sunt dolorem officia officia. Nam aut similique fugiat ut sed. Delectus animi omnis quas est aut. Enim et consectetur earum quidem. Sit pariatur et aut ullam aut quia eaque.\n\nAutem quos autem aspernatur est repudiandae aliquid molestiae. Non ullam placeat atque ut et porro eum. Minus odio voluptatem exercitationem commodi blanditiis. Sapiente aut officia hic dolorem incidunt.\n\nAssumenda quia deserunt molestiae et asperiores repudiandae. Et voluptas fuga et aut eius. Ut optio consectetur aperiam praesentium dicta minima. Velit expedita est recusandae autem.'),
(4, 'Voluptas autem nostrum aut officia sit possimus explicabo possimus a', 'Quidem reprehenderit inventore deserunt earum culpa et. Commodi praesentium nemo non cumque pariatur. Perspiciatis aut voluptas enim repellendus unde consequatur ratione omnis.\n\nVelit nobis aut qui sit. Tempora adipisci reprehenderit eum eaque. Ut quidem quia accusamus veritatis ut. Veritatis mollitia consectetur quam neque mollitia a.\n\nQuaerat repellat omnis qui. Exercitationem laborum facilis ea autem nam laboriosam temporibus sunt. Veniam vel quae et est itaque inventore dolor.\n\nIste nesciunt vel voluptatum illo omnis a itaque. Laborum natus voluptatem aut in eos at neque. Quia rerum illum corrupti est. Voluptas architecto voluptate nemo ratione eos aperiam rerum quo.\n\nQuasi non et dolores at. Alias occaecati molestiae rerum. Vel sit aut aut facere laboriosam mollitia vitae.\n\nEst vel fugiat facilis adipisci tempore excepturi esse necessitatibus. Quos aspernatur minus sapiente sint. Quo dolores quasi expedita quasi.\n\nQui qui eaque consequatur sed occaecati. Quis aperiam quos earum tenetur. Aperiam ut asperiores accusantium.'),
(5, 'Maxime impedit consequatur omnis est velit', 'Ipsa quis aut ullam hic dicta rem. Aut ut voluptatem optio est voluptas reprehenderit. Molestias nihil ut voluptate enim in qui quo esse.\n\nExpedita dolorum qui culpa. Et qui sed omnis fuga occaecati placeat enim. Modi minus at placeat reiciendis.\n\nOmnis natus ipsum dolorem necessitatibus. Vero inventore ea commodi vel. Expedita id assumenda et et sunt aliquam et.\n\nAliquid et quidem voluptatem et in. Est odit et a perspiciatis qui fugit. Iure fugiat consequuntur sint quas error sunt sint.\n\nDolore velit delectus est sed et. Quo tenetur possimus laborum autem quasi excepturi. Ut animi totam illo debitis.'),
(6, 'Cupiditate dolores quibusdam est aut distinctio voluptas qui sapiente', 'Nihil distinctio et voluptatem dolore et rem quia. Aut reiciendis enim sed ut consequatur. Eveniet deserunt consequatur possimus minima reiciendis est.\n\nAperiam consequatur ipsam consequuntur. Ut aut aut magnam aut perferendis nihil. Vero consectetur sint consequatur aut qui dicta. Deleniti repudiandae repellat commodi dicta enim. Dolorem minus neque harum quia adipisci nam repellat.\n\nIpsam ipsum perferendis consequatur pariatur dolor. Recusandae nostrum quas necessitatibus id quia aut ipsam. Velit aliquid est voluptate dolores.\n\nFugiat iure adipisci ea vel autem numquam adipisci dolore. Aspernatur eaque similique nihil aliquam earum nihil minima vitae. Ut dignissimos maiores non. Porro quos omnis sunt nostrum cumque.\n\nExcepturi et quis architecto sunt et. Ratione qui sed et laborum voluptatum. Voluptas repellat eius eligendi corrupti omnis. Et ea illum assumenda exercitationem animi quia quo.'),
(7, 'Nihil soluta consequuntur ipsum voluptatum deserunt repellendus sit', 'Recusandae alias neque quo rerum est occaecati. Qui aliquid dolorem ea ipsum suscipit occaecati architecto. Quos voluptatem earum ea iusto. Voluptatibus a velit eius expedita ut.\n\nEsse autem non eligendi accusantium sint. Dolorum exercitationem eius quia repellat rem. Voluptatem odio accusamus beatae error. Impedit ut iure sunt.\n\nNecessitatibus aut cumque exercitationem rerum quisquam doloremque optio. Quam omnis illo est amet consequatur fuga in. Nemo maiores nesciunt et quia neque sapiente qui quia. Sed perferendis eligendi non quam.\n\nAssumenda veniam culpa aut inventore. Aut atque voluptas iste porro quasi deleniti ad. Voluptatibus commodi delectus asperiores vitae.\n\nNihil et dolores distinctio rem laudantium. Suscipit occaecati sunt iusto natus rerum. Nihil nihil possimus sint ut. Necessitatibus id quasi sint quae ex.\n\nItaque et rerum accusantium ut. Et dolorem delectus ut molestiae est consequatur sit. Consequuntur sapiente tempore ullam pariatur.\n\nEsse quia consequuntur est ratione sint. Sint est dolore est eveniet. Autem beatae ipsum velit quis rerum autem quos.'),
(8, 'Sint omnis velit impedit quasi magni repellendus similique', 'Officiis error qui cumque eius quia et. Corporis in at tenetur dolorem occaecati. Occaecati aliquam et omnis vitae minima doloribus. Soluta voluptas voluptatem voluptatem.\n\nDolorem repellendus quia itaque. Non velit dicta ratione fugit reiciendis sit placeat. Quis exercitationem corporis velit in amet quis.\n\nVoluptatibus corrupti quidem mollitia et. Quis deleniti itaque deserunt qui. Dignissimos ad exercitationem delectus sunt maxime eum repudiandae.'),
(9, 'Sint esse ea at debitis rerum', 'Accusantium ducimus sit necessitatibus dignissimos qui expedita quo. Ea voluptas modi officia aut quis est voluptatem. Omnis velit hic officiis voluptatibus.\n\nCupiditate totam explicabo recusandae debitis tenetur eos. Harum aut repellat dolores maxime. Harum aliquid dolorum reprehenderit deleniti dicta ut. Quis ut et ad earum qui et architecto.\n\nEum et dolor numquam. Accusantium laborum optio molestiae beatae autem ducimus et. Nihil veniam voluptatem aut eaque eaque magnam.\n\nLaboriosam pariatur atque occaecati nihil natus quos. Perferendis atque ipsa debitis rerum accusamus. Fugiat omnis qui deserunt ex dolores.\n\nVoluptatem rerum consequatur iusto soluta. Ipsa aut ipsa sapiente autem. Omnis vel dolorum quis eveniet quibusdam. Dolorem eum iusto quam.'),
(10, 'Facilis ipsa aut eligendi', 'Velit voluptatem ratione est recusandae in. Voluptas ab aut a debitis dolor voluptatibus. Est sint error mollitia rerum sunt qui dolor quis.\n\nVeniam quia sed non sed aliquid ab reiciendis nemo. Deleniti exercitationem optio voluptas quia dolorem et velit. Ut earum temporibus ut id suscipit harum reprehenderit itaque. Dignissimos quibusdam laboriosam labore voluptatibus porro eos.\n\nEum aut aut sunt eaque praesentium. Ut recusandae tenetur sit consequatur eos sit aut et. Qui et mollitia omnis et.\n\nNatus occaecati voluptatem culpa quam numquam eligendi. Quis quaerat et repellat dolorum enim. Sequi est sed in dicta nihil molestias repellat.\n\nEt et velit provident dolorem dolor. Delectus eaque quod ut sit ut inventore nobis. Illum est accusamus omnis non.'),
(11, 'Reiciendis ex architecto esse natus ab id commodi officia', 'Placeat aperiam placeat minus odit. Sunt est at possimus dicta voluptatem error in. Illo sequi et qui dolores.\n\nVoluptates dolorem maxime labore quibusdam dolorem. Nisi sed ut corporis laboriosam explicabo. Velit cumque fuga quod aut. Est eum aut omnis consequuntur impedit cum repudiandae.\n\nDeserunt dolor reiciendis porro minus accusamus repellat. Mollitia eum consequatur et in voluptatem dolorem. Vel facilis nulla a cum omnis. Itaque aut ea ea voluptatem.');

After that select the `posts` table and go to sql section and paste here the copied sql code and then click on go button.


#Step – 2
In the step 2, go to your www directory or Xampp htdocs folder and here you create a new folder called whatever you want, Here i named this folder pagination.

After that go inside the newly created folder and here you create three files index.php, db_connection.php and posts.php.
Creating files
#db_connection.php
Create this file for making database connection

<?php
$servername = "localhost";
$username = "root";
$password = "";
$db_name = "pagination";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $db_name);

// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
?>

#index.php
In the index.php file we will show our posts through AJAX.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP pagination with AJAX</title>
    <style>
        body{
            padding:0 20px;
            margin: 0;
            font-family: sans-serif;
        }
        .page_link{
            display: inline-block;
            color: #222;
            border: 1px solid #ddd;
            padding: 5px 10px;
            margin: 0 5px;
            text-decoration: none;
            cursor: pointer;
        }
        .active_page{
            background-color:dodgerblue;
            color: #FFF;
            outline: none;
            border: 1px solid rgba(0,0,0,.1);
        }
        .container{
            border: 5px solid #ccc;
            padding: 10px;
        }
        .posts{
            margin: 0;
            list-style: none;
            padding: 0;
        }
        .posts li{
            padding:10px 5px;
            margin: 0;
            border-bottom: 1px solid #ddd;
            
        }
        h2{
            margin: 0;
            padding: 0;
        }
        p{
            margin: 0;
            padding:10px 10px 0 10px;
            color: #444;
        }
        
    </style>
</head>

<body>
   <h1 style="text-align:center;">PHP Pagination with AJAX</h1>
    <div class="container">
        <ul class="posts">
        <!-- SHOW DATA -->
        </ul>
    </div> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            
            // function for getting posts from posts.php
            function getPosts(pageNum){
                var pageNum = pageNum;
                $.ajax({
                    type:'POST',
                    url:'posts.php',
                    data:{page:pageNum},
                    success:function(data){
                        $('.posts').html(data);
                    },
                    error:function(error){
                        console.log(error);
                    }
                });

            }
            // call the getPosts function
            // here 1 is default page number
            getPosts(1);
            
            // when click pagination button
            $('.posts').on('click','.page_link',function(e){
                e.preventDefault();
                var page_num = $(this).attr('href');
                getPosts(page_num);
            });

        });</script>
</body>
</html>

#posts.php
In the posts.php we will fetch posts or data from Database (we’ll get data from here through AJAX).

<?php
// check request method
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    // if request method is not POST
    http_response_code(404);
    echo "<h1>404 Page Not found!</h1>";
    exit;
}

// including database connection
require 'db_connection.php';

if(isset($_POST['page'])){
    // if get page number through post request and check it is valid number
    $page_num = filter_var($_POST['page'], FILTER_VALIDATE_INT,[
        'options' => [
            'default' => 1,
            'min_range' => 1
        ]
    ]); 
    
}else{
    //Defautl page number
    $page_num = 1;
}
// set how much show posts in a single page
$page_limit = 2;
// Set Offset
$page_offset = $page_limit * ($page_num - 1);

function showPosts($conn, $current_page_num, $page_limit, $page_offset){
    
    // query of fetching posts
    $query = mysqli_query($conn,"SELECT * FROM `posts` ORDER BY id LIMIT $page_limit OFFSET $page_offset");
    
    // check database is not empty
    if(mysqli_num_rows($query) > 0){
        
        // fetching data
        while($row = mysqli_fetch_array($query)){ 
            echo '<li><h2>'.$row['title'].'</h2><p>'.$row['body'].'</p></li>';
        }
        
        // total number of posts
        $total_posts = mysqli_num_rows(mysqli_query($conn,"SELECT * FROM `posts`"));
        
        // total number of pages
        $total_page = ceil($total_posts / $page_limit);
        // set next page number
        $next_page = $current_page_num+1; 
        // set prev page number
        $prev_page = $current_page_num-1; 
        
       echo "<li>";
        //showing prev button and check current page number is greater than 1
        if($current_page_num > 1){
           echo '<a href="'.$prev_page.'" class="page_link">Prev</a>';
        }
        // show all number of pages
        for($i = 1; $i <= $total_page; $i++){
            //highlight the current page number
            if($i == $current_page_num){
                echo '<a href="'.$i.'" class="page_link active_page">'.$i.'</a>';
            }else{
                echo '<a href="'.$i.'" class="page_link">'.$i.'</a>';
            }
            
        }
        // showing next button and check this is last page
        if($total_page+1 != $next_page){
           echo '<a href="'.$next_page.'" class="page_link">Next</a>';
        }
        
        echo "</li>";  
        
    }else{
        echo "No Data found !";
    }
}
showPosts($conn, $page_num, $page_limit, $page_offset);
?>

Congratulations you made it.

LEAVE A REPLY

Please enter your comment!
Please enter your name here