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

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.

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;
}



    

        

            
            <input type="hidden" name="total_count" id="total_count"
            value="" />

            
                <div class="member-item" id="">
                    

                    

                
                
            
            

                 Loading more members...