在jquery / ajax中分页

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在jquery / ajax中分页相关的知识,希望对你有一定的参考价值。

我试着在jquery / ajax中使系统像分页一样。当我按下按钮视图时,我会显示下一个结果

<button class="btn" id="showFiveNext">View more</button>

但我不知道这是怎么回事。它可以在ajax中设置一个新的子句LIMIT,在我的第一个方法中使用偏移量,或者我必须使用计数器来显示/隐藏某些元素吗?

我用这种方法得到了我的元素

function getVideoComment($idVideo)
{
    $q = $this->db->select('*')->from('users_youtube_videos_comment uyvc')
        ->join('users_youtube_videos uyv', 'uyv.users_youtube_videos_id = uyvc.users_youtube_videos_id', 'left')
        ->join('users u', 'u.users_id_nat = uyv.users_youtube_videos_id_user', 'left')
        ->join('users_profils up', 'up.users_profils_id = u.users_id_nat', 'left')
        ->order_by('uyvc.users_youtube_videos_comment_id', 'DESC')
        ->limit('5')
        ->where('uyvc.users_youtube_videos_id', $idVideo)
        ->get();
    if($q->num_rows()>0)
    {
        foreach($q->result() as $row)
        {
            $data[] = $row;
        }
        return $data;
    }
}

我用这种方法算了

 function getCountComment($idVideo)
{
   $q = $this->db->select('count(users_youtube_videos_comment.users_youtube_videos_comment_id) AS commentCount')
       ->from('users_youtube_videos_comment')
       ->where('users_youtube_videos_comment.users_youtube_videos_id', $idVideo)
       ->get();
    if($q->num_rows()>0)
    {
        foreach($q->result() as $row)
        {
            $data[] = $row;
        }
        return $data;
    }
}

我用这个ajax请求显示结果

function getComment(){
        var videoId = '<?php echo $idVideo ?>';
        jQuery.ajax({
            type: "GET",
            url: "<?php echo base_url(); ?>video/getVideoComment?videoid=" +videoId,
            dataType: 'json',

            success: function(resGetVideoCom){

                $('#showVideoComm').empty();

                $.each(resGetVideoCom,function(key, value){

                    var avatarUser = '<img class="img-circle" src=" '+value.users_youtube_avatar_channel+' " height="52" alt="avatar user" >';                   
                    var pseudoUser = '<span class="pseudoComment">'+value.users_youtube_pseudo_channel+'</span>';           
                    var commentDate = '<span class="dateComment"> '+value.users_youtube_videos_comment_date+'</span><br>';
                    var commentValue = '<div class="valueComment">'+value.users_youtube_videos_comment_com+'</div><br><br>';

                    $('#showVideoComm').append(

                        avatarUser+
                        pseudoUser+
                        commentDate+
                        commentValue

                    );
                });
            },
            error:function(resGetVideoCom){

            }
        });
    }

和柜台

function getCountComment(){
        var videoId = '<?php echo $idVideo ?>';
        jQuery.ajax({
            type: "GET",
            url: "<?php echo base_url(); ?>video/getCountComment?videoid=" +videoId,
            dataType: 'json',
            success: function(resGetCountComment){
                $('#showCountVideoComm').empty();

                $.each(resGetCountComment,function(key, value){
                    var counterCom = '<span>'+value.commentCount+' commentaires</span>';
                    $('#showCountVideoComm').append(

                        counterCom

                    ).hide().fadeIn("slow");
                });
            },
            error:function(resGetCountComment){

            }
        });
    }

谢谢你的帮助,对不起我的英语。

答案

我想我明白了。我在函数getCount Comment()中添加了一个隐藏的输入,值为5。

当我点击“查看更多”按钮时,我得到此输入的值,我启动ajax请求,LIMIT子句是此输入的值。

在此请求成功时,我在输入值中添加“5”。

每次我点击按钮我的LIMIT取+5

它工作但不确定它的好方法。

以上是关于在jquery / ajax中分页的主要内容,如果未能解决你的问题,请参考以下文章

在 jquery 数据表中分页后保留文本框值

关键词搜索&分页功能的前端代码(ajax + jQuery)

Javascript代码片段在drupal中不起作用

jsp里用AJAX怎么做分页

几个非常实用的JQuery代码片段

Ajax分页插件Pagination从前台jQuery到后端java总结