自动加载滚动无限次显示最后一项

Question

我默认显示来自数据库的 6 个项目。如果用户向下滚动，则每次将列出更多项目 2 个项目。这是预期的行为。

但目前，最后一项（第 6 项）随着页面向下滚动而一次又一次地显示。我发现这是由于我的 sql 查询将结果限制为默认 6 项中的最后一个 id。但即便如此，如果只有 1 个项目与查询匹配，它也不应该再加载项目，但当我向下滚动时，它会无限加载。

所以我需要帮助来显示默认 6 个项目中最后一个 id 之后的项目，其次，如果显示所有结果，则不得滚动。

下面是我的代码，请帮忙。

脚本

$(function()
 {
var ID=$(".result_container:last").attr("id");
//alert(ID);
$(window).scroll(function(){

if  ($(window).scrollTop() == $(document).height() - $(window).height()){
 console.log($(document).height());

/*fetched the items from db**/

         $.ajax({
        dataType: "json",
        url: 'showAllTutor.php?action=get&last_msg_id='+ID,
        success: function(data){
        console.log(data.length);                               
        for (i = 0; i < data.length; i++) {
         $('#showalltutor').append("<td><div class='result_container' id='"+data[i].postId+"'>show item here</div>");
        }
  }});
 }
);

PHP

 <?php
 $last_msg_id=$_GET['last_msg_id'];
 $action=$_GET['action'];

 if($last_msg_id=="")
 {
 ?>
 <?php
  $Tutor = new searchItems();
  $showAllTutor = $Tutor->showAllTutor($name);
  $json=array();
  foreach($showAllTutor as $key=>$value)
  {
     array_push($json,array("name"=>$value["name"],"subject"=>$value["subject"],"rate"=>$value['rate'],"dateposted"=>$value['dateposted'],"location"=>$value['location'],"contact"=>$value['contact'],"morning"=>$value['morning'],"afternoon"=>$value['afternoon'],"evening"=>$value['evening'],"postId"=>$value['postId'],"subid"=>$value['subid']));
  }
  ?>

  <?php
    }
    else
    {

     $sql="SELECT * FROM userinfo,posts WHERE userinfo.UUID = posts.UUID AND posts.postUUID = '$last_msg_id' LIMIT 2";
        $stmt =connection::$pdo->prepare($sql);
        $stmt->execute();
        $json=array();

        while($row = $stmt->fetch())
        {

          array_push($json,array("name"=>$row['name'],"subject"=>$row['subname'],"subid"=>$row['subID'],"rate"=>$row['pricing'],"dateposted"=>$row['datePosted'],"location"=>$row['location'],"contact"=>$row['phone'],"morning"=>$row['morning'],"afternoon"=>$row['afternoon'],"evening"=>$row['evening'],"postId"=>$row['postUUID']));
        }

    }

     echo json_encode($json);
    ?>

//the showAllTutor function as below:

public function showAllTutor()
    {

        $sql="SELECT * FROM userinfo,posts WHERE userinfo.UUID = posts.UUID LIMIT 6";
        $stmt =connection::$pdo->prepare($sql);
        $stmt->execute();
        $tutorAll=array();

        while($row = $stmt->fetch())
        {
          array_push($tutorAll,array("name"=>$row['name'],"subject"=>$row['subname'],"subid"=>$row['subID'],"rate"=>$row['pricing'],"dateposted"=>$row['datePosted'],"location"=>$row['location'],"contact"=>$row['phone'],"morning"=>$row['morning'],"afternoon"=>$row['afternoon'],"evening"=>$row['evening'],"postId"=>$row['postUUID']));
        }
        return $tutorAll;
    }

Answer 1

如果您还没有得到答案，请尝试以下方法

     $page_number=2;//You need to pass the page number while making ajax for first it will be 1.for second it will be 2 and so on

        $limit=2;//Number of records you need to fetch

        $offest=$limit*$page_number+$limit;

        $sql = "
            SELECT * 
            FROM userinfo,posts 
            WHERE userinfo.UUID = posts.UUID 
                LIMIT $offest,$limit";

        $stmt = connection::$pdo->prepare($sql);
        $stmt->execute();
$json=array('status'=>true,'data'=>array());
$count =$stmt->rowCount();
if($count>0){
 while($row = $stmt->fetch())
        {

          array_push($json['data'],array("name"=>$row['name'],"subject"=>$row['subname'],"subid"=>$row['subID'],"rate"=>$row['pricing'],"dateposted"=>$row['datePosted'],"location"=>$row['location'],"contact"=>$row['phone'],"morning"=>$row['morning'],"afternoon"=>$row['afternoon'],"evening"=>$row['evening'],"postId"=>$row['postUUID']));
        }
}else{
$json['status']=false;
}

一旦获得空响应，您需要通过在 javascript 中设置变量来限制 ajax 调用。因此，不会再向服务器发送 ajax 调用。 在进行ajax之前检查一个条件如下

$(function()
 {
var is_more_result=true;//To check if there is any data by default keep true
var ID=$(".result_container:last").attr("id");
//alert(ID);
$(window).scroll(function(){

if  (($(window).scrollTop() == $(document).height() - $(window).height()) &&  is_more_result){
 console.log($(document).height());

/*fetched the items from db**/

         $.ajax({
        dataType: "json",
        url: 'showAllTutor.php?action=get&last_msg_id='+ID,
        success: function(data){
        if(!data['status']){
          is_more_result=false;
            }                              
        for (i = 0; i < data['data'].length; i++) {
         $('#showalltutor').append("<td><div class='result_container' id='"+data[i].postId+"'>show item here</div>");
        }
  }});
 }
);