Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- #results-container {
- background-color: red;
- width: 350px;
- height: 300px;
- margin: auto;
- overflow-y: auto;
- }
- </style>
- <script>
- document.addEventListener('DOMContentLoaded',function(){
- var start = 0; //<--The starting location, 0 means to start showing records at the beginning of the database table
- var limit = 10;//<--Show 10 records every time you trigger the scrollTrigger function
- getData();
- //Scrolling to the bottom in the results-container shows more records
- document.querySelector('#results-container').addEventListener('scroll',scrollTrigger);
- function scrollTrigger(e){
- var resultsContainer = e.currentTarget;
- if (Math.ceil(resultsContainer.scrollTop) + resultsContainer.clientHeight >= resultsContainer.scrollHeight) {
- getData();
- }
- }
- //
- function getData(){
- var xhr= new XMLHttpRequest();
- xhr.onreadystatechange = function(){
- if(xhr.readyState == 4){
- document.getElementById('results-container').insertAdjacentHTML('beforeend', xhr.responseText);
- //<Allow JS and remove previous appended JS of the requested page>
- Array.prototype.forEach.call(
- document.querySelectorAll('#results-container script'),
- function(script){
- script.parentNode.removeChild(script)
- eval(script.innerHTML)
- }
- )
- //</Allow JS and remove previous appended JS of the requested page>
- }
- }
- var formData= new FormData();
- formData.append('start',start);
- formData.append('limit',limit);
- xhr.open('POST','data.php')
- xhr.send(formData);
- }
- });
- </script>
- </head>
- <body>
- <div id="results-container"></div>
- </body>
- </html>
- <?php
- $servername='localhost';
- $username='JD';
- $password='1234';
- $db_name= 'test';
- $connect = new mysqli($servername,$username,$password,$db_name);
- $start = $connect->real_escape_string($_POST['start']);
- $limit = $connect->real_escape_string($_POST['limit']);
- $query = "SELECT*FROM users LIMIT $start, $limit";
- $result= $connect->query($query);
- ?>
- <style>
- #number{
- background-color: gold;
- color: black;
- border-radius: 100%;
- padding: 5px;
- }
- h2{
- display: inline-block;
- }
- </style>
- <?php while($row = $result->fetch_assoc()) { ?>
- <h2 id='number' ><?php echo $row['user_id']; ?></h2>
- <h2><?php echo $row['username']; ?></h2>
- <p><?php echo $row['password']; ?></p>
- <?php } ?>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement