Load more results from database using jquery & ajax

Sep-25-2014 in jQuery, PHP No comments

Hi, today in this post, I will show how to do load more results from database using jquery & ajax instead of showing pagination links on your website you can display “Load More Post” button without refreshing the page. This technique is not new, it based data loading technique at Facebook, Twitter or some other website.

Here, I will have mainly Two web page index.php and more_post.php. First index.php page will load and displayed the list post from database. When user click “Load More Post” button, it will call event click $(‘#more’).click(function(){} and it will send ajax request to more_post.php page using $.ajax({}). This process will return results and append into <UL> on index.php page until the last record displayed.

load more results using jquery and php

First create a database table “tbl_post”. This table contains id (primary key), title(text) and post(text).

 

Configuration connection database:

I will create a dbConfig.php to have a database connection.

 

The above code is very simple. using PHP to connect to MySQL mysql_connect() function.

Index Page

In this page contains simple HTML and PHP code. Displaying results from the tbl_post table in descending order and records limit to 2 and “Load More Post” button.

 Javascript Code

Contains javascipt code. $(‘#more’).click(function(){}. Using get_last_post_display=$(‘li:last’).attr(‘id’); calling more button last post id field value. when user clicks on “Load More Post” button, it will to display image “<img src=”ajax-loader.gif” >” to indicate data is loading.

 more_post.php

The above code similar to index page but the query and fetch the records form the tbl_post table i add where id < last post id.

 CSS

Add Your Comment