jQuery Facebook Like Infinite Scroll Pagination in PHP MySQLi

Today, We want to share with you jQuery Facebook Like Infinite Scroll Pagination in PHP MySQLi.
In this member we will show you jQuery Infinite Scroll using PHP MySQLi, hear for auto load more data on page scroll with jquery & php we will give you demo and example for implement.
In this member, we will learn about Load Data on Page Scroll from MySQLi Database using jQuery Ajax PHP with an example.

jQuery Facebook Like Infinite Scroll Pagination in PHP MySQLi

There are the Following The simple About jQuery Facebook Like Infinite Scroll Pagination in PHP MySQLi Full Information With Example and source code.

As I will cover this Post with live Working example to develop PHP – Infinite Scroll Pagination using JQuery Ajax Example, so the some major files and Directory structures for this example is following below.

  • index.php
  • db.php
  • tbl_members.sql
  • loadMoreData.php
Read Also:  How to Create html to pdf using php | Convert HTML to PDF using PHP

Infinite Scroll Pagination Database Connection

db.php

Database Script

Table structure for table `tbl_members`

CREATE TABLE IF NOT EXISTS `tbl_members` (
`id` int(11) NOT NULL,
  `title` varchar(100) NOT NULL,
  `link` varchar(255) NOT NULL,
  `content` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=latin1;

--
-- Indexes for table `tbl_members`
--
ALTER TABLE `tbl_members`
 ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for table `tbl_members`
--
ALTER TABLE `tbl_members`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=23;

index.php

This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.php.



<title></title>


body {
    font-family: Arial;
    background: #e9ebee;
    font-size: 0.9em;
}

.member-wall {
    background: #FFF;
    border: #e0dfdf 1px solid;
    padding: 20px;
    border-radius: 5px;
    margin: 0 auto;
    width: 500px;
}

.member-item {
    padding: 10px;
    border: #c6000 1px solid;
    border-radius: 5px;
    margin-bottom: 30px;
}

.member-title {
    color: #3d3d3d;
}

.ajax-loader {
    display: block;
    text-align: center;
}
.ajax-loader img {
    width: 50px;
    vertical-align: middle;
}



    <div class="member-wall">
        <div id="member-list">
            
            <input type="hidden" name="total_count" id="total_count"
            value="" />

            
                <div class="member-item" id="">
                    <p class="member-title"></p>
                    <p></p>
                </div>
                
            </div>
            <div class="ajax-loader text-center">
                <img src="LoaderIcon.gif"> Loading more members...
            </div>
    </div>


$(document).ready(function(){
        windowOnScroll();
});
function windowOnScroll() {
       $(window).on("scroll", function(e){
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
            if($(".member-item").length < $("#total_count").val()) {
                var memIdLast = $(".member-item:last").attr("id");
                //loadMoreData(memIdLast);
            }
        }
    });
}

function loadMoreData(memIdLast) {
       $(window).off("scroll");
    $.ajax({
        url: 'loadMoreData.php?memIdLast=' + memIdLast,
        type: "get",
        beforeSend: function ()
        {
            $('.ajax-loader').show();
        },
        success: function (data) {
        	   setTimeout(function() {
                $('.ajax-loader').hide();
            $("#member-list").append(data);
            windowOnScroll();
        	   }, 1000);
        }
   });
}



Load Recent Members using PHP

loadMoreData.php

<?php
require_once('db.php');

$memIdLast = $_GET['memIdLast'];
$memSqlQQ = "SELECT * FROM tbl_members WHERE id 
    <div class="member-item" id="">
        <p class="member-title">  </p>
        <p></p>
    </div>
    

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  Woocommerce Product publish, update and delete hooks

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.


I hope you get an idea about Ajax Infinite Scroll Using jQuery, PHP and MySQL.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this member, don’t forget to share.