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.

Auto Load More Data Ketika Scroll

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

7 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat