Untitled
unknown
javascript
2 years ago
4.6 kB
3
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" /> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- <div class="row"> --> <div id="page"> <div class="listItems"> <!== list data here --!> <div class="card" style="margin: 20px"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, dicta? Illum velit et dolor quam esse recusandae voluptates laboriosam porro voluptatem necessitatibus repellat, ullam, optio, cupiditate ducimus. Modi, odio? Consectetur! </p> </div> <div class="card" style="margin: 20px"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, dicta? Illum velit et dolor quam esse recusandae voluptates laboriosam porro voluptatem necessitatibus repellat, ullam, optio, cupiditate ducimus. Modi, odio? Consectetur! </p> </div> <div class="card" style="margin: 20px"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, dicta? Illum velit et dolor quam esse recusandae voluptates laboriosam porro voluptatem necessitatibus repellat, ullam, optio, cupiditate ducimus. Modi, odio? Consectetur! </p> </div> <div class="card" style="margin: 20px"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, dicta? Illum velit et dolor quam esse recusandae voluptates laboriosam porro voluptatem necessitatibus repellat, ullam, optio, cupiditate ducimus. Modi, odio? Consectetur! </p> </div> <div class="card" style="margin: 20px"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, dicta? Illum velit et dolor quam esse recusandae voluptates laboriosam porro voluptatem necessitatibus repellat, ullam, optio, cupiditate ducimus. Modi, odio? Consectetur! </p> </div> <div class="card" style="margin: 20px"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, dicta? Illum velit et dolor quam esse recusandae voluptates laboriosam porro voluptatem necessitatibus repellat, ullam, optio, cupiditate ducimus. Modi, odio? Consectetur! </p> </div> <div class="card" style="margin: 20px"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, dicta? Illum velit et dolor quam esse recusandae voluptates laboriosam porro voluptatem necessitatibus repellat, ullam, optio, cupiditate ducimus. Modi, odio? Consectetur! </p> </div> <div class="card" style="margin: 20px"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, dicta? Illum velit et dolor quam esse recusandae voluptates laboriosam porro voluptatem necessitatibus repellat, ullam, optio, cupiditate ducimus. Modi, odio? Consectetur! </p> </div> </div> <div class="lastPageItems" next="1"></div> </div> <!-- </div> --> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script> // $(document).ready(function () { // console.log("hello world data"); $("div#page").scroll(function (e) { if ($(".lastPageItems").isOnScreen()) { // The element is visible, do something nextPage = $(".lastPageItems").attr("next"); // load next data here & append to $('.listItems') // doLoadData(nextPage); alert(nextPage); console.log("panggil data lagi"); // console.log("panggil data berikutnya"); } }); // }); function doLoadData(params) { console.log("load data data data"); } </script> </body> </html>