Jquery Ajax pagination with php

onScroll pagination using JQuery Ajax with php and bootstrap table

Jquery Ajax pagination with php

In this article, we’re going to explain how to paginate your data using PHP and AJAXwithout page reload and without click, Yes without anywhere click on the page. This example will show you pagination onScroll. This is amazing exercise on the JQuery ajax and php. We are using jQuery library for Ajax request and MySQL for database with php.

 

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

<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();
?> 
Top