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

Question

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

Answer 1

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