Jquery Ajax pagination with php with complete example

Jquery Ajax pagination with php with complete example

In this article, we’re going to explain how to paginate your data using PHP and AJAXwithout page reloads and without a click, Yes without anywhere click on the page.

This example will show you pagination onScroll. So, let's get started with Jquery Ajax pagination with PHP.

This is an amazing exercise on the JQuery ajax and PHP. We are using the jQuery library for Ajax request and MySQL for a database with PHP.

Dofollow and nofollow links in seo

Cal these JQuery link on your page to use JQuery ajax request and bootstrap for responsive page.

Loading...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

In this example I am fetching records from the database and then displaying on the page. You can change the limit of records per page according to you. Now we are going to set these limit and offset and call once on the page and onScroll:

var busy = false;
var offset = 0;
var limit = 15;
$(window).scroll(function(){
	if(($(window).height() + $(window).scrollTop())+400 >= $(document).height() && !busy){
		busy = true;
		offset = offset + limit;
		getresult(offset, limit)
	}
});

Your index page should be like this with a ajax request:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JQuery Ajax Pagination with Bootstrap and php</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 class="text-danger">JQuery Ajax Pagination with Bootstrap and php</h2>
  <table id="result" class="table table-striped"></table>
  <div id="loader-icon"><i class="fa fa-refresh fa-spin" style="font-size:20px"></i></div>
</div>
</body>
</html>
<script>
function getresult(offset,limit) { 
	$.ajax({
		url: 'ajax_page.php',
		type: "POST",
		data: {action:'show_list',offset:offset,limit:limit},
		beforeSend: function(){
			$('#loader-icon').show();
		},
		complete: function(){
			$('#loader-icon').hide();
		},
		success: function(data){
			$("#result").append(data);
			window.busy = false;
		},
		error: function (jqXHR, textStatus, errorThrown) {
		  if (jqXHR.status == 500) {
			  console.debug("Internal error: " + jqXHR.responseText)
		  } else {
			  console.debug("Unexpected error.")
		  }
		}        
	});
}
var busy = false;
var offset = 0;
var limit = 15;
$(window).scroll(function(){
	if(($(window).height() + $(window).scrollTop())+400 >= $(document).height() && !busy){
		busy = true;
		offset = offset + limit;
		getresult(offset, limit)
	}
});
getresult(offset, limit);
</script>

Now we are going to setup database configuration file:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "mydatabase";
// Create connection
$connection = mysqli_connect($servername, $username, $password, $database);
// Check connection
if (!$connection) {
    die("Connection failed: " . $connection->connect_error);
}
function close_db(){
	mysqli_close($connection);
}
?>

Your ajax page is:

<?php 
require_once('config.php');
if(isset($_POST['action'])){
	$action = $_POST['action'];
	
	if($action == 'show_list'){
		$offset = $_POST['offset'];
		$limit = $_POST['limit'];
		
		$mysql_query = mysqli_query($connection, "Select * from country Limit $offset, $limit");
		if($offset == 0){
			echo "<thead>
					<tr class='text-info'>";
				while($mysql_query_fields = mysqli_fetch_field($mysql_query)){
					$mysql_fields[] = $mysql_query_fields->name;
					echo "<th align='left'>".ucfirst($mysql_query_fields->name)."</th>";
				}
			echo "</tr>
				</thead>";
		}
		else{
			while($mysql_query_fields = mysqli_fetch_field($mysql_query)){
				$mysql_fields[] = $mysql_query_fields->name;
			}
		}
		while($mysql_rows = mysqli_fetch_array($mysql_query)){
		echo "<tr>";
			foreach($mysql_fields as $fields){
				echo "<td>".$mysql_rows[$fields]."</td>";
			}
		echo "</tr>";
		}
	}
	else{
		 echo "Invalid Method!";
	}
}
else{
	echo "Invalid Calling Method!";
}
close_db();
?> 

Related posts

(1) Comments

  • User Pic

    Excellent post. Nice work keep it up. Thanks for sharing the knowledge.

Write a comment