Create Database Table
The following SQL creates an tbl_country_master
table with some basic fields in the MySQL database.
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; CREATE TABLE `tbl_country_master` ( `countryId` int(11) NOT NULL, `title` varchar(100) NOT NULL DEFAULT '' ) ENGINE=MyISAM DEFAULT CHARSET=utf8; -- -- Dumping data for table `tbl_country_master` -- INSERT INTO `tbl_country_master` (`countryId`, `title`) VALUES (1, 'Afghanistan'), (2, 'Albania'), (3, 'Algeria'), (4, 'American Samoa'), (5, 'Andorra'), (6, 'Angola'), (7, 'Anguilla'), (8, 'Antartica'), (9, 'Antigua and Barbuda'), (10, 'Argentina'), (11, 'Armenia'), (12, 'Aruba'), (13, 'Australia'), (14, 'Austria'), (15, 'Azerbaijan'), (16, 'Bahamas'), (17, 'Bahrain'), (18, 'Bangladesh'), (19, 'Barbados'), (20, 'Belarus'), (21, 'Belgium'), (22, 'Belize'), (23, 'Benin'), (24, 'Bermuda'), (25, 'Bhutan'), (26, 'Bolivia'), (27, 'Bosnia and Herzegowina'), (28, 'Botswana'), (29, 'Bouvet Island'), (30, 'Brazil'), (31, 'British Indian Ocean Territory'), (32, 'Brunei Darussalam'), (33, 'Bulgaria'), (34, 'Burkina Faso'), (35, 'Burundi'), (36, 'Cambodia'), (37, 'Cameroon'), (38, 'Canada'), (39, 'Cape Verde'), (40, 'Cayman Islands'), (41, 'Central African Republic'), (42, 'Chad'), (43, 'Chile'), (44, 'China'), (45, 'Christmas Island'), (46, 'Cocos Islands'), (47, 'Colombia'), (48, 'Comoros'), (49, 'Congo'), (50, 'Cook Islands'), (51, 'Costa Rica'), (52, 'Cota D Ivoire'), (53, 'Croatia (Hrvatska)'), (54, 'Cuba'), (55, 'Cyprus'), (56, 'Czech Republic'), (57, 'Denmark'), (58, 'Djibouti'), (59, 'Dominica'), (60, 'Dominican Republic'), (61, 'East Timor'), (62, 'Ecuador'), (63, 'Egypt'), (64, 'El Salvador'), (65, 'Equatorial Guinea'), (66, 'Eritrea'), (67, 'Estonia'), (68, 'Ethiopia'), (69, 'Falkland Islands (Malvinas)'), (70, 'Faroe Islands'), (71, 'Fiji'), (72, 'Finland'), (73, 'France'), (74, 'France Metropolitan'), (75, 'French Guiana'), (76, 'French Polynesia'), (77, 'French Southern Territories'), (78, 'Gabon'), (79, 'Gambia'), (80, 'Georgia'), (81, 'Germany'), (82, 'Ghana'), (83, 'Gibraltar'), (84, 'Greece'), (85, 'Greenland'), (86, 'Grenada'), (87, 'Guadeloupe'), (88, 'Guam'), (89, 'Guatemala'), (90, 'Guinea'), (91, 'Guinea-Bissau'), (92, 'Guyana'), (93, 'Haiti'), (94, 'Heard and McDonald Islands'), (95, 'Holy See'), (96, 'Honduras'), (97, 'Hong Kong'), (98, 'Hungary'), (99, 'Iceland'), (100, 'India'), (101, 'Indonesia'), (102, 'Iran'), (103, 'Iraq'), (104, 'Ireland'), (105, 'Israel'), (106, 'Italy'), (107, 'Jamaica'), (108, 'Japan'), (109, 'Jordan'), (110, 'Kazakhstan'), (111, 'Kenya'), (112, 'Kiribati'), (113, 'Korea'), (114, 'Kuwait'), (115, 'Kyrgyzstan'), (116, 'Lao'), (117, 'Latvia'), (118, 'Lebanon'), (119, 'Lesotho'), (120, 'Liberia'), (121, 'Libyan Arab Jamahiriya'), (122, 'Liechtenstein'), (123, 'Lithuania'), (124, 'Luxembourg'), (125, 'Macau'), (126, 'Macedonia'), (127, 'Madagascar'), (128, 'Malawi'), (129, 'Malaysia'), (130, 'Maldives'), (131, 'Mali'), (132, 'Malta'), (133, 'Marshall Islands'), (134, 'Martinique'), (135, 'Mauritania'), (136, 'Mauritius'), (137, 'Mayotte'), (138, 'Mexico'), (139, 'Micronesia'), (140, 'Moldova'), (141, 'Monaco'), (142, 'Mongolia'), (143, 'Montserrat'), (144, 'Morocco'), (145, 'Mozambique'), (146, 'Myanmar'), (147, 'Namibia'), (148, 'Nauru'), (149, 'Nepal'), (150, 'Netherlands'), (151, 'Netherlands Antilles'), (152, 'New Caledonia'), (153, 'New Zealand'), (154, 'Nicaragua'), (155, 'Niger'), (156, 'Nigeria'), (157, 'Niue'), (158, 'Norfolk Island'), (159, 'Northern Mariana Islands'), (160, 'Norway'), (161, 'Oman'), (162, 'Pakistan'), (163, 'Palau'), (164, 'Panama'), (165, 'Papua New Guinea'), (166, 'Paraguay'), (167, 'Peru'), (168, 'Philippines'), (169, 'Pitcairn'), (170, 'Poland'), (171, 'Portugal'), (172, 'Puerto Rico'), (173, 'Qatar'), (174, 'Reunion'), (175, 'Romania'), (176, 'Russia'), (177, 'Rwanda'), (178, 'Saint Kitts and Nevis'), (179, 'Saint LUCIA'), (180, 'Saint Vincent'), (181, 'Samoa'), (182, 'San Marino'), (183, 'Sao Tome and Principe'), (184, 'Saudi Arabia'), (185, 'Senegal'), (186, 'Seychelles'), (187, 'Sierra'), (188, 'Singapore'), (189, 'Slovakia'), (190, 'Slovenia'), (191, 'Solomon Islands'), (192, 'Somalia'), (193, 'South Africa'), (194, 'South Georgia'), (195, 'Span'), (196, 'SriLanka'), (197, 'St. Helena'), (198, 'St. Pierre and Miguelon'), (199, 'Sudan'), (200, 'Suriname'), (201, 'Svalbard'), (202, 'Swaziland'), (203, 'Sweden'), (204, 'Switzerland'), (205, 'Syria'), (206, 'Taiwan'), (207, 'Tajikistan'), (208, 'Tanzania'), (209, 'Thailand'), (210, 'Togo'), (211, 'Tokelau'), (212, 'Tonga'), (213, 'Trinidad and Tobago'), (214, 'Tunisia'), (215, 'Turkey'), (216, 'Turkmenistan'), (217, 'Turks and Caicos'), (218, 'Tuvalu'), (219, 'Uganda'), (220, 'Ukraine'), (221, 'United Arab Emirates'), (222, 'United Kingdom'), (223, 'United States'), (224, 'United States Minor Outlying Islands'), (225, 'Uruguay'), (226, 'Uzbekistan'), (227, 'Vanuatu'), (228, 'Venezuela'), (229, 'Vietnam'), (230, 'Virgin Islands (British)'), (231, 'Virgin Islands (U.S)'), (232, 'Wallis and Futana Islands'), (233, 'Western Sahara'), (234, 'Yemen'), (235, 'Yugoslavia'), (236, 'Zambia'), (237, 'Zimbabwe'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_country_master` -- ALTER TABLE `tbl_country_master` ADD PRIMARY KEY (`countryId`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_country_master` -- ALTER TABLE `tbl_country_master` MODIFY `countryId` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=238;
<?php
$con = mysqli_connect("localhost", "root", "","demo_load_data");
// Check connection
if($con === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>
<?php
include('db_con.php');
if(isset($_GET["type"]) && $_GET["type"] == "get_country_data"){
$limit = 0;
if(isset($_POST['limit']) && $_POST['limit']!=""){
$limit = $_POST['limit'];
}
$query = "select title from tbl_country_master limit $limit, 20";
$res = mysqli_query($con, $query);
$i = $limit + 1;
while($result=mysqli_fetch_array($res))
{
?>
<div class="panel panel-default">
<div class="panel-body"><?php echo $i.". ".$result['title']; ?></div>
</div>
<?php
$i++;
}
exit();
}
?>
<?php include('db_con.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load data from database on page scroll using javascript, ajax 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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
fun_loda_data();
}
});
function fun_loda_data() {
var hid_limit = $("#hid_limit").val();
var htmlData = document.getElementById("main_div_html");
//Get Data On Scroll
$.post("getdata.php?type=get_country_data", {
limit: hid_limit
}, function(data) {
//html Set
htmlData.innerHTML = htmlData.innerHTML + data;
//if data null to show no more data
if (data == "") {
$("#img_load").hide();
$("#no_more_data").show();
} else {
//Data Get To Value Update
$("#hid_limit").val(Number(hid_limit) + 20);
}
});
}
</script>
</head>
<body>
<h1 style="text-align:center;color:#686868">
Load data from database on page scroll using javascript, ajax and PHP
</h1>
<br><br><br>
<div class="container">
<!-- First Time Load This Div -->
<!-- Start Div Main -->
<div id="main_div_html">
<?php
$query = "SELECT title FROM tbl_country_master limit 0, 20";
$res = mysqli_query($con, $query);
$i = 1;
while($result =mysqli_fetch_array($res))
{
?>
<div class="panel panel-default">
<div class="panel-body"><?php echo $i.". ".$result['title']; ?></div>
</div>
<?php
$i++;
}
?>
</div>
<!-- End Div Main -->
<!-- Hidden Input Set Default Value 20 After Scroll ++ -->
<input type="hidden" id="hid_limit" value="20">
<center><img id="img_load" src="processing.gif" style="margin: 20px auto;width: 25px;" /></center>
<div id="no_more_data" style="display:none;">
<h4 style="text-align:center;color:#686868">No More Data</h4>
</div>
</div>
</body>
</html>
nice tutorial