Load more data when scroll down is the common problem. Almost every developer faces this problem on how to get dynamic data on the page scroll. So in this post, I am going to show you how you can make a simple page that gets more data on page scroll with the help of PHP and JQuery Ajax.
In this example, I am going to use Bootstrap 4. You can create HTML as per your needs. The given example fetch 15 records per request from the database.
Remember this example based on PHP, MySql, and JQuery. To load data on page scroll I create a simple plugin that is based on JQuery.
Download Plugin.
Click on a file name to download plugin js.scrollPagination.js. Add below lines into your head tag or just before close the body tag </body>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js.scrollPagination.js"></script>
The plugin initialization code is given below. In the below function loadScrollData there are two parameters. The first parameter tells the plugin from where to fetch data default is ZERO (0). And the second parameter is the options that are listed below.
<script>
$(document).loadScrollData(0, {
limit: 15,
listingId: "#get-list-view",
loadMsgId: '#load-msg',
ajaxUrl: 'ajax/listing-data.ajax.php',
loadingMsg: '<div class="alert alert-warning p-1 text-center"><i class="fa fa-fw fa-spin fa-spinner"></i>Please Wait...!</div>',
loadingSpeed: 10
});
</script>
The HTML structure that is used in this example is given below.
<div id="get-list-view"></div>
<div id="load-msg"></div>
Plugin options detail is given below.
| Option Name | Default | Description |
| limit | 30 (int) | On scroll down how many records
fetch from the database. |
| listingId | ” (empty) | Pass container ID where you want to
show your fetched records. |
| loadMsgId | ” (empty) | On page scroll down before data load
message appears. Pass message container
ID to display the message. |
| ajaxUrl | ” (empty) | Where you want to send ajax request
pass file URL. |
| loadingMsg | HTML | You can pass the HTML code here to style
your load message. |
| loadingSpeed | (int) 10 | The default value is 10. you can set in milliseconds. |
How to handle on the server?
As you know PHP is a server-side language you can get ajax parameters into your ajax file. How to write a query in MYSQL is given below.
| getData | ok |
| start | 0 |
| limit | Define by user [Default 30] |
To connect with Database create a file with the name of config.php and write below code init.
<?php
include_once('Database.php');
define('DB_NAME', 'test');
/** MySQL database username */
define('DB_USER', 'root');
/** MySQL database password */
define('DB_PASSWORD', '');
/** MySQL hostname */
define('DB_HOST', 'localhost');
$dsn = "mysql:dbname=".DB_NAME.";host=".DB_HOST."";
$pdo = "";
try {
$pdo = new PDO($dsn, DB_USER, DB_PASSWORD);
}catch (PDOException $e) {
echo "Connection failed: " . $e->getMessage();
}
$db = new Database($pdo);
?>
<?php
include_once('../config.php');
if(isset($_POST['getData']) and $_POST['getData']=="ok"){
$sqlQuery = 'SELECT * FROM TB_NAME LIMIT "'.$_POST["start"].'", "'.$_POST["limit"].'" ';
}
foreach($result as $val){
//Render your HTML code here.
}