Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Load more data using jQuery,AJAX, and PHP

In this Tutorial, we are going to create another type of pagination which contains Load more button. This type of pagination you have seen on many websites or in mobile apps.
Within this type of pagination we have a Load more element when it gets clicked by the user then we fetch next list of posts and append it to the last of existing structure.

When we have done show all of the posts from the Table then we change the text from Load more to Hide. When element text is Hide and it gets clicked then we remove all the posts except first 3 posts.

Load more data using jquery,ajax, and php

Demo  Download


  1. Table structure
  2.  Configuration
  3.  HTML
  4.  AJAX
  5.  jQUery
  6.  CSS
  7. Conclusion

1. Table structure

We are only using one Table in the tutorial example.

posts table

CREATE TABLE `posts` (
  `title` varchar(100) NOT NULL,
  `content` text NOT NULL,
  'link' varchar(255) NOT NULL,

2. Configuration

Create a new PHP file (config.php). This file contains database connection. In this tutorial, we are using a tutorial database.

Completed Code


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

Load more data using jQuery,AJAX, and PHP


Load More


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 .= '


'; $html .= '


'; $html .= 'More'; $html .= '
'; } echo $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

text from Load more to Loading.. in beforeSend. When AJAX request is successful then we delayed it for 2 seconds for displaying data on the screen.

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

text to Hide and change its background color otherwise again change it to Load more.

Completed Code


    // Load more data
        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("Load more");
                    }, 2000);


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

                // When row is greater than allcount then remove all class='post' element after 3 element

                // Reset the value of row

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





6. CSS

Adding some CSS on HTML design.

Load more data using jquery,ajax, and php

Completed Code

    width: 55%;
    margin: 0 auto;
    border: 0px solid black;
    padding: 10px 0px;

/* 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 */
    width: 99%;
    background: #15a9ce;
    text-align: center;
    color: white;
    padding: 10px 0px;
    font-family: sans-serif;

    cursor: pointer;
/* more link */
    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.

Related Post

PHP Conditional statements
Username Availability checker using AJAX
Tabs using HTML,CSS and jQuery
AJAX file upload using jQuery and PHP

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

This post first appeared on Makitweb, please read the originial post: here

Share the post

Load more data using jQuery,AJAX, and PHP


Subscribe to Makitweb

Get updates delivered right to your inbox!

Thank you for your subscription