Advertisement
Guest User

Untitled

a guest
Sep 15th, 2018
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.30 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #results-container {
  6. background-color: red;
  7. width: 350px;
  8. height: 300px;
  9. margin: auto;
  10. overflow-y: auto;
  11. }
  12. </style>
  13.  
  14.  
  15. <script>
  16. document.addEventListener('DOMContentLoaded',function(){
  17.  
  18. var start = 0; //<--The starting location, 0 means to start showing records at the beginning of the database table
  19. var limit = 10;//<--Show 10 records every time you trigger the scrollTrigger function
  20.  
  21. getData();
  22.  
  23. //Scrolling to the bottom in the results-container shows more records
  24. document.querySelector('#results-container').addEventListener('scroll',scrollTrigger);
  25.  
  26. function scrollTrigger(e){
  27. var resultsContainer = e.currentTarget;
  28. if (Math.ceil(resultsContainer.scrollTop) + resultsContainer.clientHeight >= resultsContainer.scrollHeight) {
  29. getData();
  30. }
  31. }
  32. //
  33.  
  34. function getData(){
  35. var xhr= new XMLHttpRequest();
  36. xhr.onreadystatechange = function(){
  37. if(xhr.readyState == 4){
  38. document.getElementById('results-container').insertAdjacentHTML('beforeend', xhr.responseText);
  39.  
  40. //<Allow JS and remove previous appended JS of the requested page>
  41.  
  42. Array.prototype.forEach.call(
  43. document.querySelectorAll('#results-container script'),
  44. function(script){
  45. script.parentNode.removeChild(script)
  46. eval(script.innerHTML)
  47. }
  48. )
  49.  
  50. //</Allow JS and remove previous appended JS of the requested page>
  51.  
  52. }
  53. }
  54.  
  55. var formData= new FormData();
  56.  
  57. formData.append('start',start);
  58. formData.append('limit',limit);
  59.  
  60. xhr.open('POST','data.php')
  61. xhr.send(formData);
  62.  
  63. }
  64.  
  65. });
  66. </script>
  67. </head>
  68. <body>
  69.  
  70. <div id="results-container"></div>
  71.  
  72. </body>
  73. </html>
  74.  
  75. <?php
  76. $servername='localhost';
  77. $username='JD';
  78. $password='1234';
  79. $db_name= 'test';
  80.  
  81. $connect = new mysqli($servername,$username,$password,$db_name);
  82.  
  83. $start = $connect->real_escape_string($_POST['start']);
  84. $limit = $connect->real_escape_string($_POST['limit']);
  85.  
  86. $query = "SELECT*FROM users LIMIT $start, $limit";
  87.  
  88. $result= $connect->query($query);
  89.  
  90. ?>
  91. <style>
  92. #number{
  93. background-color: gold;
  94. color: black;
  95. border-radius: 100%;
  96. padding: 5px;
  97. }
  98.  
  99. h2{
  100. display: inline-block;
  101. }
  102.  
  103. </style>
  104.  
  105. <?php while($row = $result->fetch_assoc()) { ?>
  106.  
  107. <h2 id='number' ><?php echo $row['user_id']; ?></h2>
  108. <h2><?php echo $row['username']; ?></h2>
  109. <p><?php echo $row['password']; ?></p>
  110.  
  111. <?php } ?>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement