In this post, we will see how we can load more post details list with the help of Ajax. This technique helps us to load the page quickly. At the initial page load time have some limited post details only. Whenever the show more button click it will load specified list of the post at the end of the post list container. Show more method is very useful because the data is loaded without loading the page.
Using MySQL select query with limit option help us to get the required count of the post from Database. The limit option has two keys. One is starting position of record position in the total record. The second one is a count of record wants to get from the selected list.
Step 1: Define a post display area with an initial set of records using PHP and MySQL with a limit option. Select query with limit option use to fetch no. of rows from database.
|
1 |
SELECT * FROM TABLE_NAME LIMIT START_POINT,ROWS_COUNT; |
html veiw page format
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="post-data-list"> <?php //get rows query $query = mysqli_query($con, "SELECT * FROM li_ajax_post_load ORDER BY post_id DESC LIMIT 0,3"); //number of rows $rowCount = mysqli_num_rows($query); if($rowCount > 0){ while($row = mysqli_fetch_assoc($query)){ $tutorial_id = $row['post_id']; ?> <div class="li-post-group"> <h2 class="li-post-title"><?php echo ucfirst($row["post_title"]); ?></h2> <p class="li-post-desc"><?php echo ucfirst($row["post_desc"]); ?></p> </div> <?php } } ?> </div> <button class="show-more" type="button"> <span class="load-post" title="More posts">Show more</span> </button> |
Step 2: Write an Ajax script to get the records from Database and append the response data into post display area.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$showPostFrom = 0; //Starting position $showPostCount = 3; //Show records limit $(document).on('click','.show-more',function(){ $showPostFrom += $showPostCount; $('.load-post').html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>Loading...'); $.ajax({ type:'POST', url:'ajax_more.php', data:{ 'action':'showPost', 'showPostFrom':$showPostFrom, 'showPostCount':$showPostCount }, success:function(data){ if(data != ''){ $('.load-post').html('Show More'); $('.post-data-list').append(data); }else{ $('.show-more').hide(); } } }); |
Step 3: Define a request handling PHP script for getting the records and response for the request.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php require_once('../connections/mysqli_connect.php'); $actionName = $_POST["action"]; if($actionName == "showPost"){ $showPostFrom = $_POST["showPostFrom"]; $showPostCount = $_POST["showPostCount"]; //get rows query $query = "SELECT * FROM li_ajax_post_load ORDER BY post_id DESC LIMIT ".$showPostFrom.",".$showPostCount; $result = mysqli_query($con, $query); //number of rows $rowCount = mysqli_num_rows($result); if($rowCount > 0){ while($row = mysqli_fetch_assoc($result)){ $tutorial_id = $row["post_id"]; ?> <div class="li-post-group"> <h2 class="li-post-title"><?php echo ucfirst($row["post_title"]); ?></h2> <p class="li-post-desc"><?php echo ucfirst($row["post_desc"]); ?></p> </div> <?php } ?> <?php } } ?> |
