Programming

Data Load While Page Scroll with jQuery PHP and MySQL

Written by     on    31 Aug, 2019     1      

Look on files structure used for this tutorial

db_con.php
getdata.php
index.php

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;

Database Configuration (db_con.php)

<?php
$con = mysqli_connect("localhost", "root", "","demo_load_data");
// Check connection
if($con === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>

Load Data from Database (getData.php)

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

HTML & PHP Code (index.php)

 <?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>

DEMO

Tags :  AjaxHow to Load data on page scroll from mysql database using jquery ajax phpHow to load data on page scroll using jqueryHow to load data on scrollHow to load data on scroll in jqueryHow to load data on scroll in phpInfinite Scroll TutorialjQueryjquery lazy load content on scrolljQuery load more data on scrollload content while scrolling with jquery phpLoad data on page scroll from mysql database using jquery ajax phpLoad More Data on Page Scroll using Ajax Jquery PHPPHPProgramming

Comments [1]

Write a Reply or Comment

Your email address will not be published. Required fields are marked *

Submit Guest Post Content
Are you a passionate writer or expert in our categories? You can submit content on our website. Before writing content, you should read our guest posting guidelines.
Read More
NEVER MISS A POST
Get the latest posts and awesome deals delivered to your inbox for free. 100% Privacy.