javascript - 当结果 <= 限制 CI 时隐藏加载更多按钮

Question

我在使用“加载更多”按钮时遇到问题。如果结果 (1) 小于 20 的限制，我希望按钮隐藏 (2) 如果没有更多结果，例如一切都已显示。目前，尽管我尽了最大努力，它仍然可见。

这个加载更多按钮应该被隐藏，因为我的限制是 20 并且它只有 4 个结果:

Controller 代码:

public function get_topic($user_id='')
    {
        $this->load->helper('text');
        $page = $_GET['page'];
        $value['posts'] = $this->user_model->get_userpost($user_id,$page);
        $this->load->view('themes/default/user/user_topic_post',$value);
    }

型号代码:

// get topic post
    function get_userpost($user_id,$page)
    {   
        $offset = 20 * $page;
        $limit=20;
        $this->db->where('status',1);
        $this->db->where('user_id',$user_id);
        $this->db->limit($limit);
        $this->db->offset($offset);
        $this->db->order_by('id','DESC');
        $query = $this->db->get('threads');
        return $query;
    }

user_topic_post 代码:

<?php
$CI = get_instance();
$i = 0;
foreach($posts->result() as $post):
$i++;
?>
<tr>
    <th scope="row">#<?php echo $i ?></th>
    <td><a href="<?php echo base_url("topic/".$post->thread_slug);?>"><?php echo $post->title; ?></a><br/>
    <small class="num-result"><?php echo strip_tags(word_limiter($post->content,20)); ?><br/><b>
    <?php 
    $posted_date = $post->created_at;
    $now = time();
    echo timespan($posted_date, $now, 1).'&nbsp'.lang_key('ago'); ?></b></small></td>
    <td class="num-result text-center"><?php echo custom_number_format($post->post_view); ?></td>
    <td class="num-result text-center"><?php echo custom_number_format($CI->threads_model->countTopicReplyByTopicId($post->id)); ?></td>
</tr>
<?php
endforeach; //foreach
?>

我的js代码:

<script>
        $(document).ready(function(){
            userpost(0);

            $(".load-more").click(function(e){
                e.preventDefault();
                var page = $(this).data('val');
                userpost(page);

            });

        });

        var userpost = function(page){
            $(".user-topic-post-loading").show();
            $(".load-more").show();
            $.ajax({
                url:  "<?php echo base_url("user/get_topic/".$account['id']); ?>",
                type:'GET',
                data: {page:page}
            }).done(function(response){
                $(".user-topic-post").append(response);
                $(".user-topic-post-loading").hide();
                $('.load-more').data('val', ($('.load-more').data('val')+1));
                if(response == ""){
                    $(".load-more").hide();
                }
            });

        };      
        </script>

Answer 1

那么，您需要向完成函数发送两个变量，一个是在结果小于 20 的情况下是否没有结果显示，另一个是要附加的 View 数据。

你可以尝试这样的事情:

PHP:

public function get_topic($user_id = '') {
    $this->load->helper('text');
    $page = $_GET['page'];
    $items_per_page = 20;
    $posts = $this->user_model->get_userpost($user_id, $items_per_page, $page);
    if ($posts->num_rows() < $items_per_page) {
        $msg = 'done';
    } else {
        $msg = 'success';
    }
    if ($posts->num_rows() > 0) {
        $body = $this->load->view('themes/default/user/user_topic_post', array('posts' => $posts), true);
    } else {
        $body = '';
    }
    $this->output->set_content_type('application/json');
    $this->output->set_output(json_encode(array('msg' => $msg, 'body' => $body)));
    $this->output->_display();
    exit;
}

public function get_userpost($user_id, $per_page, $page) {
    $this->db->where('status', 1);
    $this->db->where('user_id', $user_id);
    $this->db->limit($per_page);
    $this->db->offset($per_page * $page);
    $this->db->order_by('id', 'DESC');
    return $this->db->get('threads');
}

JS:

var userpost = function (page) {
    $(".user-topic-post-loading").show();
    $(".load-more").show();
    $.ajax({
        url: "<?php echo base_url("user/get_topic/" . $account['id']); ?>",
        type: 'GET',
        data: {
            page: page
        },
        dataType: 'json'
    }).done(function (response) {
        $(".user-topic-post").append(response.body);
        $(".user-topic-post-loading").hide();
        if (response.msg == "done") {
            $(".load-more").hide();
        } else {
            $('.load-more').data('val', ($('.load-more').data('val') + 1));
        }
    });

};

您还应该考虑验证 $page get var 是否为整数。否则，某些用户可能会输入一个字符串，尽管查询生成器默认会对其进行转义，但它肯定会返回错误。