Pagination In Php Using Ajax And MySQL My Programming School

Contents

Pagination in Php Using Ajax and MySQL

Pagination is an necessary function of net functions to show large information in chunks of pages as a substitute of displaying all information. With pagination, we divide complete information into chunks of pages with small variety of document. We largely hundreds pagination pages on every web page request with identical web page reload. But now the ajax pagination is more improved and more person pleasant which enable users to load subsequent or earlier pages with out reloading web page.

So if you’re a PHP developer and considering to implement Pagination in Php Using Ajax, then you definitely’re right here at proper place. in this tutorial you’ll discover ways to implement Pagination in Php Using Ajax and MySQL. In this tutorial we are going to use easy bootstrap pagination plugin to create advance pagination.

We will cowl this tutorial in simple steps to dwell instance to create Pagination in Php Using Ajax and MySQL. We will even mean you can obtain full supply code of dwell instance.

So let’s begin implementing Pagination in Php Using Ajax and MySQL. Before we start, have a look on recordsdata construction for this instance.

index.php
pagination.js

load_data.php

1) How can we create a desk in database?

As we are going to show developer information with pagination, so first we are going to create MySQL database desk builders to retailer information.

CREATE TABLE `builders` (
  `id` int(11) NOT NULL,
  `title` varchar(255) NOT NULL,
  `abilities` varchar(255) NOT NULL,
  `tackle` varchar(255) NOT NULL,
  `gender` varchar(255) NOT NULL,
  `designation` varchar(255) NOT NULL,
  `age` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

We will even insert few information into builders desk to show information with pagination.

INSERT INTO `builders` (`id`, `title`, `abilities`, `tackle`, `gender`, `designation`, `age`) VALUES
(1, 'Smith', 'Java', 'Newyork', 'Male', 'Software Engineer', 34),
(2, 'David', 'PHP', 'London', 'Male', 'Web Developer', 28),
(3, 'Rhodes', 'jQuery', 'New Jersy', 'Male', 'Web Developer', 30),
(4, 'Sara', 'JavaScript', 'Delhi', 'Female', 'Web Developer', 25),
(5, 'Shyrlin', 'NodeJS', 'Tokiyo', 'Female', 'Programmer', 35),
(6, 'Steve', 'Angular', 'London', 'Male', 'Web Developer', 28),
(7, 'Cook', 'MySQL', 'Paris', 'Male', 'Web Developer', 26),
(8, 'Root', 'HTML', 'Paris', 'Male', 'Web Developer', 28),
(9, 'William', 'jQuery', 'Sydney', 'Male', 'Web Developer', 23),
(10, 'Nathan', 'PHP', 'London', 'Male', 'Web Developer', 28),
(11, 'Shri', 'PHP', 'Delhi', 'Male', 'Web Developer', 38),
(12, 'Jay', 'PHP', 'Delhi, India', 'Male', 'Web Developer', 30);

2) How to Include Bootstrap, jQuery and Pagination Plugin File

As we are going to use Bootstrap design and additionally jQuery easy bootstrap pagination plugin, so in index.php, we are going to embrace Bootstrap, jQuery and pagination plugin recordsdata.

<hyperlink rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<hyperlink rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="plugin/simple-bootstrap-paginator.js"></script>
<script src="js/pagination.js"></script>

3: How to Create Bootstrap HTML Table with Content Container

In index.php file, we are going to create Bootstrap HTML desk to show information by way of Ajax request. We will even create pagination container to show pagination with buttons.

<div class="container">	
	<div class="row">
		<desk class="table table-hover table-bordered">
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>Age</th>
					<th>Address</th>
					<th>Skills</th>
					<th>Designation</th>
				</tr>
			</thead>
			<tbody id="content">     
			</tbody>
		</desk>   
		<div id="pagination"></div>    
		<enter sort="hidden" id="totalPages" worth="<?php echo $totalPages; ?>">	
	</div>    
</div>

We will even get the overall the pages to show in keeping with complete information from MySQL database desk builders. Here in this instance, we are going to show 5 information per web page.

<?php
include_once("db_connect.php");
$perPage = 5;
$sqlQuery = "SELECT * FROM developers";
$consequence = mysqli_query($conn, $sqlQuery);
$completeRecords = mysqli_num_rows($consequence);
$totalPages = ceil($completeRecords/$perPage)
?>

4: How to Load Pagination Data with Ajax Request

As right here in this instance we’re dealing with pagination with simple-bootstrap-paginator plugin, so on pageChange occasion, we are going to deal with Ajax request in pagination.js to load pagination information from MySQL database by making Ajax request to server facet php script load_data.php. We will get response as JSON information and set response JSON HTML to show pagination information.

$(doc).prepared(function(){
	var totalPage = parseInt($('#totalPages').val());	
	var pag = $('#pagination').simplePaginator(
		totalPages: totalPage,
		maxButtonsVisible: 5,
		currentPage: 1,
		nextLabel: 'Next',
		prevLabel: 'Prev',
		firstLabel: 'First',
		lastLabel: 'Last',
		clickCurrentPage: true,
		pageChange: function(web page) 			
			$("https://webdamn.com/#content").html('<tr><td colspan="6"><robust>loading...</robust></td></tr>');
            $.ajax(
				url:"load_data.php",
				methodology:"POST",
				dataType: "json",		
				information:web page:	web page,
				success:function(responseData)
					$("https://webdamn.com/#content").html(responseData.html);
				
			);
		
	);
});

5: How to Load Pagination Records from MySQL Database

In load_data.php, we are going to get information from MySQL database desk builders in keeping with pagination information request and return information as JSON.

<?php
include_once("db_connect.php");
$perPage = 5;
if (isset($_GET["page"]))  
	$web page  = $_GET["page"]; 
 else  
	$web page=1; 
;  
$startFrom = ($page-1) * $perPage;  
$sqlQuery = "SELECT id, title, age, tackle, abilities, designation
	FROM builders ORDER BY id ASC LIMIT $startFrom, $perPage";  
$consequence = mysqli_query($conn, $sqlQuery); 
$paginationHtml = '';
while ($row = mysqli_fetch_assoc($consequence))   
	$paginationHtml.='<tr>';  
	$paginationHtml.='<td>'.$row["id"].'</td>';
	$paginationHtml.='<td>'.$row["name"].'</td>';
	$paginationHtml.='<td>'.$row["age"].'</td>'; 
	$paginationHtml.='<td>'.$row["address"].'</td>';
	$paginationHtml.='<td>'.$row["skills"].'</td>';
	$paginationHtml.='<td>'.$row["designation"].'</td>'; 
	$paginationHtml.='</tr>';  
 
$jsonData = array(
	"html"	=> $paginationHtml,	
);
echo json_encode($jsonData); 
?>

You can obtain the script from the Download hyperlink under.
Download

u003cstrongu003eWhat is pagination used for?u003c/strongu003e

Pagination is an important feature of web applications to display huge data in chunks of pages instead of displaying all records. With pagination, we divide total records into chunks of pages with small number of record.

Recommend Post:

This article is written by Pramod Yadav from Best-Ph on e