PHP MySQL Ajax with Pagination Example

03-Apr-2023

.

Admin

PHP MySQL Ajax with Pagination Example

Hi friends,

In this post, we will learn How to Make a pagination using ajax PHP. i explained simply step by step How To Use pagination using Ajax in PHP & MySQL. Here you will learn how to ajax pagination to database Using ajax. This tutorial will give you simple example of ajax pagination in php mysql Code Example.

I will give you simple Example of How to make a ajax pagination in PHP.

So let's see bellow example:

index.php


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<title></title>

</head>

<body>

<div class="container">

<div class="card mt-5">

<div class="card-header">

<center>

<h3>PHP Mysql Ajax Pagination Example</h3>

</center>

</div>

<div class="card-body">

<div id="sampleTable">

</div>

</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

function lodetable(page){

$.ajax({

url : 'table.php',

type : 'POST',

data : {page_no:page},

success : function(data) {

$('#sampleTable').html(data);

}

});

}

lodetable();

$(document).on("click","#pagenation a",function(e) {

e.preventDefault();

var page_id = $(this).attr("id");

lodetable(page_id);

});

});

</script>

</body>

</html>

table.php

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title></title>

<style type="text/css">

#pagenation a{

color: #fff;

}

#pagenation{

text-align: center;

margin-top: 5%;

}

.button-style{

border-radius: 20px;

}

.link{

border-radius: 100px !important;

}

</style>

</head>

<body>

<?php

$conn=mysqli_connect('localhost','root','root','page');

$limit_per_page = 5;

$page = isset($_POST['page_no']) ? $_POST['page_no'] : 1;

$offset = ($page - 1) * $limit_per_page;

$query="SELECT * FROM page LIMIT {$offset},{$limit_per_page}";

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

?>

<table class="table">

<thead>

<tr>

<th scope="col">Id</th>

<th scope="col">Name</th>

<th scope="col">Email</th>

</tr>

</thead>

<tbody>

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

<tr>

<th scope="row"><?php echo $row['id']; ?></th>

<td><?php echo $row['name']; ?></td>

<td><?php echo $row['email']; ?></td>

</tr>

<?php } ?>

</tbody>

</table>

<?php

$sql_total = "SELECT * FROM page";

$record = mysqli_query($conn,$sql_total);

$total_record = mysqli_num_rows($record);

$total_pages = ceil($total_record/$limit_per_page);

?>

<div class="pagenation" id="pagenation">

<?php if($page > 1){ ?>

<a href="" id="<?php echo $page-1;?>" class="button-style btn btn-success">Previous</a>

<?php } ?>

<?php for ($i=1; $i <= $total_pages; $i++) { ?>

<a id="<?php echo $i ?>" href="" class="link btn btn-primary"><?php echo $i ?></a>

<?php } ?>

<?php if($page != $total_pages){ ?>

<a href="" id="<?php echo $page+1; ?>" class="button-style btn btn-success">Next</a>

<?php } ?>

</div>

</body>

</html>

Output:

I hope it will help you....

#PHP