加载更多按钮不起作用并显示页面上的所有记录答案

【问题标题】：Load more button not working and showing all the records on the page加载更多按钮不起作用并显示页面上的所有记录
【发布时间】：2021-06-18 02:52:17
【问题描述】：

我有一个页面，我正在使用 ajax 在我的页面上显示列表（最多 200 条记录）。我正在使用下面的代码来调用 ajax 并在页面上显示响应。第二个脚本是一个名为"Load More" 的按钮。我必须在页面上显示 20 条记录，然后用户点击加载而不是显示接下来的 20 条记录。

现在，我的问题是，我正在获取所有记录并加载更多按钮

$(document).ready(function(){
        $.ajax({
          url: 'function21.php',
          method:'post',
          dataType: "json", 
          data:{action:"employeelist21"},  
          success: function(data){
   
           $('#employeelist').append(data);
          }
        })
      });

    $(document).ready(function(){
     
     var list = $("#employeelist21 li");
     var numToShow = 20;
     var button = $("#next");
     var numInList = list.length;
     //alert(numInList);
     list.hide();
     if (numInList > numToShow) {
     button.show();
     }
     list.slice(0, numToShow).show();
     
     button.click(function(){
      var showing = list.filter(":visible").length;
      list.slice(showing - 1, showing + numToShow).fadeIn();
      var nowShowing = list.filter(":visible").length;
      if (nowShowing >= numInList) {
        button.hide();
      }
     });
  });

PHP

function employeelist21($pdo)
{

 $query=" sql query here";

 $stmt = $pdo->prepare($query);
 $stmt->execute();
 $results = $stmt->fetchAll();
if (!empty($results)) {
$data='';
 $data='<ul><li>
  <div class="box">
         <div><span>Company</span></div>
         <div><span>Industry</span></div>
          <div><span>Name</span></div>
         <div><span>Location</span></div>
         </div>
         </li>';

 foreach($results as $key){
  $data.='<li>
     <div class="box">
         <div><h4>'.$key['Industry'].'</h4></div>
         <div><p>'.$key['industry_name'].'</p></div>
         <div><p>'.$key['name'].'</p></div>
         <div><p>'.$key['city'].'</p></div>
     </div>
  </li>';
 }
 $data.='</ul><div class="text-center"><a href="javascript:void(0)" id="next" class="btn btn_red mt-5 mb-4">Load More</a></div>';
}
else{
    $data.='No records available';
}

echo json_encode($data);

}

【问题讨论】：

您应该将您的 ajax 放在一个单独的函数中，例如 getData(pageNumber) 并在文档准备就绪时调用此函数一次 getData(1); 然后 loadButton 的 onClick ，像这样调用 ajax getData(2)。你也可以有一个计数器来进行分页
@IndraKumarS，我认为这将花费大量时间来加载页面上的记录。
您没有确切说明问题所在。您一次加载 200 个并显示 20 个，明白了。那部分工作正常还是你展示了所有 200 个？问题是什么？
@Kinglish，我必须在页面加载时显示 20 条记录，并且当用户点击加载时显示接下来的 20 条记录。我尝试了上面的代码，我得到了我所有的 200 条记录。

标签： php html jquery ajax

【解决方案1】：

首先，我宁愿传回 json 格式的数据列表（不是 html），并像数组一样使用它，在 javascript 中为其创建 HTML。但是我们并不总是得到我们想要的，所以在这种情况下，我会为每组 20 个分配一个属性，如下所示：

// at the top of your script (not in a function)
let perPage = 20, onGroup=0

// in your ajax function ...
success: function(data){
  $('#employeelist').hide();
  $('#employeelist').append(data);
  $('#employeelist box').each( function(index) {
    if (index===0) return; //header row
    $(this).data('group',Math.floor(index-1/perPage))
  });
  $('#employeelist box').hide()
  $('#employeelist box [data-group=0]').show()
  $('#employeelist').show();
}

然后对于按钮，将其从 PHP 中删除并使其成为结果 div 下的元素

<div class="text-center"><a href="javascript:void(0)" id="next" class="btn btn_red mt-5 mb-4">Load More</a></div>

然后在你的脚本中

$(document).ready(function() {
   $("#next").click(function(){
      $('#employeelist box [data-group='+onGroup+']').hide()
      onGroup++;
      $('#employeelist box [data-group='+onGroup+']').show()

      if ($('#employeelist box [data-group='+(onGroup+1)+']').length ===0) {
       $(this).hide();
      }
      
     });
});

在这里很难测试，但如果它不起作用，请告诉我

【讨论】：