Simple Ajax Pagination With PHP

Submitted by razormist on Thursday, March 2, 2017 - 17:12.

In this tutorial we will create a Simple Ajax Pagination With PHP. Ajax is a client-side script that communicates to a server/database without the need for a page refresh. It is mostly use by a well known websites like facebook. AJAX is a new technique for creating better, faster, and more interactive web applications. Let's start coding... Creating The Database Connection To create the connection copy/paste the code below and name it 'connect.php'

<?php
        $conn = new mysqli("localhost", "root", "", "db_pagination");
        if(!$conn){
                die("Fatal Error: Connection Failed!");
        }
?>

Creating A Mark Up To create this form, just copy/paste the code below and name it 'index.php'

<!DOCTYPE html>
<html lang = "en">
        <head>
                <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
                <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1" />
        </head>
<body>
        <nav class = "navbar navbar-default">
                <div class = "container-fluid">
                        <a class = "navbar-brand" href = "https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class = "row">
                <div class = "col-md-3"></div>
                <div class = "col-md-6 well">
                        <h3 class = "text-primary">Simple Ajax Pagination With PHP</h3>
                        <hr style = "border-top:1px dotted #000;"/>
                        <div class = "table-responsive" id = "load_data">       
                                
                        </div>  
                </div>
        </div>
</body>
<script src = "js/jquery-3.1.1.js"></script>    
<script src = "js/ajax.js"></script>
</html>

Creating The PHP Query This is where the data will be display. To make the result display, just copy/paste the code below then name it 'book_data.php'

<?php
        require_once 'connect.php';
        
        $record_per_page = 5;
        
        $page = "";
        $result = "";
        
        if(ISSET($_POST['page'])){
                $page = $_POST['page'];
        }else{
                $page =  1;
        }
        
        $start = ($page - 1) * $record_per_page;
        
        $q_book = $conn->query ("SELECT * FROM `page` LIMIT $start, $record_per_page") or die(mysqli_error());
        
        $result .="
                <table class = 'table table-bordered'>
                        <thead>
                                <tr>
                                        <th colspan = '2'><center>List of Books</center></th>
                                </tr>
                                <tr>
                                        <th>Book #</th>
                                        <th>Title</th>
                                </tr>
                        </thead>
                        <tbody>
        ";
        
        while($f_book = $q_book->fetch_array()){
                $result .= "
                        <tr>
                                <td style = 'width:50%;'>".$f_book['book_id']."</td>
                                <td style = 'width:50%;'>".$f_book['title']."</td>
                        </tr>
                ";
        }
        $result .= "
                </tbody></table>
        ";
        
        $q_page = $conn->query("SELECT * FROM `page`") or die(mysqli_error());
        $v_page = $q_page->num_rows;
        $total_pages = ceil($v_page/$record_per_page);
        for($i = 1; $i <= $total_pages; $i++){
                $result .="<span class = 'pagination' style = 'cursor:pointer; margin:1px; padding:8px; border:1px solid #ccc;' id = '".$i."'>".$i."</span>";
        }
        $result .="
                <span class = 'pull-right'>Page of ".$page." out of ".$total_pages."</span>
        ";
        echo $result;
?>

Creating The Ajax Script To make the query works, we will have to make a ajax function that calls back PHP Query. Just copy/paste the code below then name it 'ajax.js'

$(document).ready(function(){
        load_data();
        function load_data(page){
                $.ajax({
                        url: 'book_data.php',
                        method: 'POST',
                        data: {
                                page: page
                        },
                        success: function(res){
                                $('#load_data').html(res);
                        }
                });
        }
        
        $(document).on('click', '.pagination', function(){
                $page = $(this).attr('id');
                load_data($page);
        });
});

The function load_data will try to send the index of the page number, and calls back the result from the PHP query. There you have it we created a simple pagination using ajax. I hope that this tutorial helps you to your projects. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Simple Ajax Pagination With PHP

Comments

THANKS

Welcome

Add new comment