Auto Load More Data Ketika Scroll

Pada kesempatan kali ini saya akan membuat Auto Load More Data Ketika Scroll Menggunakan AjaxJquery & PHP. Dimana load more ini akan menampilkan data ketika kita melakukan scroll pada website. Biasanya kasus ini dipakai untuk website e-commerce dala menampilkan data produk.  Untuk memulainya, pastikan teman-teman sudah membuat data yang akan kalian tampilkan dan jika sudah maka tahap pertama teman-teman buat file index.php seperti script di bawah ini.

<!DOCTYPE html>
<html>
 <head>
  <title>Membuat Auto Load More Data Ketika Scroll Menggunakan AjaxJquery & PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <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.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <div class="container">
   <h2 align="center">Membuat Auto Load More Data Ketika Scroll Menggunakan AjaxJquery & PHP</a></h2>
   <br />

    //untuk load more
   <div id="load_data"></div>
   <div id="load_data_message"></div>
  </div>
 </body>
</html>

Masih didalam file yang sama teman-teman buat satu fungsi untuk dapat menampilkan data dari database menggunakan ajax dan kemudian buat satu event scroll seperti pada script di bawah ini.

<script>
$(document).ready(function(){
 var limit = 7;
 var start = 0;
 var action = 'inactive';
 function load_country_data(limit, start){
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{limit:limit, start:start},
   cache:false,
   success:function(data){
    $('#load_data').append(data);
    if(data == ''){
     $('#load_data_message').html("<button type='button' class='btn btn-info'>No Data Found</button>");
     action = 'active';
    }else{
     $('#load_data_message').html("<button type='button' class='btn btn-warning'>Please Wait....</button>");
     action = "inactive";
    }
   }
  });
 }

 if(action == 'inactive'){
  action = 'active';
  load_country_data(limit, start);
 }
 $(window).scroll(function(){
  if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive'){
   action = 'active';
   start = start + limit;
   setTimeout(function(){
    load_country_data(limit, start);
   }, 1000);
  }
 });
 
});
</script>

Jika sudah maka tahap selanjutnya teman-teman buat file baru dengan nama fetch.php untuk membuat perintah ambil data ke database seperti di bawah ini.

<?php
if(isset($_POST["limit"], $_POST["start"])){
 $connect = mysqli_connect("localhost", "dumet", "school", "test");
 $query = "SELECT * FROM produk ORDER BY id DESC LIMIT ".$_POST["start"].", ".$_POST["limit"]."";
 $result = mysqli_query($connect, $query);
 while($row = mysqli_fetch_array($result)){
  echo '
  <h3>'.$row["nama_produk"].'</h3>
  <p>'.$row["keterangan"].'</p>
  <p class="text-muted" align="right">Rp '.$row["harga_jual"].'</p>
  <hr />
  ';
 }
}
?>

Jika sudah selesai maka tampilannya akan seperti pada gambar di bawah ini.

Demikian artikel tentang Membuat Auto Load More Data Ketika Scroll Menggunakan AjaxJquery & PHP. Semoga dapat bermanfaat dan selamat mencoba.