Load More Data using AJAX and jQuery in PHP/MySQLi

July 5, 2020
PHP
load more data php ajax

How to Load More Data using AJAX and jQuery in PHP/MySQLi

This tutorial will teach you how to load more data using ajax and jquery in PHP and MySQLi. It creates a load more button that loads additional data using AJAX and jQuery.

Note: Scripts and CSS used in this tutorial are hosted; therefore, you need an internet connection for them to work.

Creating a Database

The first step is to create our database.

1. Open phpMyAdmin.

2. Click databases, create a database and name it as testing.

3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `tutorial` (
  `tutorialid` INT(11) NOT NULL AUTO_INCREMENT,
  `title` VARCHAR(150) NOT NULL,
  `link` VARCHAR(150) NOT NULL,
PRIMARY KEY(`tutorialid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 

load more data using ajax

Creating a Connection

Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as conn.php.

<?php
 
$conn = mysqli_connect("localhost","root","","testing");
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
 
?>

index.php

Next step is to create our initial data from database then our load more button. Notice that we set our initial data to fetch only 2 rows from our database.

<!DOCTYPE html>  
<html>  
<head>  
      <title>Load More Data using Ajax/Jquery in PHP/MySQLi</title>  
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
</head>  
<body>  
      <div class="container">   
          <div>  
              <h2 align="center" >Load More Data using Ajax/Jquery in PHP/MySQLi</h2>
              <div style="height:10px;"></div>
              <h4>My Tutorials and Source Codes</h4>  
              <div id="loadtable">  
                  <?php
                    $lastid='';
                    include('conn.php');
                    $query=mysqli_query($conn,"select * from tutorial order by tutorialid asc limit 2");
                    while($row=mysqli_fetch_array($query)){
                        ?>
                        <div class="row">
                            <div class="col-lg-12">
                                <a href="<?php echo $row['link']; ?>"><?php echo $row['title']; ?></a>
                            </div>
                        </div>
                        <?php
                      $lastid=$row['tutorialid'];
                    }
 
                  ?>
                  <div id="remove">
                  <div style="height:10px;"></div>
                  <div class="row">
                      <div class="col-lg-12">
                      <button type="button" name="loadmore" id="loadmore" data-id="<?php echo $lastid; ?>" class="btn btn-primary">See More</button>
                      </div>
                  </div>
                  </div>  
                </div>  
          </div>  
      </div>
 
<script src="custom.js"></script>  
</body>  
</html>

custom.js

This contains our AJAX and jQuery codes that fetch additional data from our database.

$(document).ready(function(){  
      $(document).on('click', '#loadmore', function(){  
           var lastid = $(this).data('id');  
           $('#loadmore').html('Loading...');  
           $.ajax({  
                url:"load_data.php",  
                method:"POST",  
                data:{
                    lastid:lastid,
                },  
                dataType:"text",  
                success:function(data)  
                {  
                     if(data != '')  
                     {  
                          $('#remove').remove();  
                          $('#loadtable').append(data);  
                     }  
                     else  
                     {  
                          $('#loadmore').html('No more data to show');  
                     }  
                }  
           });  
      });  
 });

load_data.php

Lastly, we create our code in fetching additional data from our database.

<?php  
     sleep(1);  
     include('conn.php');
     if(isset($_POST['lastid'])){
          $lastid=$_POST['lastid'];
          $query=mysqli_query($conn,"select * from tutorial where tutorialid > '$lastid' order by tutorialid asc limit 2");
 
          if(mysqli_num_rows($query) > 0){  
          while($row = mysqli_fetch_array($query)){  
               ?>
                    <div class="row">
                         <div class="col-lg-12">
                              <a href="<?php echo $row['link']; ?>"><?php echo $row['title']; ?></a>
                         </div>
                    </div>
               <?php
               $lastid=$row['tutorialid'];
          }
          ?>
          <div id="remove">
          <div style="height:10px;"></div>   
          <div id="remove_row" class="row">
               <div class="col-lg-12">
                    <button type="button" name="loadmore" id="loadmore" data-id="<?php echo $lastid; ?>" class="btn btn-primary">See More</button>
               </div>
          </div>
          </div> 
          <?php 
          }  
     }
?>

That ends this tutorial. If you have any questions or comments, feel free to write it below or message me. Happy Coding!

Download Here
Facebook Comments

Leave a Reply

Your email address will not be published.