How to Create Pagination in PHP with Ajax

To Create Pagination in PHP with Ajax, first, we know some brief use of pagination. At the time of creating projects, paginations are a very important part of our project. When we get huge data from the database to show on the page, we always prefer pagination functionality because of the User interface.

For maintaining better user experience we always prefer Ajax for loading the PHP pagination. On this snippet of code, we will show you how we develop pagination functionality using PHP, MySQL, and Ajax.

Complete Source Code to Create Pagination in PHP with Ajax

Using PHP we will display records or posts from the database in a table with pagination link. Ajax will help to get records without page refresh. Before start see below for a small file structure,

posts.sql
connection.php
index.php
pagination.php

Database creation

We have a posts table where we have some data and fields i.e. Title and Link. That table’s SQL like this which is given below,


-- phpMyAdmin SQL Dump
-- version 4.6.6deb5
-- https://www.phpmyadmin.net/
--
-- Host: localhost:3306
-- Generation Time: May 30, 2019 at 03:12 PM
-- Server version: 5.7.26-0ubuntu0.18.04.1
-- PHP Version: 7.2.17-0ubuntu0.18.04.1

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `blg`
--

-- --------------------------------------------------------

--
-- Table structure for table `posts`
--

CREATE TABLE `posts` (
`id` int(11) NOT NULL,
`title` varchar(255) NOT NULL,
`link` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `posts`
--

INSERT INTO `posts` (`id`, `title`, `link`) VALUES
(1, 'How to Copy Text to Clipboard using JavaScript', '<a href=\"http://codingtasks.net/how-to-copy-text-to-clipboard-using-javascript/\">How to Copy Text to Clipboard using JavaScript</a>'),
(2, 'How to Validate Date String in PHP', '<a href=\"http://codingtasks.net/how-to-validate-date-string-in-php/\">How to Validate Date String in PHP</a>'),
(3, 'Glowing animated Preloader Design', '<a href=\"http://codingtasks.net/glowing-animated-preloader-design/\">Glowing animated Preloader Design</a>'),
(4, 'Power switch on off using CSS and HTML', '<a href=\"http://codingtasks.net/power-switch-on-off-using-css-and-html/\">Power switch on off using CSS and HTML </a>');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `posts`
--
ALTER TABLE `posts`
ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `posts`
--
ALTER TABLE `posts`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

-- phpMyAdmin SQL Dump

-- version 4.6.6deb5

-- https://www.phpmyadmin.net/

-- Host: localhost:3306

-- Generation Time: May 30, 2019 at 03:12 PM

-- Server version: 5.7.26-0ubuntu0.18.04.1

-- PHP Version: 7.2.17-0ubuntu0.18.04.1

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

-- Database: `blg`

-- --------------------------------------------------------

-- Table structure for table `posts`

CREATE TABLE `posts` (

`id` int(11) NOT NULL,

`title` varchar(255) NOT NULL,

`link` varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `posts`

INSERT INTO `posts` (`id`, `title`, `link`) VALUES

(1, 'How to Copy Text to Clipboard using JavaScript', '<a href=\"http://codingtasks.net/how-to-copy-text-to-clipboard-using-javascript/\">How to Copy Text to Clipboard using JavaScript</a>'),

(2, 'How to Validate Date String in PHP', '<a href=\"http://codingtasks.net/how-to-validate-date-string-in-php/\">How to Validate Date String in PHP</a>'),

(3, 'Glowing animated Preloader Design', '<a href=\"http://codingtasks.net/glowing-animated-preloader-design/\">Glowing animated Preloader Design</a>'),

(4, 'Power switch on off using CSS and HTML', '<a href=\"http://codingtasks.net/power-switch-on-off-using-css-and-html/\">Power switch on off using CSS and HTML </a>');

-- Indexes for dumped tables

-- Indexes for table `posts`

ALTER TABLE `posts`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `posts`

ALTER TABLE `posts`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Database Connection (connection.php)

This file helps us to connect to the database,

<?php
$conn = mysqli_connect("localhost","user","password","dbname");
?>

<?php

$conn = mysqli_connect("localhost","user","password","dbname");

index.php File

On this page we include JQuery and Bootstrap link with pagination code and complete file given below.


<link rel="stylesheet" id="font-awesome-style-css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" type="text/css" media="all">
<!-- jQuery -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

Now we create JQuery and PHP logic which helps us to make pagination,

PHP code

On this PHP code highlighted code is the complete logic of pagination.

<div id="content" align="center">loading...</div> 

<?php include ('connection.php');

$limit = 2;
$sql = "SELECT COUNT(id) FROM posts";
$rs_result = mysqli_query($conn, $sql);
$row = mysqli_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit); 

?> 

<div align="center"> 
	<ul class='pagination text-center' id="pagination"> 
		<?php if (!empty($total_pages)):
    for ($i = 1;$i <= $total_pages;$i++):
        if ($i == 1): 
        ?> 
        	<li class='active' id="<?php echo $i; ?>">
        		<a href='pagination.php?page=<?php echo $i; ?>'><?php echo $i; ?></a>
        	</li> 
        <?php
        else: 
        ?> 
        <li id="<?php echo $i; ?>"><a href='pagination.php?page=<?php echo $i; ?>'><?php echo $i; ?></a>
        </li>
        <?php
        endif; 
        ?>
        <?php
    endfor;
endif; 
?><code>

<div id="content" align="center">loading...</div>

<?php include ('connection.php');

$limit = 2;

$sql = "SELECT COUNT(id) FROM posts";

$rs_result = mysqli_query($conn, $sql);

$row = mysqli_fetch_row($rs_result);

$total_records = $row[0];

$total_pages = ceil($total_records / $limit);

<?php if (!empty($total_pages)):

for ($i = 1;$i <= $total_pages;$i++):

if ($i == 1):

</li>

<?php

else:

</li>

<?php

endif;

<?php

endfor;

endif;

?><code>

Jquery Logic

jQuery(document).ready(function() {
    jQuery("#content").load("pagination.php?page=1");
    jQuery("#pagination li").live('click', function(e) {
        e.preventDefault();
        jQuery("#content").html('loading...');
        jQuery("#pagination li").removeClass('active');
        jQuery(this).addClass('active');
        var pageNum = this.id;
        jQuery("#content").load("pagination.php?page=" + pageNum);
    });
});

jQuery(document).ready(function() {

jQuery("#content").load("pagination.php?page=1");

jQuery("#pagination li").live('click', function(e) {

e.preventDefault();

jQuery("#content").html('loading...');

jQuery("#pagination li").removeClass('active');

jQuery(this).addClass('active');

var pageNum = this.id;

jQuery("#content").load("pagination.php?page=" + pageNum);

});

pagination.php File

In this file, we get the data from the database and creating all the queries for that.

<?php 
include ('connection.php');
$limit = 2;
if (isset($_GET["page"])) {
    $page = $_GET["page"];
}else {
  $page = 1;
}

$start_from = ($page - 1) * $limit;
$sql = "SELECT * FROM posts ORDER BY title ASC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql); 

?> 
<link rel="stylesheet" id="font-awesome-style-css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" type="text/css" media="all"> 

<table class="table table-bordered table-striped" style="width: 50%"> 
	<thead> 
		<tr> 
			<th>Title</th> 
			<th>Link</th> 
		</tr> 
	</thead> 
	<tbody> 
		<?php while ($row = mysqli_fetch_assoc($rs_result)){ ?> 
			<tr> 
				<td><?php echo $row["title"]; ?></td> 
				<td><?php echo $row["link"]; ?></td> 
			</tr> <?php }; ?> 
	</tbody> 
</table><code>

<?php

include ('connection.php');

$limit = 2;

if (isset($_GET["page"])) {

$page = $_GET["page"];

}else {

$page = 1;

}

$start_from = ($page - 1) * $limit;

$sql = "SELECT * FROM posts ORDER BY title ASC LIMIT $start_from, $limit";

$rs_result = mysqli_query($conn, $sql);

<thead>

<tr>

<th>Title</th>

</tr>

</thead>

<tbody>

<?php while ($row = mysqli_fetch_assoc($rs_result)){ ?>

<tr>

</tr> <?php }; ?>

</tbody>

</table><code>

Also check: HTML CSS Animation Code

If anyone wants a complete code please comment your mail ID.

Also Check:

Happy Coding..!

Was this article helpful?

YesNo

How to Create Pagination in PHP with Ajax

Complete Source Code to Create Pagination in PHP with Ajax

Database creation

Database Connection (connection.php)

index.php File

PHP code

Jquery Logic

pagination.php File

By Bikash

Related Post

One thought on “How to Create Pagination in PHP with Ajax”

Leave a Reply Cancel reply

You Missed

5 Most Effective Ways To Optimize PHP Code

Debugging in PHP: A Comprehensive Guide with Examples

3 popular ways to make HTTP requests in JavaScript

PHP: Logout From All Devices on Password Change