Table of Contents
How to Load More Data using AJAX and jQuery in PHP/MySQLi
This tutorial will teach you how to load more data using ajax and jquery in PHP and MySQLi. It creates a load more button that loads additional data using AJAX and jQuery.
Note: Scripts and CSS used in this tutorial are hosted; therefore, you need an internet connection for them to work.
Creating a Database
The first step is to create our database.
1. Open phpMyAdmin.
2. Click databases, create a database and name it as testing.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
CREATE TABLE `tutorial` ( `tutorialid` INT(11) NOT NULL AUTO_INCREMENT, `title` VARCHAR(150) NOT NULL, `link` VARCHAR(150) NOT NULL, PRIMARY KEY(`tutorialid`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Creating a Connection
Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as conn.php.
<?php
$conn = mysqli_connect("localhost","root","","testing");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>index.php
Next step is to create our initial data from database then our load more button. Notice that we set our initial data to fetch only 2 rows from our database.
<!DOCTYPE html>
<html>
<head>
<title>Load More Data using Ajax/Jquery in PHP/MySQLi</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div>
<h2 align="center" >Load More Data using Ajax/Jquery in PHP/MySQLi</h2>
<div style="height:10px;"></div>
<h4>My Tutorials and Source Codes</h4>
<div id="loadtable">
<?php
$lastid='';
include('conn.php');
$query=mysqli_query($conn,"select * from tutorial order by tutorialid asc limit 2");
while($row=mysqli_fetch_array($query)){
?>
<div class="row">
<div class="col-lg-12">
<a href="<?php echo $row['link']; ?>"><?php echo $row['title']; ?></a>
</div>
</div>
<?php
$lastid=$row['tutorialid'];
}
?>
<div id="remove">
<div style="height:10px;"></div>
<div class="row">
<div class="col-lg-12">
<button type="button" name="loadmore" id="loadmore" data-id="<?php echo $lastid; ?>" class="btn btn-primary">See More</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="custom.js"></script>
</body>
</html>custom.js
This contains our AJAX and jQuery codes that fetch additional data from our database.
$(document).ready(function(){
$(document).on('click', '#loadmore', function(){
var lastid = $(this).data('id');
$('#loadmore').html('Loading...');
$.ajax({
url:"load_data.php",
method:"POST",
data:{
lastid:lastid,
},
dataType:"text",
success:function(data)
{
if(data != '')
{
$('#remove').remove();
$('#loadtable').append(data);
}
else
{
$('#loadmore').html('No more data to show');
}
}
});
});
});load_data.php
Lastly, we create our code in fetching additional data from our database.
<?php
sleep(1);
include('conn.php');
if(isset($_POST['lastid'])){
$lastid=$_POST['lastid'];
$query=mysqli_query($conn,"select * from tutorial where tutorialid > '$lastid' order by tutorialid asc limit 2");
if(mysqli_num_rows($query) > 0){
while($row = mysqli_fetch_array($query)){
?>
<div class="row">
<div class="col-lg-12">
<a href="<?php echo $row['link']; ?>"><?php echo $row['title']; ?></a>
</div>
</div>
<?php
$lastid=$row['tutorialid'];
}
?>
<div id="remove">
<div style="height:10px;"></div>
<div id="remove_row" class="row">
<div class="col-lg-12">
<button type="button" name="loadmore" id="loadmore" data-id="<?php echo $lastid; ?>" class="btn btn-primary">See More</button>
</div>
</div>
</div>
<?php
}
}
?>That ends this tutorial. If you have any questions or comments, feel free to write it below or message me. Happy Coding!
Download Here
Gracias. Justo lo que necesitaba!
Funciona todo muy bien!