Log In

Email:
Password:
Keep me logged in

Forgot Password

Email:

wcet, w.c.e.t., designs, william, thomas



Archives
Categories
Sponsored Links


Load More Button
PHP Ajax jQuery JavaScript
Thursday, July 28, 2011 | Browse Category |

Instead of pagination, this code contains the 'Load More' button, which loads a page of content from the bottom.







Related tutorial: Load more posts automatically like Twitter.
MySQL:
Create a table in your database:
CREATE TABLE `content` (
   `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
   `content` TEXT NOT NULL
) ENGINE = MYISAM ;
INSERT INTO content VALUES ('', 'What\'s up?'), ('', 'Now at home...'), ('', 'Off to the mall'), ('', 'Going to the movies...'), ('', 'Just got home'), ('', 'It\'s hot. I wanna go swimming!!!'), ('', 'Bout to watch my favorite show'), ('', 'Going to dinner with family'), ('', 'Bout to graduate today!!!'), ('', 'Excited for first day of college tomorrow!');
PHP:
settings.php, file in which all the important settings will be located.
(Modify these to your settings)
<?php

//CONNECTS TO YOUR DATABASE (MODIFY TO YOUR SETTINGS)
$c mysql_connect("server""username""password");
$db mysql_select_db("your_database"$c);
$table 'content';

?>
results.php, where the results will appear
<?php

include("settings.php");

//PAGE NUMBER, RESULTS PER PAGE, AND OFFSET OF THE RESULTS
if($_GET["page"]){
    
$pagenum $_GET["page"];
} else {
    
$pagenum 1;
}

$rowsperpage 3//MAXIMUM RESULTS PER PAGE
$offset = ($pagenum 1) * $rowsperpage//WHERE THE RESULTS START FROM

//FOR RESULTS OF THE PAGE
$q mysql_query("SELECT * FROM $table ORDER BY id LIMIT $offset, $rowsperpage");

$total_q mysql_query("SELECT * FROM $table"); //FOR ALL RESULTS
$total_nums mysql_num_rows($total_q); //TOTAL NUMBER OF RESULTS
$total_pages ceil($total_nums/$rowsperpage); //NUMBER OF PAGES

//IF PAGE NUMBER IS WITHIN THE FIRST AND LAST PAGES...
if($pagenum>=1&&$pagenum<=$total_pages)
{
    
//THE RESULTS WILL APPEAR
    
while($r=mysql_fetch_array($q))
    {
        
$content $r["content"];
        echo 
'<table class="comment"><tr><td>'.$content.'</td></tr></table>';
    }
} else {
    
//OTHERWISE, THE PAGE WILL REDIRECT TO THE FIRST PAGE OF RESULTS
    
header("Location: results.php");
}

?>
Ajax/jQuery/JavaScript:
view.php, main file which includes the jQuery, CSS, and HTML
<?php

include("settings.php");

$rowsperpage 3//MAXIMUM RESULTS PER PAGE
$total_q mysql_query("SELECT * FROM $table"); //FOR ALL RESULTS
$total_nums mysql_num_rows($total_q); //TOTAL NUMBER OF RESULTS
$total_pages ceil($total_nums/$rowsperpage); //NUMBER OF PAGE FOR RESULTS

?>

<html>
<head>

<script src="http://wcetdesigns.com/assets/javascript/jquery.js"></script>
<script>

$(function(){
   var page = 1;
   var pages = $("#pages").val(); //TOTAL NUMBER OF PAGES

   $("#content").load("results.php");

   //WHEN THE 'LOAD MORE' BUTTON IS PRESSED
   $("#loadmore").live("click", function(){
     var next = page+=1;

     $.get("results.php?page="+next, function(data){
       if(next==pages){
         $("#loadmore").remove(); //IF ALL PAGES ARE LOADED, THE BUTTON WILL BE REMOVED
       }

       $("#content").append(data); //LOADS THE NEW PAGE OF CONTENT UNDER THE REST
     });
   });
});
</script>
<style>
#loadmore {
   background: #ffffff;
   border: 1px #32baed solid;
   color: #32baed;
   font: 100% Century Gothic;
   font-size: 14px;
}
#loadmore:hover {
   background: #32baed;
   border: 1px #12495d solid;
   color: #ffffff;
   cursor: pointer;
   font: 100% Century Gothic;
   font-size: 14px;
}
#loadmore:active {
   background: #12495d;
   border: 1px #12495d solid;
   color: #ffffff;
   font: 100% Century Gothic;
   font-size: 14px;
}

</style>
</head>
<body>

<?php

//SHOWS THE CONTENT
echo '<div id="content"></div>';

//SHOWS THE BUTTON ONLY IF THE ALL CONTENT WOULD NOT FIT ON ONE PAGE
if($total_nums>$rowsperpage){
    echo 
'<input id="loadmore" type="button" value="Load More"> <input id="pages" type="hidden" value="'.$total_pages.'">';
}

?>

</body>
</html>

 44    15
17,141     2,658




(Optional)

(Optional in case you want a reply)



5 Comments
Mr.Geez
Hi, what if I want to set each comment prepended? like this one: What's up? Now at home... Off to the mall [Load More] should be: Off to the mall Now at home... What's up? [Load More] Thanks....


Sunday, August 4, 2013 at 7:19:15 PM
walktru
Hi, what if I want the load more button to be only seen when the rows from the database is more than 3? Sorry if this question seems noob but I'm really a newbie programmer who starves for knowledge.... Thanks.


Wednesday, May 8, 2013 at 10:44:44 AM
Surinder Singh
Thank you for an excellent, well detailed tutorial. The only question I have that is it possible to load the results from the same page (probably in a separate div or something)? I have to make it work in Drupal and the best thing to do would be putting everything on one page.


Tuesday, March 26, 2013 at 10:34:36 AM
aqqqq
qqqq


Thursday, January 31, 2013 at 6:20:24 PM
ade arwans
demo please...


Friday, July 20, 2012 at 9:36:34 PM