CREATE TABLE `posts` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `content` text NOT NULL,
  'link' varchar(255) NOT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

3. HTML
In Html structure, we first counting the total number of posts and selecting first 3 posts from posts table. After selecting rows then we loop over it and creating our post structure.
We have created two hidden fields (row and all). First, hidden field with id=”row” store selection index position and another field with id=”all” store the total number of posts. We use both this field in jQuery for displaying new posts.
Also, declared a 
 tag with text Load more. We fetch next posts items when click event occur on it we do it using jQuery.

Completed Code


            

                    

                    

                        
                    More
                

            
Load More
            
    

4. AJAX
Our AJAX file name is getData.php. Here, we storing $_POST[‘row’] to $row variable and set $rowperpage=3, this variable is used to store total number of rows fetch from the table at a time.
Now, we have selection point ($row) and a total number of rows to fetch ($rowperpage), we use both variables to define the limit in SELECT query.
Created an empty string variable ($html) which we use to store our HTML structure. After selecting data from Table we loop over it using while loop. Within the loop, we are creating our posts structure and concatenate it in $html variable.
After initializing $html variable we echo it.
Completed Code
';
    $html .= '
'.$title.'
';
    $html .= '
'.$shortcontent.'
';
    $html .= 'More';
    $html .= '

5. jQuery

We are handling all our scripting operation in script.js file.

When the click event detected in the element with class = “load-more” then we perform our operations.

We first storing row and allcount values in row and allcount variables. Changing row value for finding next row selection position. If row value is less than or equal to allcount then we prepare our AJAX request otherwise, it will reach the end and we remove all posts except first 3 posts.

Our AJAX file is getData.php which we above created within AJAX section.  We send row value as data, in AJAX request and we have change

We are append data of success response after post class last element and again checking that row value that is not greater than allcount value by adding 3 more value on it.

If it’s greater then we change the

Completed Code

$(document).ready(function(){

    // Load more data
    $('.load-more').click(function(){
        var row = Number($('#row').val());
        var allcount = Number($('#all').val());
        var rowperpage = 3;
        row = row + rowperpage;

        if(row  allcount){

                            // Change the text and background
                            $('.load-more').text("Hide");
                            $('.load-more').css("background","darkorchid");
                        }else{
                            $(".load-more").text("Load more");
                        }
                    }, 2000);


                }
            });
        }else{
            $('.load-more').text("Loading...");

            // Setting little delay while removing contents
            setTimeout(function() {

                // When row is greater than allcount then remove all class='post' element after 3 element
                $('.post:nth-child(3)').nextAll('.post').remove();

                // Reset the value of row
                $("#row").val(0);

                // Change the text and background
                $('.load-more').text("Load more");
                $('.load-more').css("background","#15a9ce");
                
            }, 2000);


        }

    });

});

6. CSS

Adding some CSS on HTML design.

Completed Code

.container{
    width: 55%;
    margin: 0 auto;
    border: 0px solid black;
    padding: 10px 0px;
}

/* post */
.post{
    width: 97%;
    min-height: 200px;
    padding: 5px;
    border: 1px solid gray;
    margin-bottom: 15px;
}

.post h1{
    letter-spacing: 1px;
    font-weight: normal;
    font-family: sans-serif;
}


.post p{
    letter-spacing: 1px;
    text-overflow: ellipsis;
    line-height: 25px;
}

/* Load more */
.load-more{
    width: 99%;
    background: #15a9ce;
    text-align: center;
    color: white;
    padding: 10px 0px;
    font-family: sans-serif;
}

.load-more:hover{
    cursor: pointer;
}
/* more link */
.more{
    color: blue;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 16px;
}

7. Conclusion

We have created an another type of pagination which contains Load more element. It is used to load the next number of posts from the table and add it to the last post structure.

When we have displayed all posts from the table and no other left then we changed the text to Hide. Now when this is gets clicked then we remove all of the posts except first 3 posts.

You may also check out my some other similar post –

Pagination using PHP, and

AJAX pagination with jQuery and PHP

If you enjoyed this post, I’d be grateful if you share with your friends or share it on social media.

Thank you.

The post Load more data using jQuery,AJAX, and PHP appeared first on Makitweb.