Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
CREATE TABLE `country` (
`id` int(6) NOT NULL,
`country` varchar(250) NOT NULL DEFAULT ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
INSERT INTO `country` (`id`, `country`) VALUES
(1, 'Afghanistan'),
(2, 'Aringland Islands'),
(3, 'Albania'),
(4, 'Algeria'),
(5, 'American Samoa'),
(6, 'Andorra'),
(7, 'Angola'),
(8, 'Anguilla'),
(9, 'Antarctica'),
(10, 'Antigua and Barbuda'),
(11, 'Argentina'),
(12, 'Armenia'),
(13, 'Aruba'),
(14, 'Australia'),
(15, 'Austria'),
(16, 'Azerbaijan'),
(17, 'Bahamas'),
(18, 'Bahrain'),
(19, 'Bangladesh'),
(20, 'Barbados');
ALTER TABLE `country`
ADD PRIMARY KEY (`id`);
ALTER TABLE `country`
MODIFY `id` int(6) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;
index.php
//index.php
<!DOCTYPE html>
<html>
<head>
<title>Load More Data using Jquery Ajax with PHP MySQLi</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h2 align="center">Load More Data using Jquery Ajax with PHP MySQLi</h2>
<div id="loadtable">
<?php
$lastid='';
include('conn.php');
$query=mysqli_query($conn,"select * from country order by id asc limit 5");
while($row=mysqli_fetch_array($query)){
?>
<div class="row">
<div class="col-lg-12">
<div class="btn btn-success" style="margin:10px;width:50%;"><?php echo $row['country']; ?></div>
</div>
</div>
<?php
$lastid=$row['id'];
}
?>
<div id="remove">
<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>
$(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');
}
}
});
});
});
</script>
</body>
</html>
conn.php
//conn.php
<?php
$conn = mysqli_connect("localhost","root","","testingdb");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
load_data.php
//load_data.php
<?php
sleep(1);
include('conn.php');
if(isset($_POST['lastid'])){
$lastid=$_POST['lastid'];
$query=mysqli_query($conn,"select * from country where id > '$lastid' order by id asc limit 5");
if(mysqli_num_rows($query) > 0){
while($row = mysqli_fetch_array($query)){
?>
<div class="row">
<div class="col-lg-12">
<div class="btn btn-success" style="margin:10px;width:50%;"><?php echo $row['country']; ?></div>
</div>
</div>
<?php
$lastid=$row['id'];
}
?>
<div id="remove">
<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
}
}
?>
