使用javascript和codeigniter分页类进行分页

Am creating an image gallery using codeigniter and javascript. Am adding pagination via the codeigniter pagination class, and striping the pagination links of the url to the controller method. I want to make use of the offsets only, but am unable to prevent the links from from performing their default actions

Here my controller method

function gallery($offset= 0)
    {
        $limit = 12;
        $user_id = $this->session->userdata('user_id');
        $data = $this->avatar_model->user_avatars($user_id,$limit,$offset);
        $avatars = array();
        $count = $this->avatar_model->count_user_avatars($user_id);
        $pages = ceil($count/$limit);

        $this->load->library('pagination');

        $config['base_url'] = site_url("avatar/gallery");
        $config['total_rows'] = $count;
        $config['per_page'] = $limit; 
        $config['anchor_class'] = "paging_link";

        $this->pagination->initialize($config); 

        $links = $this->pagination->create_links();

        foreach($data as $key => $avatar)
        {
            $dat['avatar_id'] = $avatar->avatar_id;
            $dat['avatar_src'] = $avatar->avatar_small;
            $dat['create_date'] = time("d-m-Y",$avatar->create_date);
            $avatars[] = $dat;
        }

        $server_response['avatar_count'] = $count;
        $server_response['avatars'] = $avatars;
        $server_response['links'] = str_replace(site_url("avatar/gallery")."/","",$links);
        echo json_encode($server_response);
    }

and this is the javascript function making the request

   function initGallery(offset) {
            if(offset === undefined)
            {
            var request_url = url+'avatar/gallery';
            } else {
            var request_url = url+'avatar/gallery/'+offset;
            }
            $('#avatar_gallery').html('')
            $.get(request_url,function(data) {
                var dat = jQuery.parseJSON(data);
                //Build gallery
                $('#avatar_gallery').html('<div class="gallery_box"></div>');
                $('.gallery_box').append('<div class="gallery_header">Your Avatar Gallery</div>');
                $('.gallery_box').append('<div class="gallery_container"></div>');
                $.each(dat.avatars,function(index,item)
                {
                    $('.gallery_container').append(
                        '<div class="gallery_item">'+
                        '<img src="'+item.avatar_src+'" id="'+item.avatar_id+'" onclick="avatar.view_avatar(this.id)"/>'+
                        '</div>'
                    );
                });
                    $('.gallery_box').append('<div class="gallery_footer"></div>');
                    $('.gallery_footer').html('<div class="gallery_pagination"><div>');
                    $('.gallery_pagination').append(dat.links);
            });
//paging_link is class attached to the pagination links
            $(".paging_link").click(function(e){
                alert("Clicked");
                e.preventDefault();
            });
        }

The links still behave the default way even after i prevented them from the default behaviuor

1个回答



可能是因为您在.get成功回调之外设置了侦听器,因此点击侦听器分配在el准备好之前触发。 尝试在<。em>里面设置监听器 .get成功回调:</ p>

  function initGallery(offset){
if(offset === undefined)
{
var request_url = url +'avatar / gallery';
} else {
var request_url = url +'avatar / gallery /'+ offset;
}
$('#avatar_gallery')。html('' )
$ .get(request_url,function(data){
var dat = jQuery.parseJSON(data);
// Build gallery
$('#avatar_gallery')。html('&lt; div class = “gallery_box”&gt;&lt; / div&gt;');
$('。gallery_box')。append('&lt; div class =“gallery_header”&gt;您的头像图库&lt; / div&gt;');
$( '.gallery_box')。append('&lt; div class =“gallery_container”&gt;&lt; / div&gt;');
$ .each(dat.avatars,function(index,item)
{
$( '.gallery_container')。追加(
'&lt; div class =“gallery_item”&gt;'+
'&lt; img src =“'+ item.avatar_src +'”id =“'+ item.avatar_id +'”onclick =“avatar.view_avatar(this.id)”/&gt;'+
'&lt; / div&gt;'
);
});
$('。gallery_box')。append('&lt; div class =“gallery_footer”&gt;&lt; / div&gt;');
$('。 gallery_footer')。html('&lt; div class =“gallery_pagination”&gt;&lt; div&gt;');
$('。gallery_pagination')。append(dat.links);
// paging_link是附加到的类 分页链接
$(“。paging_link”)。click(function(e){
alert(“Clicked”);
e.preventDefault();
});
});
}

</ code> </ pre>
</ div>

展开原文

原文

It might be that the click listener assignment is firing before the el is ready because you are setting the listener outside the .get success callback. Try setting the listener inside the .get success callback:

function initGallery(offset) {
    if(offset === undefined)
    {
        var request_url = url+'avatar/gallery';
    } else {
        var request_url = url+'avatar/gallery/'+offset;
    }
    $('#avatar_gallery').html('')
    $.get(request_url,function(data) {
        var dat = jQuery.parseJSON(data);
        //Build gallery
        $('#avatar_gallery').html('<div class="gallery_box"></div>');
        $('.gallery_box').append('<div class="gallery_header">Your Avatar Gallery</div>');
        $('.gallery_box').append('<div class="gallery_container"></div>');
        $.each(dat.avatars,function(index,item)
        {
            $('.gallery_container').append(
                '<div class="gallery_item">'+
                '<img src="'+item.avatar_src+'" id="'+item.avatar_id+'" onclick="avatar.view_avatar(this.id)"/>'+
                '</div>'
            );
        });
        $('.gallery_box').append('<div class="gallery_footer"></div>');
        $('.gallery_footer').html('<div class="gallery_pagination"><div>');
        $('.gallery_pagination').append(dat.links);
        //paging_link is class attached to the pagination links
        $(".paging_link").click(function(e){
            alert("Clicked");
            e.preventDefault();
        });
    });
}

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐