Today, We want to share with you pagination ajax.In this post we will show you ajax pagination jQuery in php with next and previous, hear for simple pagination in php we will give you demo and example for implement.In this post, we will learn about pagination with php and mysql with an example.

Advanced Ajax Pagination jQuery with PHP and MySQL

Contents

There are the Following The simple About Dynamic Pagination With Ajax Full Information With Example and source code.

As I will cover this Post with live Working example to develop Create Pagination with MySQL, PHP and jQuery, so the Previous Pagination using jQuery with PHP and MySQL is used for this example is following below.

Pagination with PHP Without Page Refresh – Learn jQuery AJAX Pagination with PHP Without Page Refresh starting from it’s overview Search insert, Update, retrieve, Delete, Filter, upload image etc .

Create Database Table

--
-- Database: `registration`
-- --------------------------------------------------------
-- Table structure for table `products`

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `shop_name` varchar(50) NOT NULL,
  `productname` varchar(50) NOT NULL,
  `pcode` varchar(50) NOT NULL,
  `price` int(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Database Connectivity

connect_db.php

<?php

	// database configuration 

	$sernamename = "localhost";
	$username    = "root";
	$passoword   = "";
	$databasename= "registration";

	// create database connection
	$con = mysqli_connect($sernamename, $username,$passoword,$databasename);

	// check connection
	if ($con->connect_error) {
		die("Connection failed". $con->connect_error);
	}

?>

Create HTML Page Show Data list from Database

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ajax Pagination using jQuery with PHP and MySQL</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h2>jQuery Ajax Pagination using jQuery with PHP and MySQL</h2>
</div>
  
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="product-data">
        
      </div>
    </div>
  </div>
</div>

</body>
</html>

jQuery AJAX Code for fetch Data and Pagination

<script type="text/javascript">
  $(document).ready(function(){
    function getAllData(page){
      $.ajax({
        url  : "list-products.php",
        type : "POST",
        cache: false,
        data : {slide_no:page},
        success:function(response){
          $("#product-data").html(response);
        }
      });
    }
    getAllData();
    
    // Pagination Source code
    $(document).on("click", ".pagination li a", function(e){
      e.preventDefault();
      var pageId = $(this).attr("id");
      getAllData(pageId);
    });
  });
</script>

Create PHP page for fetch Data list and Pagination

list-products.php

Also Read This 👉 How to Configure Virtual Host in XAMPP

<?php

	// Connect database 

	require_once('connect_db.php');

	$limit = 5;

	if (isset($_POST['slide_no'])) {
	    $slide_no = $_POST['slide_no'];
	}else{
	    $slide_no = 1;
	}

	$offset = ($slide_no-1) * $limit;

	$query = "SELECT * FROM products LIMIT $offset, $limit";

	$result = mysqli_query($con, $query);

	$output = "";

	if (mysqli_num_rows($result) > 0) {

	$output.="<table class='table'>
		    <thead>
		        <tr>
		           <th>Id</th>
    	          	   <th>Shop Name</th>
					   <th>Product Name</th>
					   <th>Product code</th>
					   <th>Price</th>
	            </tr>
		    </thead>
	         <tbody>";
	while ($row = mysqli_fetch_assoc($result)) {

	$output.="<tr>
	            <td>{$row['id']}</td>
	            <td>{$row['shop_name']}</td>
	            <td>{$row['productname']}</td>
	            <td>{$row['pcode']}</td>
	            <td>{$row['price']}</td>
		 </tr>";
	} 
	$output.="</tbody>
		</table>";

	$sql = "SELECT * FROM products";

	$all_products = mysqli_query($con, $sql);

	$totalRecords = mysqli_num_rows($all_products);

	$totalPage = ceil($totalRecords/$limit);

	$output.="<ul class='pagination justify-content-center' style='margin:20px 0'>";

	for ($i=1; $i <= $totalPage ; $i++) { 
	   if ($i == $slide_no) {
		$active = "active";
	   }else{
		$active = "";
	   }

	    $output.="<li class='page-item $active'><a class='page-link' id='$i' href=''>$i</a></li>";
	}

	$output .= "</ul>";

	echo $output;

	}

?>

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about ajax pagination javascript.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.