jQuery滾動加載更多數據而不加載更多數據

Question

我正在使用jQuery加載更多數據滾動，當我單擊類別鏈接時，它將根據我單擊的類別對數據進行排序，效果很好。 它僅加載前六個，如何解決此問題。

index.php
<a href="index.php?where=category1">Category</a>

<div class="container"> 
        <div class="row" id="results"></div>    
        <div id="loader_image" align="center">
            <img src="loader.gif" alt="" width="50"> 
        </div>
        <div id="loader_message" align="center"></div>          
</div>


<script type="text/javascript">
    //For The Scroll
    var busy = false;
    var limit = 6
    var offset = 0;
    var where = '<?php if(isset($_GET["where"])) {echo $_GET['where'];} else {echo ' ';} ?>';

    function displayRecords(lim, off, where) {
        $.ajax({
          type: "GET",
          async: false,
          url: "<?php echo(link);?>getrecords.php",
          data: "limit=" + lim + "&offset=" + off + "&where=" + where,
          cache: false,
          beforeSend: function() {
            $("#loader_message").html("").hide();
            $('#loader_image').show();
          },
          success: function(html) {
            $("#results").append(html);
            $('#loader_image').hide();
            if (html == "") {
              $("#loader_message").html('<button class="btn btn-default" type="button">No more records.</button>').show()
            } else {
              // $("#loader_message").html('<button class="btn btn-default" type="button">Loading please wait...</button>').show();
              $('#loader_image').show();

            }
            window.busy = false;
          }
        });
    }

    $(document).ready(function() {
        // start to load the first set of data
        if (busy == false) {
          busy = true;
          // start to load the first set of data
          displayRecords(limit, offset, where);
        }


        $(window).scroll(function() {
          // make sure u give the container id of the data to be loaded in.
          if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {
            busy = true;
            offset = limit + offset;
            where = '<?php if(isset($_GET["where"])) {echo $_GET['where'];} else {echo ' ';} ?>';

            // this is optional just to delay the loading of data
            setTimeout(function() { displayRecords(limit, offset, where); }, 500);

            // you can remove the above code and can use directly this function
            // displayRecords(limit, offset);

          }
        });
      });
</script>




getrecords.php

$where = '';
    if(isset($_GET['where'])){
        $search = str_replace('-',' ', $_GET['where']);
        $where .= "WHERE category LIKE '%$search%'";
    }

$limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 6;
$offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;

$sql = "SELECT * FROM users {$where} ORDER BY id ASC LIMIT $limit OFFSET $offset";
try {
      $stmt = $user->runQuery($sql);
      $stmt->execute();
      $results = $stmt->fetchAll();
} catch (Exception $ex) {
    echo $ex->getMessage();
}
if (count($results) > 0) {
  foreach ($results as $res) {
?>

        <div class="col-sm-4 my-4 text-center">
              <div class="card">
                  <img class="rounded-circle img-fluid d-block mx-auto" src="http://placehold.it/200x200">
                  <h3><?php echo ucwords($res['name']); ?></h3>

                  <small><?php echo $res['category']; ?></small>
              </div>
        </div>

<?php   
  }
}
?>  

見下面預覽它的問題圖像

Answer 1

如果從未刪除加載圖標，請檢查控制台是否有任何錯誤。 您正在設置要在beforeSend函數中顯示的加載圖標，但ajax處理程序中沒有error屬性。

刪除$("#results").append(html); 從success: function(html) { .. }的頂部開始success: function(html) { .. }並將其移至if語句的else部分。 您這樣做是為了避免您無緣無故地添加空字符串或不需要的字符串，並且我們可以通過if/else邏輯對其進行更好的控制。

您還需要從else語句中刪除$('#loader_image').show() 。 即使ajax調用已成功處理，您仍在重新顯示它。

請參閱下面的清理success功能。

success: function(html) {
  $('#loader_image').hide();
  if (html == "") {
    $("#loader_message").html('<button class="btn btn-default" type="button">No more records.</button>').show()
  } else {
    $("#results").append(html);    
  }
  window.busy = false;
}

新的ajax調用：

$.ajax({
  type: "GET",
  async: false,
  url: "<?php echo(link);?>getrecords.php",
  data: "limit=" + lim + "&offset=" + off + "&where=" + where,
  cache: false,
  beforeSend: function() {
    $("#loader_message").html("").hide();
    $('#loader_image').show();
  },
  success: function(html) {
    $('#loader_image').hide();
    if (html == "") {
      $("#loader_message").html('<button class="btn btn-default" type="button">No more records.</button>').show()
    } else {
       $('#results').append(html);
    }
    window.busy = false;
  },
  error: function(error) {
    console.log(error);
    $('#loader_image').hide();
    $('#loader_message').html('There was an error processing your request.').show();
  }
});