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

【问题标题】：Make Load more Button disappear after fetching all data获取所有数据后使加载更多按钮消失
【发布时间】：2020-10-03 13:20:58
【问题描述】：

我的代码运行良好，单击加载更多按钮时会显示更多用户。我现在的限制是如果响应没有更多价值，如何删除“加载更多”按钮。

这就是我的模型的样子

 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);
    };

【问题讨论】：

标签： javascript php jquery codeigniter

【解决方案1】：

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

我正在为您的情况编写一个可能的解决方案，必要时会提到 cmets。请记住，有更好的方法来执行此操作，例如使用 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();
    });
};

【讨论】：

感谢您的回复。但是，我不禁注意到它返回重复值。如何确保它不会重复数据库中的任何值？
嗯.. 什么重复值？（在哪里？）。我根本没有改变逻辑，所以它不应该带来任何新问题。 :)

【解决方案2】：

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

【讨论】：