获取所有数据后使"加载更多"按钮消失

Question

我的代码工作正常，单击"加载更多"按钮时，它会显示更多用户。 我现在的约束是，如果响应上没有更多值，如何删除"加载更多"按钮。

这就是我的模型的样子

public function getFreeAds($page){
$offset = 10*$page;
$limit = 10;
$this->db->select('*');
$this->db->from('escort');
$this->db->where('status', 'Approved');
$this->db->limit($offset ,$limit);
$this->db->order_by("time_stamp, UPPER(time_stamp)", "DESC");
$query = $this->db->get();
return $query->result();
}

我的控制器看起来像这样

public function getCountry(){
$page =  $_GET['page'];
$countries = $this->Home_model->getCountry($page);
foreach($countries as $country){
echo 
'<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<div class="thumb">
<a ><div class="hover-effect" data-e_id="'.$country->e_id.'" id="profile2">
<div class="hover-content">
<h1> '.$country->ProfileName.'</em></h1>
<p> '.$country->Height.' CM tall '.$country->BreastCup.'  Breast Size <b>Nationality: '.$country->Nationality.' </b></p>
<button  type="button"  class="btn-info">View More</button>
<button  type="button"  class="'.$country->confirmstatus.'">'.$country->confirmstatus.'</button>
<div class="top">
</div>
</div>
</div></a>
<div class="image" width="70%" height="1000px">
<img src="uploads/'.$country->ProfilePicture.'">
</div>
</div>
</div>
</div>';
}
exit;
}

这是我显示响应的查询代码。

$(document).ready(function(){
getcountry(0);
$("#load_more").click(function(e){
e.preventDefault();
var page = $(this).data('val');
getcountry(page);
});
});
var getcountry = function(page){
$("#loader").show();
$.ajax({
url:"<?php echo base_url() ?>Home/getCountry",
type:'GET',
data: {page:page}
}).done(function(response){
$("#show_data").append(response);
$("#loader").hide();
$('#load_more').data('val', ($('#load_more').data('val')+1));
scroll();
});
};
var scroll  = function(){
$('html, body').animate({
scrollTop: $('#load_more').offset().top
}, 1000);
};

Answer 1

您可以做的是获取同一函数中的下一个值，如果有可用的值，您可以创建一个输入字段(隐藏(，然后根据其值显示或隐藏按钮。

我正在为您的情况编写一个可能的解决方案，必要时会提及评论。请记住，有更好的方法可以做到这一点，例如使用 count，但这取决于您的代码。看看它是否对你有帮助。

控制器

public function getCountry(){
$page       =  $_GET['page'];
$countries  = $this->Home_model->getCountry($page);
$nextValue  = $this->Home_model->getCountry($page+1); // get the values for the next page
$showButton = !empty($nextValue) ? 'yes' : 'no'; // show the button if next value exists
foreach($countries as $country){
echo 
'<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<div class="thumb">
<a ><div class="hover-effect" data-e_id="'.$country->e_id.'" id="profile2">
<div class="hover-content">
<h1> '.$country->ProfileName.'</em></h1>
<p> '.$country->Height.' CM tall '.$country->BreastCup.'  Breast Size <b>Nationality: '.$country->Nationality.' </b></p>
<input type="hidden" class="showButton" value="'.$showButton.'" /> 
<!-- make a hidden input field and assign a value (yes/no) -->
<button  type="button"  class="btn-info">View More</button>
<button  type="button"  class="'.$country->confirmstatus.'">'.$country->confirmstatus.'</button>
<div class="top">
</div>
</div>
</div></a>
<div class="image" width="70%" height="1000px">
<img src="uploads/'.$country->ProfilePicture.'">
</div>
</div>
</div>
</div>';
}
exit;
}

视图

var getcountry = function(page){
$("#loader").show();
$.ajax({
url:"<?php echo base_url() ?>Home/getCountry",
type:'GET',
data: {page:page}
}).done(function(response){
$("#show_data").append(response);
$("#loader").hide();
$('#load_more').data('val', ($('#load_more').data('val')+1));
// check the value of input field
if($('.showButton:last').val() == "no"){
$('#load_more').hide(); // hide the button
}
scroll();
});
};

Answer 2

添加到包含总页数的响应元数据中。在每个请求期间，使用相同的子句对数据库进行计数查询。在每个请求后的 JS 代码中，将当前页面与响应中的总页数进行比较，如果到达最后一页，则隐藏按钮。