Question

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

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

控制器代码：

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，则在条件下没有显示结果，另一个是要追加的视图数据。

您可以尝试这样的事情：

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是一个整数。否则一些用户可能会输入一个字符串，虽然默认情况下会使用查询构建器进行转义，但肯定会返回错误。

当结果为＆lt; =极限CI时，隐藏加载更多按钮

1 个答案: