Hi there,in this tutorial we will create a Simple Ajax Pagination With PHP, MySQL and PDO.
Ajax is a client-side script. It is used to get the data without reloading the page.
1.Creating the database connection:
To create the connection copy/paste the code below and name it config.php
just copy/paste the code below and name it list_user.php
1.Creating the database connection:
To create the connection copy/paste the code below and name it config.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
try {
$conn = new PDO("mysql:host=$servername;dbname=signup_db", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e)
{
echo "Connection failed: " . $e->getMessage();
}
?>
2.Create a list pagejust copy/paste the code below and name it list_user.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>User Info</h2>
<div class = "table-responsive" id = "load_data"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
load_data();
function load_data(page){
$.ajax({
url: 'load_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);
});
});
</script>
</body>
</html>
3.Creating the Pagination:
This is where the data will be display. To make the result display, just copy/paste the code below then name it 'load_data.php'
<?php //start php tag
//include config.php page for database connection
include('config.php');
$record_per_page = 3;
$page = "";
$result = "";
if(ISSET($_POST['page'])){
$page = $_POST['page'];
}else{
$page = 1;
}
$start = ($page - 1) * $record_per_page;
$q_book = $conn->query ("SELECT * FROM users LIMIT $start, $record_per_page") or die(mysqli_error());
$result .="
<table class = 'table table-bordered'>
<thead>
<tr class='warning'>
<th>S.No</th>
<th>Username</th>
<th>Email</th>
</tr>
</thead>
<tbody>
";
$i=1;
while($f_book = $q_book->fetch(PDO::FETCH_ASSOC)){
$result .= "
<tr class='info'>
<td>".$i++."</td>
<td>".$f_book['username']."</td>
<td>".$f_book['email']."</td>
</tr>
";
}
$result .= "
</tbody></table>
";
$q_page = $conn->query("SELECT * FROM `users`") or die(mysqli_error());
$v_page = $q_page->rowCount();
$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;
?>
4.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 body in list_user.php
<script type="text/javascript">
$(document).ready(function(){
load_data();
function load_data(page){
$.ajax({
url: 'load_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);
});
});
</script>
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. Enjoy Coding!!
Comments
Post a Comment